/* Real brand mono, self-hosted on the Dazzl Webflow site (same font used live) */
  @font-face{

    font-family:'Maison Neue Mono';

    src:url('/assets/c6515990eb3543e4-6941705f3483a007a3bd7b6a_FontsFree-Net-Maison-Neue-Mono.ttf') format('truetype');

    font-weight:400;
font-style:normal;
font-display:swap;

  }

  :root{

    --black:#1E1E1E;
--dark-grey:#727272;
--light-grey:#D9D9D9;
--neon:#E7F6A0;
--white:#FFFFFF;

    --radius:14px;
--maxw:1160px;
--mono:'Maison Neue Mono','Courier New',monospace;

  }

  *{
box-sizing:border-box;
margin:0;
padding:0}

  html{
scroll-behavior:smooth}

  body{
font-family:'Inter',Arial,sans-serif;
background:var(--black);
color:var(--white);
-webkit-font-smoothing:antialiased;
line-height:1.6}

  img{
display:block;
max-width:100%}

  a{
color:inherit;
text-decoration:none}


  /* shared */
  .wrap{
max-width:var(--maxw);
margin:0 auto;
padding:0 28px}

  .section{
padding:96px 0}

  .eyebrow{
font-family:var(--mono);
text-transform:uppercase;
letter-spacing:2.5px;
font-size:12px;
color:var(--neon);
display:inline-block;
margin-bottom:22px}

  .eyebrow.dark{
color:var(--black);
opacity:.7}

  h1,h2,h3{
font-weight:700;
letter-spacing:-.02em;
line-height:1.05}

  p{
font-size:18px}

  .lead{
font-size:20px;
color:var(--light-grey);
max-width:62ch}


  .btn{
display:inline-flex;
align-items:center;
gap:10px;
background:var(--neon);
color:var(--black);
font-family:var(--mono);
font-weight:500;
font-size:12px;
letter-spacing:-.05em;
text-transform:uppercase;
line-height:1;
padding:10px;
border-radius:2px;
transition:transform .15s ease,filter .15s ease}

  .btn:hover{
transform:translateY(-1px);
filter:brightness(.96)}

  .btn:focus-visible{
outline:3px solid var(--white);
outline-offset:3px}

  .btn.ghost{
background:transparent;
color:var(--white);
border:1px solid rgba(255,255,255,.25)}

  .btn.ghost:hover{
border-color:var(--neon);
color:var(--neon)}

  .btn .arrow{
font-family:var(--mono);
font-size:12px}

  .btn-row{
display:flex;
gap:14px;
flex-wrap:wrap;
margin-top:34px}


  /* shared image placeholder */
  .ph{
background:#242424;
border:2px dashed rgba(255,255,255,.18);
border-radius:var(--radius);
display:flex;
align-items:center;
justify-content:center;
text-align:center;
padding:24px;
font-family:var(--mono);
text-transform:uppercase;
letter-spacing:1.3px;
font-size:11px;
color:var(--dark-grey);
line-height:1.7}

  .ph.light{
background:#f4f4f4;
border-color:#cfcfcf;
color:#8a8a8a}


  .media-fill{
border:none;
padding:0;
overflow:hidden;
background:#242424;
border-radius:var(--radius)}

  .media-fill img{
width:100%;
height:100%;
object-fit:cover;
display:block;
border-radius:inherit}


  /* hero */
  .hero{
padding-top:84px;
padding-bottom:0}

  .hero h1{
font-size:clamp(2.5rem,6vw,5rem);
max-width:17ch;
margin-bottom:26px}

  .hero h1 .accent{
color:var(--neon)}

  .hero .lead{
margin-bottom:0}

  .hero-img{
margin-top:54px;
aspect-ratio:16/7}


  /* output gallery */
  .gallery h2{
font-size:clamp(1.7rem,3.6vw,2.8rem);
max-width:22ch;
margin-bottom:14px}

  .gallery .lead{
margin-bottom:42px}

  .gal-grid{
display:grid;
grid-template-columns:repeat(4,1fr);
gap:18px}

  .gal-card{
aspect-ratio:2/3}

  .gal-note{
margin-top:26px;
font-family:var(--mono);
text-transform:uppercase;
letter-spacing:1.5px;
font-size:11px;
color:var(--dark-grey)}


  /* stats */
  .stats{
padding:84px 0}

  .stats-grid{
display:grid;
grid-template-columns:repeat(4,1fr);
gap:1px;
background:rgba(255,255,255,.1);
border:1px solid rgba(255,255,255,.1);
border-radius:var(--radius);
overflow:hidden}

  .stat{
background:var(--black);
padding:34px 26px}

  .stat .num{
font-size:clamp(2.4rem,5.2vw,4rem);
font-weight:700;
letter-spacing:-.03em;
line-height:1}

  .stat .num.neon{
color:var(--neon)}

  .stat .unit{
font-size:1rem;
font-weight:500;
color:var(--light-grey);
margin-left:4px}

  .stat .tag{
font-family:var(--mono);
text-transform:uppercase;
letter-spacing:1.5px;
font-size:11px;
color:var(--dark-grey);
margin-top:16px;
line-height:1.5}


  /* cost (light) */
  .story{
background:var(--white);
color:var(--black)}

  .story .intro{
max-width:680px;
margin-bottom:54px}

  .story h2{
font-size:clamp(1.8rem,3.8vw,2.9rem);
margin-bottom:20px;
color:var(--black)!important}

  .story .intro p{
font-size:19px;
color:#2b2b2b!important}

  .cost-stack{
display:grid;
grid-template-columns:repeat(3,1fr);
gap:16px}

  .cost-item{
border:1px solid var(--light-grey);
border-radius:var(--radius);
padding:24px;
background:#fafafa}

  .cost-item .k{
font-family:var(--mono);
text-transform:uppercase;
letter-spacing:1.5px;
font-size:11px;
color:var(--dark-grey);
margin-bottom:12px}

  .cost-item .v{
font-weight:700;
font-size:18px;
color:var(--black);
margin-bottom:6px}

  .cost-item .d{
font-size:14.5px;
color:#555;
line-height:1.5}


  /* comparison */
  .cmp{
border:1px solid var(--light-grey);
border-radius:var(--radius);
overflow:hidden;
margin-bottom:14px}

  .cmp-row{
display:grid;
grid-template-columns:1.05fr 1fr 1fr}

  .cmp-row + .cmp-row{
border-top:1px solid #ececec}

  .cmp-cell{
padding:15px 20px}

  .cmp-cell.dz{
background:#fbfdef;
border-left:1px solid #eef3d6}

  .cmp-row.head{
background:#f7f7f7}

  .cmp-row.head .cmp-cell{
padding:18px 20px}

  .cmp-row.head .cmp-cell.dz{
background:var(--neon);
border-left:none}

  .cmp-h-k{
font-family:var(--mono);
text-transform:uppercase;
letter-spacing:1.5px;
font-size:11px;
color:var(--dark-grey)}

  .cmp-row.head .cmp-cell.dz .cmp-h-k{
color:rgba(30,30,30,.65)}

  .cmp-h-v{
font-weight:700;
font-size:16px;
color:var(--black);
margin-top:3px}

  .rl{
font-family:var(--mono);
text-transform:uppercase;
letter-spacing:1px;
font-size:10.5px;
color:var(--dark-grey)}

  .rv{
font-size:16px;
color:#2b2b2b;
font-weight:500;
margin-top:4px}

  .rv.big{
font-size:21px;
font-weight:700;
color:var(--black)}

  .est{
font-family:var(--mono);
font-size:10px;
letter-spacing:1px;
color:var(--dark-grey);
text-transform:uppercase;
margin-left:6px}

  .cmp-save{
display:flex;
justify-content:space-between;
align-items:center;
flex-wrap:wrap;
gap:10px;
background:var(--neon);
color:var(--black);
padding:18px 22px;
border-radius:var(--radius)}

  .cmp-save .s1{
font-weight:700;
font-size:18px}

  .cmp-save .s2{
font-family:var(--mono);
text-transform:uppercase;
letter-spacing:1.5px;
font-size:11px}

  .cmp-foot{
font-family:var(--mono);
text-transform:uppercase;
letter-spacing:.8px;
font-size:10.5px;
color:var(--dark-grey);
margin-top:14px;
line-height:1.6}


  /* before / after */
  .ba-head{
margin-bottom:42px}

  .ba-head h2{
font-size:clamp(1.7rem,3.6vw,2.8rem);
max-width:20ch}

  .ba-grid{
display:grid;
grid-template-columns:1fr 1fr;
gap:22px}

  .ba-card{
position:relative;
aspect-ratio:4/5;
font-size:11px;
letter-spacing:1.3px}

  .ba-card .balabel{
position:absolute;
top:16px;
left:16px;
z-index:2;
font-family:var(--mono);
text-transform:uppercase;
letter-spacing:2px;
font-size:11px;
background:var(--black);
color:var(--white);
padding:7px 12px;
border-radius:999px}

  .ba-card.after .balabel{
background:var(--neon);
color:var(--black)}


  /* feature rows: claim + product mockup */
  .feature{
display:grid;
grid-template-columns:1fr 1fr;
gap:54px;
align-items:center}

  .feature + .feature{
margin-top:60px}

  .feature.flip .feature-txt{
order:2}

  .feature .n{
font-family:var(--mono);
font-size:12px;
letter-spacing:2px;
color:var(--neon);
margin-bottom:18px}

  .feature h3{
font-size:clamp(1.4rem,2.6vw,2rem);
margin-bottom:16px;
max-width:16ch}

  .feature p{
font-size:17px;
color:var(--light-grey);
max-width:52ch}

  .feature-mock{
aspect-ratio:4/3;
font-size:11px}

  .benefits .bhead{
font-size:clamp(1.8rem,3.8vw,2.9rem);
max-width:18ch;
margin-bottom:54px}


  /* positioning band */
  .band{
background:var(--neon);
color:var(--black);
padding:90px 0}

  .band h2{
font-size:clamp(1.7rem,3.6vw,2.7rem);
max-width:20ch;
letter-spacing:-.02em;
line-height:1.15;
color:var(--black)!important}

  .band p{
font-size:18px;
color:rgba(30,30,30,.78)!important;
max-width:60ch;
margin-top:20px}


  /* proof */
  .proof-card{
display:grid;
grid-template-columns:1.1fr .9fr;
gap:0;
border:1px solid rgba(255,255,255,.1);
border-radius:var(--radius);
overflow:hidden}

  .proof-copy{
padding:48px 44px}

  .proof-copy .eyebrow{
margin-bottom:18px}

  .proof-copy blockquote{
font-size:clamp(1.4rem,2.6vw,2rem);
font-weight:700;
letter-spacing:-.02em;
line-height:1.2;
margin-bottom:22px}

  .proof-copy .byline{
font-family:var(--mono);
text-transform:uppercase;
letter-spacing:2px;
font-size:12px;
color:var(--dark-grey)}

  .proof-copy .byline strong{
color:var(--white);
font-weight:500}

  .proof-copy .pnums{
display:flex;
gap:34px;
margin:30px 0 6px;
flex-wrap:wrap}

  .proof-copy .pnum b{
display:block;
font-size:30px;
font-weight:700;
letter-spacing:-.02em;
color:var(--neon)}

  .proof-copy .pnum span{
font-family:var(--mono);
text-transform:uppercase;
letter-spacing:1.2px;
font-size:10.5px;
color:var(--dark-grey)}

  .proof-visual{
border-left:1px solid rgba(255,255,255,.1);
border-radius:0;
border-top:none}


  /* responsive */
  @media(max-width:900px){

    .stats-grid{
grid-template-columns:repeat(2,1fr)}

    .gal-grid{
grid-template-columns:1fr 1fr}

    .cost-stack{
grid-template-columns:1fr}

    .feature{
grid-template-columns:1fr;
gap:28px}

    .feature.flip .feature-txt{
order:0}

    .proof-card{
grid-template-columns:1fr}

    .proof-visual{
border-left:none;
border-top:1px solid rgba(255,255,255,.1);
min-height:300px}

  }

  @media(max-width:720px){

    .section{
padding:64px 0}

    .gal-grid{
grid-template-columns:1fr 1fr}

    .ba-grid{
grid-template-columns:1fr}

    .cmp-row{
grid-template-columns:1fr 1fr}

    .cmp-cell:first-child{
grid-column:1 / -1;
background:#f3f3f3}

  }

  @media(prefers-reduced-motion:reduce){
*{
transition:none!important;
scroll-behavior:auto!important}
}