:root{
    --teal:#3FAFA3;
    --teal-light:#63C7BC;
    --teal-deep:#1B7A6F;
    --ink:#2C3745;
    --slate:#3E4C5E;
    --slate-mid:#5C6B7D;
    --paper:#F6F8F9;
    --paper-2:#EDF1F2;
    --white:#FFFFFF;
    --line:#DFE6E9;
    --shadow: 0 20px 60px -20px rgba(44,55,69,.35);
    --radius: 14px;
    --maxw: 1180px;
  }
  *{box-sizing:border-box;}
  html{scroll-behavior:smooth;}
  body{
    margin:0;
    font-family:'Open Sans', system-ui, -apple-system, sans-serif;
    color:var(--ink);
    background:var(--paper);
    -webkit-font-smoothing:antialiased;
  }
  img,video{max-width:100%;display:block;}
  a{color:inherit;}
  .wrap{max-width:var(--maxw);margin:0 auto;padding:0 24px;}
  h1,h2,h3{font-family:'Open Sans', sans-serif;line-height:1.15;margin:0 0 .5em;letter-spacing:-.01em;}
  h1{font-weight:800;}
  h2{font-weight:800;}
  h3{font-weight:700;}
  p{line-height:1.65;color:var(--slate);margin:0 0 1em;}
  .eyebrow{
    display:inline-flex;align-items:center;gap:8px;
    font-size:13px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
    color:var(--teal-deep);margin-bottom:14px;
  }
  .eyebrow::before{content:"";width:22px;height:2px;background:var(--teal-deep);display:inline-block;}
  .btn{
    display:inline-flex;align-items:center;gap:8px;
    padding:14px 26px;border-radius:999px;font-weight:700;font-size:15px;
    text-decoration:none;border:2px solid transparent;cursor:pointer;
    transition:transform .18s ease, box-shadow .18s ease, background .18s ease, color .18s ease;
    white-space:nowrap;
  }
  .btn-primary{background:var(--teal-deep);color:#fff;box-shadow:0 10px 30px -8px rgba(27,122,111,.55);}
  .btn-primary:hover{transform:translateY(-2px);box-shadow:0 16px 36px -8px rgba(27,122,111,.65);background:#176a60;}
  .btn-ghost{background:rgba(255,255,255,.08);color:#fff;border-color:rgba(255,255,255,.55);backdrop-filter:blur(6px);}
  .btn-ghost:hover{background:rgba(255,255,255,.18);transform:translateY(-2px);}
  .btn-dark{background:var(--ink);color:#fff;}
  .btn-dark:hover{background:var(--slate);transform:translateY(-2px);}
  .btn-outline{background:transparent;color:var(--ink);border-color:var(--line);}
  .btn-outline:hover{border-color:var(--teal);color:var(--teal);}

  /* Header */
  header.site{
    position:fixed;top:0;left:0;right:0;z-index:100;
    padding:18px 0;
    transition:background .3s ease, box-shadow .3s ease, padding .3s ease;
  }
  /* Before the "scrolled" solid background kicks in, the header's white text
     sits directly over whatever the hero video is doing, which makes its
     contrast entirely dependent on that footage staying dark enough at the
     very top of frame. Rather than trust that, give it its own permanent
     dark gradient scrim, independent of the video, so it's readable no
     matter what plays under it, today or if the hero footage changes later. */
  header.site::before{
    content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
    background:linear-gradient(to bottom, rgba(8,12,16,.60) 0%, rgba(8,12,16,.28) 65%, rgba(8,12,16,0) 100%);
    transition:opacity .3s ease;
  }
  header.site.scrolled::before{opacity:0;}
  header.site .wrap{display:flex;align-items:center;justify-content:space-between;gap:16px;}
  header.site.scrolled{background:rgba(246,248,249,.92);backdrop-filter:blur(10px);box-shadow:0 4px 24px rgba(44,55,69,.08);padding:12px 0;}
  .brand{display:flex;align-items:center;gap:12px;text-decoration:none;color:#fff;}
  header.site.scrolled .brand{color:var(--ink);}
  /* Real logo files, swapped by scroll state (dark, for the transparent
     hero-video header) vs light (for the solid/scrolled header and the
     legal pages, which force the scrolled state permanently). The full
     wordmark drops to the icon-only mark at very narrow widths, mirroring
     the old brand-full/brand-short text swap below. */
  .brand-logo{display:flex;align-items:center;flex:none;}
  .brand-logo img{height:40px;width:auto;display:none;}
  /* Each override pairs the element with its class so its specificity beats
     the ".brand-logo img" rule above (a bare class selector would tie on
     specificity and lose to the more specific base rule). */
  .brand-logo img.brand-logo-full-onvideo{display:block;}
  header.site.scrolled .brand-logo img.brand-logo-full-onvideo{display:none;}
  header.site.scrolled .brand-logo img.brand-logo-full-onlight{display:block;}
  .brand-text{line-height:1.15;}
  .brand-text b{display:block;font-size:15px;font-weight:800;letter-spacing:.01em;}
  .brand-text small{display:block;font-size:11px;letter-spacing:.08em;text-transform:uppercase;opacity:.75;}
  nav.primary{display:flex;align-items:center;gap:28px;}
  nav.primary a{
    /* White by default because the unscrolled header sits directly over the
       hero video with no background of its own (same treatment as .brand);
       previously this was color:inherit, which resolved to the dark body
       text color and left the nav links reading at ~2:1 contrast against
       the video until the visitor scrolled 40px. */
    font-size:14px;font-weight:600;text-decoration:none;color:#fff;opacity:.9;
  }
  header.site.scrolled nav.primary a{color:var(--ink);}
  nav.primary a:hover{opacity:1;color:var(--teal-deep);}
  /* Higher-specificity overrides so the CTA button keeps white text instead of
     inheriting the plain nav-link color rules above (normal + hover states). */
  nav.primary a.btn-primary, nav.primary a.btn-primary:hover,
  header.site.scrolled nav.primary a.btn-primary, header.site.scrolled nav.primary a.btn-primary:hover{color:#fff;opacity:1;}
  .mobile-menu a.btn-primary{color:#fff;}
  .nav-links{display:flex;gap:26px;}
  .brand-short{display:none;}
  .menu-toggle{
    display:none;flex-direction:column;justify-content:center;align-items:center;gap:5px;
    width:44px;height:44px;border-radius:8px;border:1px solid rgba(255,255,255,.5);
    background:rgba(255,255,255,.08);cursor:pointer;flex:none;padding:0;
    /* Sit above .mobile-menu (a fixed-position sibling with its own z-index)
       so the same button stays clickable to CLOSE the menu once it's open —
       without this the open overlay paints over the button and traps the
       visitor with no way to dismiss it except Escape or picking a link. */
    position:relative;z-index:101;
  }
  header.site.scrolled .menu-toggle, header.site.menu-open .menu-toggle{border-color:var(--line);background:transparent;}
  .menu-toggle .bar{width:18px;height:2px;background:#fff;border-radius:2px;transition:background .2s ease;}
  header.site.scrolled .menu-toggle .bar, header.site.menu-open .menu-toggle .bar{background:var(--ink);}
  .mobile-menu{
    display:none;position:fixed;top:0;left:0;right:0;z-index:99;
    background:var(--white);box-shadow:0 12px 30px rgba(44,55,69,.15);
    padding:84px 24px 24px;flex-direction:column;gap:4px;
  }
  .mobile-menu.open{display:flex;}
  .mobile-menu a{
    padding:14px 4px;font-size:16px;font-weight:700;color:var(--ink);text-decoration:none;
    border-bottom:1px solid var(--line);
  }
  .mobile-menu .btn{margin-top:14px;justify-content:center;}
  .skip-link{
    position:absolute;left:16px;top:-60px;z-index:1000;background:var(--ink);color:#fff;
    padding:10px 18px;border-radius:8px;font-weight:700;font-size:14px;text-decoration:none;
    transition:top .2s ease;
  }
  .skip-link:focus{top:16px;}
  @media (max-width: 900px){
    .nav-links{display:none;}
    .menu-toggle{display:flex;}
    nav.primary{gap:10px;}
  }
  .cta-long{display:inline;}
  .cta-short{display:none;}
  @media (max-width: 640px){
    header.site{padding:12px 0;}
    header.site .wrap{padding:0 16px;gap:8px;}
    .brand{gap:8px;}
    .brand-logo img{height:32px;}
    .brand-text b{font-size:13px;white-space:nowrap;}
    .brand-text small{display:none;}
    nav.primary .btn-primary{padding:9px 14px !important;font-size:12px !important;}
    .cta-long{display:none;}
    .cta-short{display:inline;}
  }
  @media (max-width: 400px){
    .brand-logo img.brand-logo-full-onvideo, .brand-logo img.brand-logo-full-onlight{display:none !important;}
    .brand-logo img.brand-logo-mark-onvideo{display:block;}
    header.site.scrolled .brand-logo img.brand-logo-mark-onvideo{display:none;}
    header.site.scrolled .brand-logo img.brand-logo-mark-onlight{display:block;}
  }

  /* Video chapter sections */
  .chapter{
    position:relative;min-height:92vh;display:flex;align-items:flex-end;
    overflow:hidden;color:#fff;isolation:isolate;
  }
  .chapter.chapter-flush{min-height:auto;}
  .chapter .bg-video-wrap{position:absolute;inset:0;z-index:0;background:#0f151b;}
  .chapter video, .chapter .poster-img{
    position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  }
  .chapter .scrim{
    position:absolute;inset:0;z-index:1;
    background:
      linear-gradient(0deg, rgba(15,21,27,.92) 0%, rgba(15,21,27,.55) 40%, rgba(15,21,27,.25) 68%, rgba(15,21,27,.60) 100%);
  }
  .chapter .content{position:relative;z-index:2;padding:80px 0 64px;width:100%;}
  .chapter .tag{
    display:inline-flex;align-items:center;gap:8px;
    font-size:12px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;
    color:#fff;margin-bottom:16px;
    background:rgba(10,15,20,.6);border:1px solid rgba(255,255,255,.18);
    padding:7px 14px 7px 12px;border-radius:999px;
  }
  .chapter .tag::before{content:"";width:14px;height:2px;background:var(--teal-light);display:inline-block;flex:none;}
  .chapter h2{font-size:clamp(30px,4.2vw,52px);max-width:820px;color:#fff;}
  .chapter .lede{font-size:clamp(16px,1.6vw,19px);max-width:640px;color:rgba(255,255,255,.88);}
  .chapter .cta-row{display:flex;gap:14px;flex-wrap:wrap;margin-top:26px;}
  /* Small secondary path shown next to the Cal.com booking buttons, so
     visitors who'd rather not use the calendar widget have an explicit,
     visible alternative instead of the button silently doing two things. */
  .cta-alt{font-size:13px;margin-top:14px;color:rgba(255,255,255,.75);}
  .cta-alt a{color:#fff;text-decoration:underline;text-underline-offset:2px;}
  .cta-alt a:hover{color:var(--teal-light);}
  .contact-card .cta-alt{margin-top:12px;}

  /* Hero specific */
  .hero{min-height:100vh;min-height:100svh;align-items:center;}
  .hero .content{padding-top:120px;}
  .hero-badges{display:flex;flex-wrap:wrap;gap:10px 22px;margin-top:34px;}
  .hero-badges span{
    font-size:13px;font-weight:600;color:rgba(255,255,255,.85);
    display:flex;align-items:center;gap:8px;
  }
  .hero-badges span::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--teal-light);flex:none;}
  /* On short viewports (small phones, or a phone rotated flat) the stacked
     heading + lede + buttons + trust badges add up to taller than the
     screen, pushing the primary CTA buttons below the fold. Trim vertical
     spacing, and drop the (secondary, supplementary) badges row first. */
  .lede-short{display:none;}
  @media (max-height: 700px){
    .hero .content{padding-top:76px;}
    .hero .lede{margin-bottom:0;}
    .hero-badges{margin-top:14px;}
    .lede-full{display:none;}
    .lede-short{display:inline;}
  }
  @media (max-height: 620px){
    .hero-badges{display:none;}
  }
  .scroll-cue{
    position:absolute;left:50%;bottom:28px;transform:translateX(-50%);z-index:2;
    display:flex;flex-direction:column;align-items:center;gap:8px;color:rgba(255,255,255,.75);
    font-size:11px;letter-spacing:.14em;text-transform:uppercase;
  }
  .scroll-cue .chev{width:9px;height:9px;border-right:2px solid currentColor;border-bottom:2px solid currentColor;transform:rotate(45deg);animation:bob 1.8s ease-in-out infinite;}
  @keyframes bob{0%,100%{transform:translateY(0) rotate(45deg);}50%{transform:translateY(6px) rotate(45deg);}}

  .banner{
    background:var(--ink);color:#fff;text-align:center;padding:13px 20px;font-size:14px;font-weight:600;
  }
  .banner a{color:#fff;text-decoration:underline;text-underline-offset:2px;margin-left:6px;font-weight:700;}
  .banner a:hover{color:var(--teal-light);}

  /* Light content sections */
  .section{padding:96px 0;}
  .section.alt{background:var(--white);}
  .section-head{max-width:680px;margin:0 auto 52px;text-align:center;}
  .section-head.left{text-align:left;margin-left:0;}

  .grid{display:grid;gap:24px;}
  .grid.cols-2{grid-template-columns:repeat(2,1fr);}
  .grid.cols-4{grid-template-columns:repeat(4,1fr);}
  @media (max-width:900px){ .grid.cols-2,.grid.cols-4{grid-template-columns:1fr;} }

  .card{
    background:var(--white);border:1px solid var(--line);border-radius:var(--radius);
    padding:30px;transition:transform .2s ease, box-shadow .2s ease, border-color .2s ease;
  }
  .card:hover{transform:translateY(-4px);box-shadow:var(--shadow);border-color:transparent;}
  .card h3{font-size:19px;margin-bottom:10px;}
  .card ul{margin:14px 0 18px;padding-left:18px;color:var(--slate);font-size:14px;}
  .card ul li{margin-bottom:6px;}
  .card a.link{font-weight:700;font-size:14px;color:var(--teal-deep);text-decoration:none;}
  .card a.link:hover{text-decoration:underline;}
  .card .pill{
    display:inline-block;font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;
    background:rgba(27,122,111,.12);color:#166157;padding:4px 10px;border-radius:999px;margin-bottom:14px;
  }
  .card .product-logo{height:28px;width:auto;display:block;margin:0 0 12px;}

  .stats-row{display:flex;flex-wrap:wrap;gap:14px;margin-top:10px;}
  .stats-row .stat{
    background:var(--paper-2);border-radius:12px;padding:18px 22px;flex:1 1 220px;
  }
  .stats-row .stat b{display:block;font-size:14px;color:var(--ink);}
  .stats-row .stat span{font-size:13px;color:var(--slate-mid);}

  /* About */
  .about-card{
    background:rgba(255,255,255,.08);backdrop-filter:blur(10px);
    border:1px solid rgba(255,255,255,.18);border-radius:20px;
    padding:40px;display:grid;grid-template-columns:auto 1fr;gap:32px;align-items:start;max-width:900px;
  }
  .about-card img{width:112px;height:112px;border-radius:50%;object-fit:cover;border:3px solid rgba(255,255,255,.5);}
  .about-card h2{font-size:clamp(26px,3.4vw,36px);}
  .about-card .about-copy{color:rgba(255,255,255,.9);}
  .about-card ul{margin:14px 0 0;padding-left:18px;color:rgba(255,255,255,.88);font-size:14px;}
  .about-card ul li{margin-bottom:6px;}
  @media (max-width:640px){ .about-card{grid-template-columns:1fr;text-align:center;} .about-card img{margin:0 auto;} }

  .proof-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-bottom:56px;}
  @media (max-width:900px){ .proof-stats{grid-template-columns:1fr;} }
  .proof-stats .tile{background:var(--paper-2);border-radius:14px;padding:28px 24px;text-align:center;}
  .proof-stats .tile .num{display:block;font-size:34px;font-weight:800;color:var(--teal-deep);margin-bottom:8px;line-height:1;}
  .proof-stats .tile p{margin:0;font-size:14px;color:var(--slate-mid);}
  .sector-list{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:20px;}
  @media (max-width:900px){ .sector-list{grid-template-columns:1fr 1fr;} }
  @media (max-width:560px){ .sector-list{grid-template-columns:1fr;} }
  .sector-list div{background:var(--paper-2);border-radius:12px;padding:16px 18px;font-size:14px;}
  .sector-list b{display:block;color:var(--ink);margin-bottom:4px;}
  .sector-list span{color:var(--slate-mid);}

  /* Quiz */
  .quiz-card{
    background:var(--white);border:1px solid var(--line);border-radius:20px;
    padding:40px;max-width:740px;margin:0 auto;box-shadow:var(--shadow);
  }
  .quiz-q{display:none;}
  .quiz-q.active{display:block;animation:fade .35s ease;}
  @keyframes fade{from{opacity:0;transform:translateY(6px);}to{opacity:1;transform:translateY(0);}}
  .quiz-progress{height:6px;background:var(--paper-2);border-radius:999px;overflow:hidden;margin-bottom:28px;}
  .quiz-progress > div{height:100%;background:var(--teal-deep);width:0;transition:width .35s ease;}
  .quiz-q p{font-size:18px;font-weight:600;color:var(--ink);margin-bottom:20px;}
  .quiz-answers{display:flex;gap:14px;}
  .quiz-answers button{
    flex:1;padding:14px;border-radius:12px;border:2px solid var(--line);background:var(--paper);
    font-weight:700;font-size:15px;cursor:pointer;transition:all .15s ease;
  }
  .quiz-answers button:hover{border-color:var(--teal-deep);color:var(--teal-deep);}
  .quiz-result{display:none;text-align:center;}
  .quiz-result.active{display:block;animation:fade .35s ease;}
  .quiz-result .score{font-size:52px;font-weight:800;color:var(--teal-deep);}
  .quiz-result .score span{font-size:22px;color:var(--slate-mid);}
  .quiz-verdict{max-width:480px;margin:14px auto 0;}
  .quiz-cta{margin-top:10px;}
  .quiz-restart{background:none;border:none;color:var(--slate-mid);font-size:13px;text-decoration:underline;cursor:pointer;margin-top:18px;}

  /* How it works */
  .steps{display:grid;grid-template-columns:repeat(4,1fr);gap:24px;counter-reset:step;}
  @media (max-width:900px){ .steps{grid-template-columns:1fr 1fr;} }
  @media (max-width:560px){ .steps{grid-template-columns:1fr;} }
  .step{position:relative;padding-top:8px;}
  .step .num{
    display:flex;align-items:center;justify-content:center;
    width:44px;height:44px;border-radius:50%;background:var(--ink);color:#fff;
    font-weight:800;font-size:16px;margin-bottom:18px;
  }

  /* FAQ */
  .faq{max-width:820px;margin:0 auto;}
  .faq details{
    background:var(--white);border:1px solid var(--line);border-radius:12px;
    padding:20px 24px;margin-bottom:12px;
  }
  .faq summary{
    font-weight:700;font-size:16px;cursor:pointer;list-style:none;
    display:flex;justify-content:space-between;align-items:center;gap:16px;
  }
  .faq summary::-webkit-details-marker{display:none;}
  .faq summary::after{content:"+";font-size:22px;color:var(--teal-deep);font-weight:400;flex:none;}
  .faq details[open] summary::after{content:"\2212";}
  .faq details p{margin-top:14px;margin-bottom:0;}

  /* Contact */
  .contact-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;}
  @media (max-width:900px){ .contact-grid{grid-template-columns:1fr;} }
  .contact-card{
    background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.2);
    border-radius:16px;padding:28px;backdrop-filter:blur(8px);
  }
  .contact-card h3{color:#fff;font-size:18px;}
  .contact-card p{color:rgba(255,255,255,.78);font-size:14px;}

  footer{background:var(--ink);color:rgba(255,255,255,.65);padding:34px 0;font-size:13px;text-align:center;}
  footer a{color:#fff;text-decoration:underline;text-underline-offset:2px;}
  footer a:hover{color:var(--teal-light);}
  footer p{margin:0 0 6px;color:rgba(255,255,255,.65);}
  footer p:last-child{margin:0;}

  .note{font-size:13px;color:var(--slate-mid);}
  .card-solo{max-width:700px;margin:0 auto;}
  #about .content{padding:110px 24px;}
  #about .about-card .btn-ghost{
    margin-top:20px;background:rgba(15,21,27,.45);border-color:rgba(255,255,255,.65);
  }
  #about .about-card .btn-ghost:hover{background:rgba(15,21,27,.65);}
  #contact .content{padding:100px 24px;}
  #contact h2{max-width:640px;}
  #contact .lede{margin-bottom:40px;}
  .contact-card .btn-outline{background:#fff;}
  .header-cta{padding:11px 20px;font-size:13px;}

  @media (prefers-reduced-motion: reduce){
    html{scroll-behavior:auto;}
    .scroll-cue .chev{animation:none;}
  }

/* Cookie / privacy notice bar (cookie-notice.js) */
.cookie-notice{
  position:fixed;left:0;right:0;bottom:0;z-index:300;
  background:var(--ink);color:#fff;
  padding:16px 20px;
  display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:14px 20px;
  box-shadow:0 -8px 30px -10px rgba(0,0,0,.4);
}
.cookie-notice p{margin:0;color:rgba(255,255,255,.88);font-size:14px;max-width:640px;line-height:1.55;}
.cookie-notice a{color:#fff;text-decoration:underline;text-underline-offset:2px;}
.cookie-notice a:hover{color:var(--teal-light);}
.cookie-notice .btn{padding:10px 20px;font-size:13px;flex:none;}
@media (max-width:640px){
  .cookie-notice{padding:14px 16px;}
  .cookie-notice p{font-size:13px;}
}

/* Simple content pages (privacy, terms, 404) */
.legal{padding:160px 0 100px;max-width:760px;}
.legal h1{font-size:clamp(30px,4vw,44px);margin-bottom:8px;}
.legal .updated{color:var(--slate-mid);font-size:14px;margin-bottom:40px;}
.legal h2{font-size:22px;margin-top:40px;}
.legal ul{padding-left:22px;margin:0 0 1em;color:var(--slate);line-height:1.7;}
.legal li{margin-bottom:6px;}
.legal a{color:var(--teal-deep);text-decoration:underline;text-underline-offset:2px;}
.not-found{min-height:80vh;display:flex;align-items:center;justify-content:center;text-align:center;padding:140px 24px 80px;}
.not-found .eyebrow{justify-content:center;}
.not-found h1{font-size:clamp(40px,7vw,72px);margin-bottom:16px;}
.not-found p{max-width:520px;margin-left:auto;margin-right:auto;font-size:17px;}
.not-found .cta-row{justify-content:center;margin-top:28px;}