@font-face{font-family:Poppins;src:url(/fonts/Poppins-Regular.ttf) format('truetype');font-weight:400;font-display:swap}@font-face{font-family:Poppins;src:url(/fonts/Poppins-SemiBold.ttf) format('truetype');font-weight:600;font-display:swap}*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;color:#1f1a15;background:#f4efe6;font:16px/1.65 Poppins,Arial,sans-serif;background-image:radial-gradient(circle at 8% 18%,rgba(244,177,131,.15),transparent 28%),radial-gradient(circle at 91% 58%,rgba(31,92,61,.1),transparent 30%)}a{color:inherit}.wrap{width:min(1120px,100%);margin:auto;padding-inline:28px}.nav{height:71px;display:flex;align-items:center;justify-content:flex-start}.navlinks{margin-left:auto}.brand img{width:40px;height:40px;border-radius:11px}.navlinks{display:flex;align-items:center;gap:12px}.button{display:inline-flex;align-items:center;justify-content:center;padding:13px 22px;border-radius:999px;color:#fff;text-decoration:none;font-weight:600;background:linear-gradient(110deg,#237e4b,#f2a65a);box-shadow:0 14px 28px -14px rgba(35,126,75,.65)}.hero{padding-top:76px;padding-bottom:84px}.hero-grid{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(300px,.75fr);gap:72px;align-items:center}.eyebrow{display:block;margin-bottom:16px;color:#b6782d;font-size:11px;font-weight:600;letter-spacing:.18em;text-transform:uppercase}h1,h2,h3,p{margin-top:0}h1{max-width:790px;margin-bottom:24px;font-size:clamp(48px,6.5vw,78px);line-height:1.04;letter-spacing:-.055em}h2{font-size:clamp(34px,4.8vw,54px);line-height:1.08;letter-spacing:-.04em}.lead,.answer{max-width:720px;color:#75675d;font-size:18px}.hero-phone{display:block;text-decoration:none}.phone{width:min(315px,85vw);margin:auto;padding:12px;border-radius:48px;background:#171310;box-shadow:0 32px 70px -28px #1f1a15}.phone img{display:block;width:100%;height:auto;aspect-ratio:390/844;border-radius:37px}.section{padding:82px 0}.section-head{max-width:800px}.glass-grid,.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:38px}.glass,.step{padding:30px;border:1px solid rgba(255,255,255,.75);border-radius:24px;background:linear-gradient(150deg,rgba(255,255,255,.62),rgba(255,255,255,.22));box-shadow:inset 0 1px rgba(255,255,255,.95),0 22px 46px -28px rgba(74,50,24,.4);backdrop-filter:blur(28px) saturate(1.6)}.glass h3,.step h3{font-size:21px;line-height:1.25}.glass p,.step p{margin:0;color:#75675d}.steps{counter-reset:steps}.step{counter-increment:steps}.step:before{content:'0' counter(steps);display:block;margin-bottom:14px;color:#b6782d;font-size:11px;letter-spacing:.16em}.photo-band{position:relative;width:min(1064px,calc(100% - 56px));min-height:390px;margin:20px auto;border-radius:28px;overflow:hidden;background:center 52%/cover url('/assets/band_cocktails.jpg');box-shadow:0 28px 58px -28px rgba(42,29,18,.55)}.photo-band:after{content:'';position:absolute;inset:0;background:linear-gradient(90deg,rgba(20,15,11,.76),rgba(20,15,11,.25) 65%,transparent)}.photo-band .band-copy{position:absolute;z-index:1;left:clamp(28px,6vw,72px);bottom:clamp(30px,6vw,68px);max-width:560px;color:#fff}.photo-band h2{margin-bottom:12px}.photo-band p{margin:0;color:rgba(255,255,255,.88)}.flow{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-top:38px;counter-reset:flow}.flow article{counter-increment:flow;padding:24px 20px;border:1px solid rgba(255,255,255,.72);border-radius:20px;background:rgba(255,255,255,.48)}.flow article:before{content:'0' counter(flow);display:block;margin-bottom:12px;color:#b6782d;font-size:11px;letter-spacing:.14em}.flow h3{font-size:17px;line-height:1.3}.flow p{margin:0;color:#75675d;font-size:15px}.safety{padding:54px;border:1px solid rgba(255,255,255,.76);border-radius:30px;background:linear-gradient(145deg,rgba(255,255,255,.68),rgba(255,255,255,.24));box-shadow:0 28px 58px -32px rgba(74,50,24,.4)}.safety-grid{display:grid;grid-template-columns:1fr 1fr;gap:44px}.ticks{list-style:none;padding:0;margin:22px 0 0}.ticks li{position:relative;margin:12px 0;padding-left:26px;color:#75675d}.ticks li:before{content:'✓';position:absolute;left:0;color:#237e4b;font-weight:600}.faq details{padding:21px 0;border-bottom:1px solid rgba(31,26,21,.12)}.faq summary{cursor:pointer;font-size:17px;font-weight:600}.faq details p{margin:10px 0 0;color:#75675d}.cta{margin-top:40px;padding:76px 28px;text-align:center;border:1px solid rgba(255,255,255,.76);border-radius:32px;background:linear-gradient(145deg,rgba(255,255,255,.68),rgba(255,255,255,.24));box-shadow:0 28px 58px -32px rgba(74,50,24,.4)}.cta .lead{margin:0 auto 24px}.foot{display:flex;justify-content:space-between;gap:24px;padding-block:34px}.foot div{display:flex;gap:20px}@media(max-width:850px){.hero-grid{grid-template-columns:1fr;text-align:center}.hero-grid h1,.hero-grid .lead{margin-inline:auto}.glass-grid,.steps,.flow{grid-template-columns:repeat(2,1fr)}.safety-grid{grid-template-columns:1fr}}@media(max-width:600px){.wrap{padding-inline:20px}.nav{height:60px}.navlinks{gap:12px}.navlinks>a:not(.button){display:none}.hero{padding-top:48px}.hero-grid{gap:44px}h1{font-size:43px}.section{padding:62px 0}.glass-grid,.steps,.flow{grid-template-columns:1fr}.safety{padding:30px 22px}.photo-band{width:calc(100% - 40px);min-height:350px}.foot{flex-direction:column}.foot div{flex-wrap:wrap}}

/* Four-step funnel. .steps is 3-up, so a 4th item would orphan on its own row.
   The media queries below must repeat the selector: .steps.four outranks the
   plain .steps rules in the existing breakpoints whatever their order. */
.steps.four{grid-template-columns:repeat(4,1fr)}
@media(max-width:850px){.steps.four{grid-template-columns:repeat(2,1fr)}}
@media(max-width:600px){.steps.four{grid-template-columns:1fr}}

/* Demo request form, shared by the product pages, so a visitor who lands deep
   can book from where they are instead of being sent back to the homepage. */
.demo-card{margin-top:40px;padding:52px;border:1px solid rgba(255,255,255,.76);border-radius:32px;background:linear-gradient(145deg,rgba(255,255,255,.68),rgba(255,255,255,.24));box-shadow:0 28px 58px -32px rgba(74,50,24,.45);display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:center}
.demo-card h2{margin:14px 0 0}
.demo-card .lead{margin-top:16px}
.field{margin-bottom:14px}
.field label{display:block;margin-bottom:6px;font-weight:600;font-size:12.5px;letter-spacing:.5px;text-transform:uppercase;color:#75675d}
.field input,.field textarea,.field select{width:100%;font-family:Poppins,Arial,sans-serif;font-size:15px;color:#1f1a15;background:#fff;border:1px solid rgba(31,26,21,.14);border-radius:14px;padding:12px 15px;outline:none;box-shadow:inset 0 1px 2px rgba(31,26,21,.05)}
.field input::placeholder,.field textarea::placeholder{color:#9a8d83}
.field input:focus,.field textarea:focus,.field select:focus{border-color:#f2a65a}
.field input:focus-visible,.field textarea:focus-visible,.field select:focus-visible{outline:3px solid #1f5c46;outline-offset:2px}
.field textarea{resize:vertical;min-height:84px;line-height:1.5}
.hp-field{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.demo-card form button{width:100%;border:none;cursor:pointer;font-family:inherit}
.form-note{margin-top:10px;font-size:12px;color:#9a8d83;text-align:center}
.form-done{display:none;text-align:center;padding:24px}
.form-done.show{display:block}
.demo-card form.hide{display:none}
@media(max-width:850px){.demo-card{grid-template-columns:1fr;gap:34px;padding:34px}}

/* Product menu in the top bar. Inline above 1080px, behind a hamburger below,
   because the bar already carries brand, Blog, Log in, demo and language. */
nav{position:relative}
.nav-prod{display:flex;align-items:center;gap:3px;margin-left:20px;padding:4px;border:1px solid rgba(31,26,21,.09);border-radius:999px;background:rgba(255,255,255,.5);box-shadow:inset 0 1px rgba(255,255,255,.9),0 12px 30px -25px rgba(42,29,18,.65);backdrop-filter:blur(18px) saturate(1.3)}
.nav-prod a{display:inline-flex;align-items:center;justify-content:center;min-height:38px;padding:8px 13px;border:1px solid transparent;border-radius:999px;color:#1f1a15;font-size:13px;font-weight:600;letter-spacing:-.01em;text-decoration:none;white-space:nowrap;transition:background .18s,border-color .18s,box-shadow .18s,color .18s,transform .18s}
.nav-prod a:hover{border-color:rgba(31,92,70,.12);background:rgba(255,255,255,.88);box-shadow:0 8px 18px -14px rgba(31,92,70,.65);color:#1f5c46;transform:translateY(-1px)}
.nav-prod a:active{transform:translateY(0)}
.nav-prod a[aria-current="page"]{border-color:rgba(255,255,255,.72);background:linear-gradient(110deg,#247949,#d89748);box-shadow:0 9px 20px -12px rgba(31,92,70,.72);color:#fff}
.navlinks>a:not(.button),.nav-blog{display:inline-flex;align-items:center;justify-content:center;min-height:42px;padding:9px 4px;border:0;border-radius:999px;background:none;color:#6b6057;font-weight:600;text-decoration:none;transition:color .18s}
.navlinks>a:not(.button):hover,.nav-blog:hover{color:#1f5c46}
.nav-prod a:focus-visible,.navlinks>a:focus-visible,.nav-blog:focus-visible,.nav-burger:focus-visible,.nav-panel a:focus-visible{outline:3px solid #1f5c46;outline-offset:3px;border-radius:999px}
.nav-burger{display:none;align-items:center;justify-content:center;width:44px;height:44px;margin-left:10px;padding:0;border:0;background:transparent;cursor:pointer;border-radius:12px;touch-action:manipulation;-webkit-tap-highlight-color:transparent}
.nav-panel a{touch-action:manipulation;-webkit-tap-highlight-color:transparent}
.nav-burger i{position:relative;display:block;width:20px;height:2px;border-radius:2px;background:#1f1a15;transition:background .2s}
.nav-burger i::before,.nav-burger i::after{content:"";position:absolute;left:0;width:20px;height:2px;border-radius:2px;background:#1f1a15;transition:transform .2s}
.nav-burger i::before{top:0;transform:translateY(-6px)}
.nav-burger i::after{top:0;transform:translateY(6px)}
.nav-burger[aria-expanded="true"] i{background:transparent}
.nav-burger[aria-expanded="true"] i::before{transform:rotate(45deg)}
.nav-burger[aria-expanded="true"] i::after{transform:rotate(-45deg)}
.nav-panel{display:none}
@media(max-width:1080px){
  .nav-prod{display:none}
  .nav-burger{display:flex}
  .nav-panel{display:block;position:absolute;left:0;right:0;top:100%;z-index:60;overflow:hidden;max-height:0;visibility:hidden;pointer-events:none;
    background:#f6f2ea;box-shadow:0 18px 36px -24px rgba(74,50,24,.5);
    border-bottom:1px solid rgba(31,26,21,.07);transition:max-height .22s ease}
  .nav-panel[data-open="true"]{max-height:80vh;overflow-y:auto;visibility:visible;pointer-events:auto}
  /* The gradient hairline marks the open state in the brand's own colours. */
  .nav-panel[data-open="true"]::before{content:"";position:absolute;top:0;left:0;right:0;height:2px;background:linear-gradient(110deg,#237e4b,#f2a65a)}
  .nav-panel ul{margin:0;padding:10px 0 18px;list-style:none}
  .nav-panel a{display:block;padding:13px 28px;font-size:16px;font-weight:600;color:#1f1a15;text-decoration:none}
  .nav-panel a:hover{background:rgba(31,92,70,.06)}
  .nav-panel a[aria-current="page"]{background:rgba(31,92,70,.09);color:#1f5c46}
  .nav-panel .panel-sep{margin:8px 28px;border-top:1px solid rgba(31,26,21,.08)}
}
@media(prefers-reduced-motion:reduce){.nav-panel,.nav-burger i,.nav-burger i::before,.nav-burger i::after{transition:none}}
.nav-sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
@media(max-width:1080px){
  /* The bar keeps brand, demo and language; everything else moves into the
     panel, which also ends the 10.5px squeeze these links used to get. */
  .nav-cta>a:not(.btn):not(.button),.navlinks>a:not(.button){display:none}
}
@media(max-width:1080px){
  /* Phone bar: hamburger left, mark centred, demo and language right.
     The mark is absolutely centred so the two sides can differ in width
     without pushing it off centre. */
  nav.nav,nav .nav-in,nav .nav{position:relative}
  .nav-burger{order:-1;margin-left:0;margin-right:auto}
  .brand{position:absolute;left:50%;transform:translateX(-50%);margin:0}
  .nav-panel .panel-cta{padding:14px 28px 4px}
  .nav-panel .panel-login{display:inline-flex;align-items:center;justify-content:center;width:100%;
    padding:12px 22px;border-radius:999px;font-weight:600;text-decoration:none;color:#1f5c46;
    border:1px solid rgba(31,92,70,.35);background:rgba(255,255,255,.6)}
  .nav-panel .panel-login:hover{background:rgba(31,92,70,.08)}
}

@media(max-width:1080px){
  .nav-cta>a,.navlinks>a,.nav-right>a,.nav-blog{display:none}
  .nav-panel .panel-demo{display:inline-flex;align-items:center;justify-content:center;width:100%;
    padding:13px 22px;border-radius:999px;font-weight:600;text-decoration:none;color:#fff;
    background:linear-gradient(110deg,#237e4b,#f2a65a);box-shadow:0 12px 26px -12px rgba(190,110,45,.6)}
  .nav-panel .panel-cta+.panel-cta{padding-top:10px}
}

@media(max-width:1080px){
  .brand img,.brand-mark{width:34px;height:34px}
  .brand-word{height:26px}
}

.analytics-hero .hero-grid{grid-template-columns:minmax(0,.95fr) minmax(0,1.05fr);gap:52px}
.analytics-hero .hero-grid>.glass{padding:14px}
@media(max-width:850px){.analytics-hero .hero-grid{grid-template-columns:1fr;gap:34px}}

/* Language chips: one wrapped row instead of a tall column of ticks. */
.lang-chips,.chips{display:flex;flex-wrap:wrap;gap:10px;margin:28px 0 0;padding:0;list-style:none}
.lang-chips li,.chips li{padding:8px 18px;border:1px solid rgba(31,26,21,.1);border-radius:999px;background:rgba(255,255,255,.55);font-size:14px;font-weight:600;line-height:1.4;color:#1f1a15;box-shadow:inset 0 1px rgba(255,255,255,.9)}
.lang-chips li.more,.chips li.more{border-style:dashed;border-color:rgba(31,92,70,.35);background:rgba(31,92,70,.06);color:#1f5c46}
.lang-note{margin:16px 0 0;color:#75675d;font-size:14px}

.steps.two{grid-template-columns:repeat(2,1fr)}
@media(max-width:850px){.steps.two{grid-template-columns:1fr}}
.chips+.steps{margin-top:26px}

.navlinks>a[aria-current="page"],.nav-blog[aria-current="page"],.nav-cta>a.nav-home[aria-current="page"]{color:#1f5c46}

/* Hero headline: in the two-column hero the text column is about half the page, so the old 78px headline ran to
   6 or 7 lines in longer languages. Smaller, and balanced so no line ends on a stray word. */
.hero-grid h1{font-size:clamp(36px,4.2vw,56px);line-height:1.06;text-wrap:balance}
@media(max-width:850px){.hero-grid h1{font-size:clamp(36px,10vw,48px)}}

/* Headings inside the big two-column cards sit in half the width, so at the page-heading size they ran to four
   heavy lines. A step down keeps them to two or three. */
.safety h2{font-size:clamp(28px,3.4vw,44px);line-height:1.08;text-wrap:balance}

/* The big card is a .wrap with its own 54px padding. At 1120px and below .wrap is 100% wide, so the card touched the
   edges of the screen on tablets and phones. Keep a 20px margin on each side. */
.wrap.safety{width:min(1120px,calc(100% - 40px))}