*{box-sizing:border-box}
html,body{margin:0;width:100%;min-height:100%;background:#f7f5fb}
body{overflow-x:hidden;font-family:Inter,Arial,sans-serif}
.desktop-hero{width:100%;margin:0;line-height:0}
.desktop-hero>img{display:block;width:100%;height:auto;margin:0;padding:0;object-fit:contain}
.mobile-hero{display:none}
@media (min-width:1440px){.desktop-hero{max-width:1440px;margin:0 auto}}

@media (max-width:600px){
  .desktop-hero{display:none}
  .mobile-hero{
    display:block;
    min-height:100svh;
    overflow:hidden;
    background:
      radial-gradient(ellipse 125% 58% at 50% 61%,
        rgba(157,112,226,.52) 0%,
        rgba(190,154,239,.38) 30%,
        rgba(224,205,248,.24) 54%,
        rgba(247,245,251,0) 84%),
      #f7f5fb;
  }
  .mobile-header{
    height:74px;
    padding:20px 22px 0;
    display:flex;
    align-items:flex-start;
    justify-content:space-between;
  }
  .brand{
    color:#17151d;
    text-decoration:none;
    line-height:.82;
    letter-spacing:.01em;
    font-weight:650;
    font-size:19px;
  }
  .brand small{
    display:block;
    margin-top:7px;
    padding-left:1px;
    color:#7356b7;
    font-size:5px;
    font-weight:700;
    letter-spacing:.38em;
  }
  .menu{
    width:42px;height:42px;border:0;border-radius:50%;
    background:#6f50b5;padding:0;
    display:grid;place-content:center;gap:4px;
  }
  .menu span{display:block;width:17px;height:1.5px;background:#fff;border-radius:3px}
  .mobile-copy{
    position:relative;
    z-index:2;
    text-align:center;
    padding:22px 20px 0;
  }
  .mobile-copy h1{
    margin:0 auto;
    max-width:355px;
    color:#211f25;
    font-size:48px;
    line-height:1.04;
    letter-spacing:-1.45px;
    font-weight:600;
  }
  .mobile-copy h1 em{
    color:#7658bb;
    font-weight:500;
    font-style:italic;
  }
  .mobile-copy p{
    margin:22px auto 0;
    max-width: 315px;
    color:#59555f;
    font-size:12px;
    line-height:1.55;
    letter-spacing:-.05px;
  }
  .mobile-copy p strong{color:#302d34}
  .wide-mobile{display:none}
  .play-cta{
    width:166px;
    height:54px;
    margin:23px auto 0;
    padding:0 19px;
    display:flex;
    align-items:center;
    justify-content:center;
    gap:10px;
    border-radius:28px;
    background:#7454b7;
    color:#fff;
    text-decoration:none;
    box-shadow:0 10px 24px rgba(116,84,183,.16);
  }
  .play-icon{width:24px;height:27px;flex:0 0 auto}
  .play-cta span{text-align:left;line-height:1.05}
  .play-cta small{display:block;font-size:7px;font-weight:400;opacity:.86;margin-bottom:4px}
  .play-cta b{display:block;font-size:13px;font-weight:500;white-space:nowrap}
  .mobile-phones{
    position:relative;
    height:430px;
    margin-top: 72px;
    overflow:hidden;
  }
  .mobile-phones img{
    position:absolute;
    width: 900px;
    max-width:none;
    height:auto;
    left:50%;
    top:0;
    transform:translateX(-50%) translateY(-354px);
    display:block;
  }
}

@media (max-width:380px){
  .mobile-copy{padding-left:15px;padding-right:15px}
  .mobile-copy h1{font-size:31px}
  .mobile-copy p{font-size:11.5px}
  .mobile-phones img{width:840px;transform:translateX(-50%) translateY(-283px)}
  .mobile-phones{height:405px}
}

@media (max-width:600px){
  .brand { display:inline-flex; flex-direction:column; align-items:center; }
  .brand small {
    width:auto !important;
    padding:0 !important;
    margin:7px 0 0 !important;
    text-align:center !important;
    text-indent:.38em;
    left:0 !important;
  }
}

@media (max-width:600px){
  .mobile-phones{
    background:transparent !important;
    border:0 !important;
    box-shadow:none !important;
  }
}

/* Mobile v3 — clean transparent mockups, no baked-in purple frame */
@media (max-width:600px){
  .mobile-copy h1{
    max-width:390px;
    font-size:48px;
    line-height:1.07;
    font-weight:500;
    letter-spacing:-1.7px;
  }
  .mobile-copy h1 em{
    font-weight:500;
    font-style:italic;
  }
  .mobile-copy p{
    max-width:305px;
    line-height:1.6;
  }

  .mobile-phones{
    position:relative;
    width:100%;
    height:500px;
    margin-top:72px;
    overflow:hidden;
    background:transparent !important;
    border:0 !important;
    box-shadow:none !important;
    -webkit-mask-image:none !important;
    mask-image:none !important;
  }

  .mobile-phones .phone{
    position:absolute;
    display:block;
    max-width:none;
    height:auto;
    top:0;
    transform:none;
  }

  /* More pronounced mobile composition, using transparent PNGs only */
  .mobile-phones .center-phone{
    width:300px;
    left:50%;
    top:0;
    transform:translateX(-50%);
    z-index:5;
  }
  .mobile-phones .inner-left{
    width:245px;
    left:-12px;
    top:24px;
    z-index:4;
  }
  .mobile-phones .inner-right{
    width:245px;
    right:-12px;
    top:24px;
    z-index:4;
  }
  .mobile-phones .far-left{
    width:205px;
    left:-132px;
    top:68px;
    z-index:3;
  }
  .mobile-phones .far-right{
    width:205px;
    right:-132px;
    top:68px;
    z-index:3;
  }
}

@media (max-width:380px){
  .mobile-copy h1{
    font-size:44px;
    line-height:1.07;
    font-weight:500;
    letter-spacing:-1.5px;
  }
  .mobile-phones{
    height:460px;
  }
  .mobile-phones .center-phone{width:278px}
  .mobile-phones .inner-left,.mobile-phones .inner-right{width:226px}
  .mobile-phones .far-left,.mobile-phones .far-right{width:190px}
}

/* Mobile v5 — approved five-phone geometry scaled as one locked group */
@media (max-width:600px){
  .mobile-phones{
    position:relative;
    width:100%;
    height:330px;
    margin-top:50px;
    overflow:hidden;
    background:transparent !important;
    border:0 !important;
    box-shadow:none !important;
    -webkit-mask-image:none !important;
    mask-image:none !important;
  }

  .mobile-phones .phone-stage{
    position:absolute;
    width:1440px;
    height:670px;
    left:50%;
    top:0;
    transform:translateX(-50%) scale(.43);
    transform-origin:50% 0;
  }

  .mobile-phones .phone{
    position:absolute;
    display:block;
    height:auto;
    max-width:none;
    object-fit:contain;
    filter:drop-shadow(0 3px 2px rgba(30,20,40,.08));
    transform:none;
  }

  /* These are the approved desktop/Figma-relative coordinates. */
  .mobile-phones .phone.center{
    width:405px;
    left:518px;
    top:5px;
    z-index:5;
  }
  .mobile-phones .phone.inner.left{
    width:330px;
    left:200px;
    top:48px;
    z-index:3;
  }
  .mobile-phones .phone.inner.right{
    width:338px;
    left:868px;
    top:48px;
    z-index:3;
  }
  .mobile-phones .phone.outer.left{
    width:238px;
    left:-48px;
    top:122px;
    z-index:1;
  }
  .mobile-phones .phone.outer.right{
    width:205px;
    right:-28px;
    top:116px;
    z-index:1;
  }
}

@media (max-width:380px){
  .mobile-phones{
    height:300px;
    margin-top:46px;
  }
  .mobile-phones .phone-stage{
    transform:translateX(-50%) scale(.395);
  }
}

/* V6: mockup-group correction only */
@media (max-width:600px){
  .mobile-phones{
    height:320px;
    margin-top:28px;
  }
  .mobile-phones .phone-stage{
    top:0;
    transform:translateX(-50%) scale(.36);
    transform-origin:50% 0;
  }
}
@media (max-width:380px){
  .mobile-phones{
    height:295px;
    margin-top:26px;
  }
  .mobile-phones .phone-stage{
    transform:translateX(-50%) scale(.34);
  }
}

/* V8 — exact approved desktop mockup composition, transparent, scaled as ONE image */
@media (max-width:600px){
  .mobile-phones{
    position:relative;
    width:100%;
    height:44vw;
    min-height:170px;
    max-height:265px;
    margin-top:42px;
    overflow:hidden;
    background:transparent !important;
    border:0 !important;
    box-shadow:none !important;
    -webkit-mask-image:none !important;
    mask-image:none !important;
  }
  .mobile-phones .approved-phone-composition{
    position:absolute;
    display:block;
    width:100vw;
    max-width:none;
    height:auto;
    left:50%;
    top:0;
    transform:translateX(-50%);
  }
}

/* Why choose us — matched to approved Figma section */
.why-choose{
  width:100%;
  min-height:888px;
  padding:54px 7.22% 83px;
  background:
    radial-gradient(ellipse 70% 38% at 50% 100%, rgba(171,128,232,.42) 0%, rgba(215,192,247,.26) 46%, rgba(248,247,250,0) 78%),
    #f8f7fa;
  color:#302e32;
}
.why-heading{text-align:center}
.why-pill{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:174px;
  height:37px;
  padding:0 24px;
  border-radius:999px;
  background:#ece8f4;
  color:#674db0;
  font-size:16px;
  line-height:1;
  font-weight:500;
}
.why-heading>p{
  margin:23px auto 0;
  color:#4f4c51;
  font-size:16px;
  line-height:1.5;
  font-weight:400;
}
.why-grid{
  max-width:1232px;
  margin:46px auto 0;
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:16px;
}
.why-item{min-width:0}
.why-image{
  height:440px;
  overflow:hidden;
  border-radius:40px;
  background:#ddd;
}
.why-image img{
  width:100%;
  height:100%;
  display:block;
  object-fit:cover;
}
.why-item:nth-child(1) .why-image img{object-position:50% 47%}
.why-item:nth-child(2) .why-image img{object-position:50% 46%}
.why-item:nth-child(3) .why-image img{object-position:50% 48%}
.why-card{
  min-height:143px;
  margin-top:16px;
  padding:26px 20px;
  display:flex;
  align-items:center;
  gap:25px;
  border-radius:40px;
  background:#fff;
}
.why-icon{
  width:60px;
  height:60px;
  flex:0 0 60px;
  border-radius:50%;
  display:grid;
  place-items:center;
  background:#efefef;
}
.why-icon svg{
  width:27px;
  height:27px;
  fill:none;
  stroke:#29272b;
  stroke-width:1.35;
  stroke-linecap:round;
  stroke-linejoin:round;
}
.why-card h3{
  margin:0 0 17px;
  font-size:25px;
  line-height:1.05;
  font-weight:500;
  letter-spacing:-.55px;
  white-space:nowrap;
}
.why-card p{
  margin:0;
  color:#565358;
  font-size:16px;
  line-height:1.55;
  font-weight:400;
}

@media (max-width:900px){
  .why-choose{min-height:0;padding:54px 24px 70px}
  .why-grid{grid-template-columns:1fr;max-width:520px;gap:28px;margin-top:40px}
  .why-image{height:auto;aspect-ratio:1/1.08;border-radius:32px}
  .why-card{margin-top:12px;border-radius:32px}
}

@media (max-width:600px){
  .why-choose{
    padding:52px 20px 64px;
    background:radial-gradient(ellipse 100% 24% at 50% 100%, rgba(171,128,232,.34), rgba(248,247,250,0) 78%),#f8f7fa;
  }
  .why-pill{min-width:150px;height:34px;font-size:14px}
  .why-heading>p{max-width:345px;margin-top:20px;font-size:14px;line-height:1.55}
  .desktop-break{display:none}
  .why-grid{margin-top:34px;gap:26px}
  .why-image{border-radius:28px}
  .why-card{min-height:126px;padding:22px 18px;gap:18px;border-radius:28px}
  .why-icon{width:54px;height:54px;flex-basis:54px}
  .why-icon svg{width:24px;height:24px}
  .why-card h3{margin-bottom:11px;font-size:21px;white-space:normal}
  .why-card p{font-size:14px;line-height:1.5}
}

/* V10 — mobile-only refinements approved after live-device review */
@media (max-width:600px){
  /* End the hero immediately with the phone mockups: no lavender gradient tail below them. */
  .mobile-hero{
    min-height:0;
  }

  /* Keep the following section neutral on mobile instead of continuing the hero glow. */
  .why-choose{
    background:#f8f7fa;
  }

  /* More compact mobile description cards. */
  .why-card{
    min-height:104px;
    padding:16px 16px;
    gap:14px;
    border-radius:25px;
  }
  .why-icon{
    width:46px;
    height:46px;
    flex:0 0 46px;
  }
  .why-icon svg{
    width:21px;
    height:21px;
  }
  .why-card h3{
    margin-bottom:8px;
    font-size:18px;
    line-height:1.1;
    letter-spacing:-.35px;
  }
  .why-card p{
    font-size:12.5px;
    line-height:1.45;
  }
}

/* V11 — subtle lavender transition between stacked Why Choose Us cards on mobile */
@media (max-width:600px){
  .why-grid{
    gap:26px;
  }
  .why-item{
    position:relative;
  }
  .why-item:not(:last-child)::after{
    content:"";
    display:block;
    height:26px;
    margin:0 -20px -26px;
    background:linear-gradient(180deg,
      rgba(248,247,250,0) 0%,
      rgba(226,211,247,.32) 50%,
      rgba(248,247,250,0) 100%);
    pointer-events:none;
  }
}

/* V12 — mobile lavender glow underneath each white description card */
@media (max-width:600px){
  .why-item:not(:last-child)::after{display:none;content:none;}
  .why-card{position:relative;z-index:1;}
  .why-card::after{
    content:"";
    position:absolute;
    z-index:-1;
    left:8%;
    right:8%;
    bottom:-18px;
    height:34px;
    border-radius:50%;
    background:radial-gradient(ellipse at center, rgba(184,145,235,.30) 0%, rgba(211,188,242,.18) 42%, rgba(248,247,250,0) 76%);
    filter:blur(7px);
    pointer-events:none;
  }
}

/* V13 — How It Works, matched to supplied Figma */
.how-it-works{
  width:100%;
  padding:58px 6.4% 92px;
  background:#fafafa;
  color:#302e32;
}
.how-heading{text-align:center;margin-bottom:55px}
.how-pill{
  display:inline-flex;align-items:center;justify-content:center;
  min-width:135px;height:34px;padding:0 20px;border-radius:999px;
  background:#ece8f4;color:#674db0;font-size:14px;font-weight:500;
}
.how-row{
  max-width:1256px;margin:0 auto;
  display:grid;grid-template-columns:1fr 1fr;align-items:center;gap:70px;
}
.how-row+.how-row{margin-top:64px}
.how-copy{padding:0 5px}
.how-eyebrow{
  display:inline-block;margin:0 0 25px;
  color:#343136;font-size:15px;font-style:italic;font-weight:500;
  border-bottom:1px dotted #343136;line-height:1.2;
}
.how-copy h2{
  margin:0 0 12px;color:#2f2d31;font-size:31px;line-height:1.18;
  letter-spacing:-.8px;font-weight:650;
}
.how-copy h2 em{color:#7455b8;font-style:italic;font-weight:600}
.how-description{margin:0;color:#4e4b50;font-size:15px;line-height:1.45;font-weight:400}
.how-copy ul{margin:17px 0 23px;padding-left:18px;color:#555157;font-size:15px;line-height:1.85}
.how-play-cta{
  width:247px;height:67px;padding:0 30px;display:flex;align-items:center;justify-content:center;gap:15px;
  border-radius:999px;background:#7353b7;color:#fff;text-decoration:none;
}
.how-play-icon{width:29px;height:32px;flex:0 0 auto}
.how-play-cta span{text-align:left;line-height:1.05}
.how-play-cta small{display:block;font-size:10px;font-weight:400;opacity:.9;margin-bottom:5px}
.how-play-cta b{display:block;font-size:15px;font-weight:500;white-space:nowrap}
.how-visual{width:100%;line-height:0}
.how-visual img{display:block;width:100%;height:auto}
.how-creatives-row .how-visual{max-width:530px;justify-self:end}
.how-clients-row .how-visual{max-width:530px;justify-self:start}
.how-clients-row .how-copy{padding-left:8px}

@media (max-width:900px){
  .how-it-works{padding:54px 24px 72px}
  .how-row{gap:34px}
  .how-copy h2{font-size:27px}
  .how-description,.how-copy ul{font-size:14px}
  .how-desktop-break{display:none}
}

@media (max-width:600px){
  .how-it-works{padding:50px 20px 68px;background:#fafafa}
  .how-heading{margin-bottom:40px}
  .how-pill{min-width:128px;height:33px;font-size:13px}
  .how-row{display:flex;flex-direction:column;gap:28px;max-width:100%}
  .how-row+.how-row{margin-top:62px}
  .how-creatives-row .how-copy{order:1}
  .how-creatives-row .how-visual{order:2}
  .how-clients-row .how-visual{order:1}
  .how-clients-row .how-copy{order:2;padding-left:5px}
  .how-copy{width:100%;padding:0 5px}
  .how-eyebrow{margin-bottom:18px;font-size:13px}
  .how-copy h2{font-size:29px;line-height:1.16;letter-spacing:-.65px;margin-bottom:12px}
  .how-description{font-size:13px;line-height:1.55}
  .how-copy ul{margin:14px 0 20px;padding-left:17px;font-size:13px;line-height:1.75}
  .how-play-cta{width:190px;height:55px;padding:0 21px;gap:11px}
  .how-play-icon{width:24px;height:27px}
  .how-play-cta small{font-size:8px;margin-bottom:4px}
  .how-play-cta b{font-size:13px}
  .how-visual,.how-creatives-row .how-visual,.how-clients-row .how-visual{width:100%;max-width:none;justify-self:auto}
  .how-visual img{width:100%;border-radius:0}
}

/* V15 — mobile: show For Clients content before its image */
@media (max-width:600px){
  .how-clients-row .how-copy{order:1;}
  .how-clients-row .how-visual{order:2;}
}

/* V16 — About + FAQ, exact white section direction */
.how-it-works{background:#f7f7f7}
.how-description,.how-copy ul{color:#777379}
.why-heading>p,.why-card p{color:#777379}

.about-faq{
  width:100%;
  padding:58px 7% 92px;
  background:#fff;
  color:#302e32;
}
.about-heading{text-align:center;margin-bottom:74px}
.about-pill{
  display:inline-flex;align-items:center;justify-content:center;
  min-width:80px;height:34px;padding:0 20px;border-radius:999px;
  background:#f0ecf6;color:#674db0;font-size:14px;font-weight:500;
}
.about-panel{
  position:relative;max-width:1230px;height:445px;margin:0 auto;
  overflow:hidden;border-radius:34px;background:#111;
}
.about-panel>img{width:100%;height:100%;display:block;object-fit:cover}
.about-overlay{
  position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;
  padding:44px;text-align:center;color:#fff;
}
.about-overlay h2{margin:0 0 42px;font-size:30px;line-height:1.15;font-weight:650;letter-spacing:-.5px}
.about-overlay h2 em{color:#7656b8;font-style:italic;font-weight:650}
.about-overlay p{margin:0;font-size:14px;line-height:1.45;font-weight:400;color:rgba(255,255,255,.88)}
.faq{max-width:760px;margin:54px auto 0}
.faq>h3{margin:0 0 28px;text-align:center;color:#7455b8;font-size:15px;font-style:italic;font-weight:500}
.faq-list{display:flex;flex-direction:column;gap:20px}
.faq-item{margin:0}
.faq-item summary{
  position:relative;list-style:none;cursor:pointer;background:#f7f7f7;padding:16px 44px 16px 12px;
  color:#3f3c41;font-size:14px;line-height:1.35;font-weight:400;
}
.faq-item summary::-webkit-details-marker{display:none}
.faq-item summary::after{content:'+';position:absolute;right:14px;top:50%;transform:translateY(-50%);font-size:23px;font-weight:300;color:#403d42}
.faq-item[open] summary::after{content:'×';font-size:20px}
.faq-item p{margin:14px 10px 0;color:#777379;font-size:12.5px;line-height:1.6;font-weight:400}
.faq-extra{display:none}
.faq-extra.faq-extra-visible{display:block}
.faq-more{display:flex;align-items:center;gap:10px;margin:40px auto 0;border:0;background:transparent;color:#6750A4;font-size:14px;font-weight:600;cursor:pointer}

@media(max-width:600px){
  .how-it-works{background:#f7f7f7}
  .how-description,.how-copy ul,.why-heading>p,.why-card p{color:#777379}
  .about-faq{padding:50px 20px 70px;background:#fff}
  .about-heading{margin-bottom:40px}
  .about-pill{min-width:76px;height:33px;font-size:13px}
  .about-panel{height:520px;border-radius:28px}
  .about-panel>img{object-position:56% 50%}
  .about-overlay{padding:34px 22px}
  .about-overlay h2{margin-bottom:28px;font-size:25px;line-height:1.2}
  .about-overlay p{font-size:12.5px;line-height:1.55;color:rgba(255,255,255,.84)}
  .about-desktop-break{display:none}
  .faq{margin-top:46px}
  .faq>h3{margin-bottom:24px;font-size:14px}
  .faq-list{gap:14px}
  .faq-item summary{padding:15px 42px 15px 12px;font-size:13px}
  .faq-item p{margin:12px 8px 2px;font-size:12px;line-height:1.55}
  .faq-more{margin-top:30px;font-size:13px}
}

/* V19 — requested navigation, section-two gradient, contact + footer */
html{scroll-behavior:smooth;scroll-padding-top:88px}
/* Remove the per-card glow from Why Choose Us. Keep one hero-like glow at the section bottom. */
.why-card::after{display:none!important;content:none!important}
.why-choose{background:radial-gradient(ellipse 90% 25% at 50% 100%,rgba(157,112,226,.34) 0%,rgba(205,177,243,.22) 45%,rgba(248,247,250,0) 82%),#f8f7fa}

.desktop-fixed-nav{position:fixed;z-index:1000;top:18px;left:50%;transform:translateX(-50%);width:min(1320px,92vw);height:58px;display:flex;align-items:center;justify-content:space-between;padding:0 8px 0 14px;pointer-events:none}
.desktop-fixed-nav>*{pointer-events:auto}.desktop-brand{color:#17151d;text-decoration:none;font-size:21px;font-weight:650;line-height:.8;display:flex;flex-direction:column;align-items:center}.desktop-brand small{font-size:6px;color:#7356b7;letter-spacing:.34em;margin-top:7px;text-indent:.34em}.desktop-nav-links{display:flex;gap:8px;padding:5px;border-radius:999px;background:rgba(255,255,255,.94);box-shadow:0 4px 20px rgba(30,20,50,.06);backdrop-filter:blur(12px)}.desktop-nav-links a{padding:11px 18px;border-radius:999px;text-decoration:none;color:#37333c;font-size:13px}.desktop-nav-links a:first-child{background:#f0ebf8;color:#6750a4}.desktop-get-app{display:flex;align-items:center;gap:18px;background:#7353b7;color:#fff;text-decoration:none;border-radius:999px;padding:13px 20px;font-size:13px}.desktop-get-app span{font-size:18px}

.mobile-drawer{display:none}
.contact-footer{background:#f7f7f7;padding:48px 7% 0;color:#302e32}.contact-head{text-align:center}.contact-head>span{display:inline-flex;align-items:center;justify-content:center;min-width:98px;height:34px;padding:0 18px;border-radius:999px;background:#ece8f4;color:#6750a4;font-size:14px}.contact-head p{margin:24px auto 0;color:#565159;font-size:14px;line-height:1.45}.contact-form{max-width:1190px;margin:42px auto 0;display:grid;grid-template-columns:1fr 1fr;gap:20px}.contact-left,.contact-right{display:flex;flex-direction:column;gap:18px}.contact-form input,.contact-form select,.contact-form textarea{width:100%;border:0;outline:0;background:#fff;border-radius:8px;padding:0 16px;color:#403c43;font:inherit;font-size:13px}.contact-form input,.contact-form select{height:54px}.contact-form textarea{height:128px;padding-top:18px;resize:vertical}.contact-right button{height:54px;border:0;border-radius:999px;background:#7353b7;color:#fff;font-size:13px;font-weight:600;cursor:pointer;position:relative}.contact-right button span{position:absolute;right:39%;font-size:21px;font-weight:300;top:50%;transform:translateY(-52%)}
.site-footer{max-width:1190px;margin:130px auto 0;display:grid;grid-template-columns:1.45fr repeat(4,1fr);gap:42px}.footer-contact{display:flex;flex-direction:column;align-items:flex-start;gap:14px}.footer-contact>a:not(.footer-play){display:flex;align-items:center;gap:14px;text-decoration:none;color:#59555b;font-size:13px}.footer-round{width:42px;height:42px;border-radius:50%;background:#fff;display:grid;place-items:center;color:#302e32}.footer-play{width:205px;height:58px;border-radius:999px;background:#7353b7;color:#fff;text-decoration:none;display:flex;align-items:center;justify-content:center;gap:12px}.footer-play svg{width:27px;height:30px}.footer-play small{display:block;font-size:8px;margin-bottom:4px;font-weight:400}.footer-play b{font-size:13px;font-weight:500}.footer-column{display:flex;flex-direction:column;gap:14px}.footer-column h4{margin:0 0 7px;font-size:16px;font-weight:500}.footer-column a,.footer-column span{color:#777379;text-decoration:none;font-size:13px}.footer-legal a{color:#6750a4}.footer-bottom{max-width:1120px;margin:34px auto 0;border-top:1px solid #c9c6cb;padding:26px 8px 0;display:flex;justify-content:space-between;color:#777379;font-size:12px}.footer-bottom div{display:flex;align-items:center;gap:14px}.footer-bottom a{color:#6750a4;text-decoration:none}.footer-bottom i{height:18px;width:1px;background:#9d999f}.footer-wordmark{max-width:1120px;margin:95px auto 0;text-align:center;overflow:hidden}.footer-wordmark strong{display:block;font-size:clamp(170px,24vw,340px);line-height:.72;letter-spacing:-.075em;font-weight:500;color:#2d2b2d}.footer-wordmark span{display:block;margin:110px 0 65px;color:#6750a4;font-size:clamp(48px,7vw,96px);letter-spacing:.42em;text-indent:.42em;font-weight:500}

@media(max-width:600px){
  html{scroll-padding-top:74px}.desktop-fixed-nav{display:none}.mobile-header{position:fixed!important;z-index:1000;top:0;left:0;width:100%;height:70px!important;padding:15px 20px!important;align-items:center!important;background:rgba(247,245,251,.9);backdrop-filter:blur(12px)}.mobile-copy{padding-top:96px!important}
  .mobile-drawer{display:flex;position:fixed;z-index:1200;inset:0;background:#f7f5fb;padding:22px;flex-direction:column;transform:translateX(100%);transition:transform .25s ease;visibility:hidden}.mobile-drawer.open{transform:translateX(0);visibility:visible}.drawer-head{display:flex;align-items:flex-start;justify-content:space-between}.drawer-brand{text-decoration:none;color:#17151d;font-size:25px;font-weight:650;line-height:.8;display:flex;flex-direction:column;align-items:center}.drawer-brand small{font-size:7px;color:#7356b7;letter-spacing:.35em;text-indent:.35em;margin-top:8px}.drawer-close{border:0;background:#7353b7;color:#fff;width:42px;height:42px;border-radius:50%;font-size:27px;line-height:1}.drawer-links{display:flex;flex-direction:column;margin-top:58px}.drawer-links a{text-decoration:none;color:#302e32;font-size:28px;font-weight:500;padding:13px 0;border-bottom:1px solid #e4e0e8}.drawer-info{margin-top:auto;padding-top:28px}.drawer-info p{color:#777379;font-size:13px;line-height:1.55;margin:0 0 18px}.drawer-info a{display:block;color:#6750a4;text-decoration:none;font-size:13px;margin:8px 0}.drawer-legal{display:flex;flex-wrap:wrap;gap:9px 15px;margin-top:24px;padding-top:18px;border-top:1px solid #ded9e3}.drawer-legal a{color:#777379;text-decoration:none;font-size:11px}.drawer-open{overflow:hidden}
  .why-choose{background:radial-gradient(ellipse 125% 16% at 50% 100%,rgba(157,112,226,.38) 0%,rgba(205,177,243,.22) 46%,rgba(248,247,250,0) 82%),#f8f7fa!important}
  .contact-footer{padding:48px 20px 0}.contact-head p{font-size:13px;max-width:340px}.contact-desktop-break{display:none}.contact-form{grid-template-columns:1fr;margin-top:32px;gap:14px}.contact-left,.contact-right{gap:14px}.contact-form textarea{height:120px}.contact-right button span{right:28%}.site-footer{margin-top:70px;grid-template-columns:1fr 1fr;gap:38px 26px}.footer-contact{grid-column:1/-1}.footer-column h4{font-size:15px}.footer-column a,.footer-column span{font-size:12px}.footer-bottom{margin-top:40px;padding-top:22px;flex-direction:column;gap:16px}.footer-bottom div{flex-wrap:wrap}.footer-wordmark{margin-top:70px}.footer-wordmark strong{font-size:32vw}.footer-wordmark span{font-size:10vw;margin:65px 0 48px;letter-spacing:.3em;text-indent:.3em}
}

/* V20 — reference corrections */
@media(min-width:601px){
  .desktop-fixed-nav{opacity:0;visibility:hidden;transition:opacity .18s ease,visibility .18s ease}
  .desktop-fixed-nav.nav-visible{opacity:1;visibility:visible}
}
.chevron{display:inline-flex!important;position:static!important;transform:none!important;font-size:inherit!important}
.chevron svg{width:18px;height:18px;display:block}
.contact-right button{display:flex;align-items:center;justify-content:center;gap:8px}
.footer-round svg{width:19px;height:19px;display:block}
.contact-footer{position:relative;overflow:hidden;background:linear-gradient(to bottom,#f7f7f7 0%,#f7f7f7 67%,#f4f0fb 84%,#eee7fa 100%)}
.site-footer,.footer-bottom,.footer-wordmark{position:relative;z-index:1}
.footer-wordmark{max-width:1190px;margin-top:92px;padding-bottom:52px}
.footer-wordmark strong{font-family:Arial,Helvetica,sans-serif;font-weight:500;font-size:clamp(180px,23vw,320px);line-height:.76;letter-spacing:-.085em}
.footer-wordmark span{margin:105px 0 18px;font-size:clamp(48px,6.8vw,92px);letter-spacing:.39em;text-indent:.39em}
@media(max-width:600px){
  .contact-footer{background:linear-gradient(to bottom,#f7f7f7 0%,#f7f7f7 72%,#f4f0fb 87%,#eee7fa 100%)}
  .footer-wordmark{padding-bottom:34px}
}

/* V21: use the floating desktop navigation as the actual top navigation from page load. */
@media (min-width:601px){
  .desktop-hero{position:relative}
  .desktop-hero::before{
    content:"";
    position:absolute;
    z-index:20;
    top:0;
    left:0;
    right:0;
    height:105px;
    pointer-events:none;
    background:linear-gradient(90deg,#f7f7f7 0%,#f5f3f7 24%,#f0eafa 50%,#f5f3f7 76%,#f7f7f7 100%);
  }
  .desktop-fixed-nav{
    opacity:1!important;
    visibility:visible!important;
  }
}


/* V22 — exact header logo, active floating-nav pill, select spacing, Figma footer treatment */
@media (min-width:601px){
  .desktop-brand{width:115px;height:54px;display:flex;align-items:center;justify-content:flex-start;overflow:hidden}
  .desktop-brand img{display:block;width:115px;height:54px;object-fit:cover;object-position:center}
  .desktop-nav-links a:first-child{background:transparent;color:#37333c}
  .desktop-nav-links a.active{background:#f0ebf8;color:#6750a4}
}
.contact-form select{
  -webkit-appearance:none;appearance:none;
  padding-right:54px;
  background-color:#fff;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20'%3E%3Cpath d='M6 8l4 4 4-4' fill='none' stroke='%23403c43' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat;
  background-position:right 24px center;
  background-size:18px 18px;
}
.contact-footer{
  background:
    radial-gradient(ellipse 105% 27% at 50% 100%,rgba(166,121,229,.32) 0%,rgba(207,181,242,.20) 47%,rgba(247,247,247,0) 78%),
    #f7f7f7!important;
}
.footer-wordmark{max-width:none;width:100%;overflow:hidden;margin-top:105px;padding:0 3.2% 65px}
.footer-wordmark strong{display:block;width:100%;font-family:Arial,Helvetica,sans-serif;font-size:clamp(190px,26.8vw,390px);font-weight:500;line-height:.70;letter-spacing:-.095em;transform:scaleX(1.18);transform-origin:center;color:#2d2b2d;white-space:nowrap}
.footer-wordmark span{display:block;margin:125px 0 5px;font-size:clamp(50px,7.4vw,106px);letter-spacing:.48em;text-indent:.48em;transform:scaleX(1.08);transform-origin:center;color:#6750a4;white-space:nowrap}
@media(max-width:600px){
  .contact-form select{background-position:right 20px center;padding-right:48px}
  .contact-footer{background:radial-gradient(ellipse 145% 19% at 50% 100%,rgba(166,121,229,.34) 0%,rgba(207,181,242,.20) 48%,rgba(247,247,247,0) 80%),#f7f7f7!important}
  .footer-wordmark{padding-left:2%;padding-right:2%;padding-bottom:42px}
  .footer-wordmark strong{font-size:35vw;transform:scaleX(1.16)}
  .footer-wordmark span{font-size:10.5vw;margin-top:72px;letter-spacing:.38em;text-indent:.38em;transform:scaleX(1.05)}
}

/* V23 — preserve approved hero/nav surface and correct logo/footer clipping */
@media (min-width:601px){
  .desktop-hero::before{background:#f7f7f7!important;}
  .desktop-brand{width:150px;height:80px;overflow:visible;justify-content:flex-start;}
  .desktop-brand img{width:150px;height:80px;object-fit:contain;object-position:center;}
}
.footer-wordmark{overflow:visible!important;padding-left:5.5%!important;padding-right:5.5%!important;box-sizing:border-box;}
.footer-wordmark strong{font-size:clamp(170px,24.5vw,350px)!important;transform:scaleX(1.10)!important;line-height:.76!important;}

/* V24 — hero source-of-truth: exact supplied background + logo pixels */
html,body{background:#f7f5fb!important;}
@media (min-width:601px){
  .desktop-hero::before{background:#f7f5fb!important;}
  .desktop-brand{width:130px;height:60px;overflow:visible;}
  .desktop-brand img{content:url('assets/hero-logo-source.webp');width:130px;height:60px;object-fit:contain;object-position:left center;}
}
@media (max-width:600px){
  .mobile-header{background:#f7f5fb!important;backdrop-filter:none!important;}
  .brand{width:112px;height:52px;font-size:0;line-height:0;background:url('assets/hero-logo-source.webp') left center/contain no-repeat;}
  .brand span,.brand small{display:none!important;}
}

/* V25 — preserve the supplied approved hero exactly. No masking/rebuilt hero background. */
@media (min-width:601px){
  .desktop-hero::before{display:none!important;content:none!important}
  .desktop-hero{background:#f7f5fb!important}
  .desktop-fixed-nav{background:transparent!important}
  /* The approved hero itself remains the source of the brand mark at the top. */
  .desktop-brand{visibility:hidden!important;pointer-events:none!important}
}

/* V26 — replace only the approved hero's centre navigation.
   Keep the hero's original logo and Get the app button untouched. */
@media (min-width:601px){
  .desktop-fixed-nav{
    top:55px!important;
    width:100%!important;
    height:58px!important;
    padding:0!important;
    justify-content:center!important;
    pointer-events:none!important;
  }
  .desktop-brand,.desktop-get-app{display:none!important;}
  .desktop-nav-links{
    pointer-events:auto!important;
    position:relative!important;
    left:auto!important;
    transform:none!important;
    margin:0 auto!important;
  }
}

/* V28 — mobile logo consistency + keep full footer wordmark inside viewport */
@media (max-width:600px){
  /* Closed mobile header uses the exact same text-logo treatment as the open drawer. */
  .mobile-header .brand{
    width:auto!important;
    height:auto!important;
    background:none!important;
    font-size:25px!important;
    line-height:.8!important;
    font-weight:650!important;
    display:flex!important;
    flex-direction:column!important;
    align-items:center!important;
    color:#17151d!important;
    letter-spacing:0!important;
  }
  .mobile-header .brand span{display:block!important;}
  .mobile-header .brand small{
    display:block!important;
    margin-top:8px!important;
    padding-left:0!important;
    color:#7356b7!important;
    font-size:7px!important;
    font-weight:700!important;
    letter-spacing:.35em!important;
    text-indent:.35em!important;
  }

  /* Mobile footer wordmark: preserve the stretched look without cropping either edge. */
  .footer-wordmark{
    width:100%!important;
    max-width:100%!important;
    overflow:hidden!important;
    padding-left:20px!important;
    padding-right:20px!important;
  }
  .footer-wordmark strong{
    width:100%!important;
    font-size:29vw!important;
    letter-spacing:-.075em!important;
    transform:scaleX(1.02)!important;
    transform-origin:center!important;
    text-align:center!important;
  }
  .footer-wordmark span{
    width:100%!important;
    font-size:9vw!important;
    letter-spacing:.30em!important;
    text-indent:.30em!important;
    transform:none!important;
    text-align:center!important;
    white-space:nowrap!important;
  }
}


/* V29 — desktop brand matches the approved mobile/drawer text logo. */
@media (min-width:601px){
  /* Cover only the logo baked into the hero artwork; leave Get the app untouched. */
  .desktop-hero::after{
    content:""!important;display:block!important;position:absolute!important;
    top:28px!important;left:20px!important;width:155px!important;height:86px!important;
    background:#f7f5fb!important;z-index:2!important;pointer-events:none!important;
  }
  .desktop-fixed-nav{z-index:20!important;}
  .desktop-brand{
    display:flex!important;visibility:visible!important;pointer-events:auto!important;
    position:fixed!important;left:31px!important;top:48px!important;
    width:auto!important;height:auto!important;overflow:visible!important;
    flex-direction:column!important;align-items:center!important;justify-content:flex-start!important;
    color:#17151d!important;text-decoration:none!important;font-size:25px!important;
    line-height:.8!important;font-weight:650!important;letter-spacing:0!important;
    z-index:21!important;
  }
  .desktop-brand span{display:block!important;}
  .desktop-brand small{
    display:block!important;margin-top:8px!important;padding-left:0!important;
    color:#7356b7!important;font-size:7px!important;font-weight:700!important;
    letter-spacing:.35em!important;text-indent:.35em!important;
  }
}

/* V31 — verified clean desktop header. Old baked logo/nav are removed from the hero pixels. */
@media (min-width:601px){
  .desktop-hero::before,.desktop-hero::after{display:none!important;content:none!important;}
  .desktop-hero{background:#f7f5fb!important;}
  .desktop-fixed-nav{
    top:55px!important;width:100%!important;height:58px!important;padding:0!important;
    justify-content:center!important;background:transparent!important;pointer-events:none!important;
  }
  .desktop-nav-links{pointer-events:auto!important;margin:0 auto!important;}
  .desktop-get-app{display:none!important;}
  .desktop-brand{
    display:flex!important;visibility:visible!important;pointer-events:auto!important;
    position:fixed!important;left:44px!important;top:55px!important;
    width:120px!important;height:58px!important;overflow:visible!important;
    flex-direction:column!important;align-items:center!important;justify-content:center!important;
    color:#17151d!important;text-decoration:none!important;font-size:25px!important;
    line-height:.8!important;font-weight:650!important;letter-spacing:0!important;z-index:21!important;
  }
  .desktop-brand span{display:block!important;}
  .desktop-brand small{
    display:block!important;margin-top:8px!important;padding-left:0!important;color:#7356b7!important;
    font-size:7px!important;font-weight:700!important;letter-spacing:.35em!important;text-indent:.35em!important;
  }
}

/* V32 — final desktop header alignment: logo and floating nav share one fixed row. */
@media (min-width:601px){
  .desktop-fixed-nav{
    top:55px!important;
    height:58px!important;
    align-items:center!important;
  }
  .desktop-brand{
    position:absolute!important;
    left:44px!important;
    top:0!important;
    bottom:auto!important;
    height:58px!important;
    margin:0!important;
    transform:none!important;
    justify-content:center!important;
  }
  .desktop-nav-links{
    align-self:center!important;
    margin:0 auto!important;
  }
}

/* V36 — production readability + wide desktop hero */
@media (min-width:601px){
  /* Allow the approved hero artwork/background to fill wide desktop viewports. */
  .desktop-hero{max-width:none!important;width:100%!important;margin:0!important;overflow:hidden!important;background:#f7f5fb!important;}
  .desktop-hero>img{width:100%!important;max-width:none!important;height:auto!important;object-fit:contain!important;}

  /* Body/supporting copy: 16px desktop minimum for the requested text groups. */
  .why-heading>p,.why-card p,
  .how-description,.how-copy ul,
  .about-overlay p,.faq-item p,
  .contact-head p,
  .footer-contact>a:not(.footer-play),
  .footer-column a,.footer-column span,
  .footer-bottom{font-size:16px!important;}
}

@media (max-width:600px){
  /* Body/supporting copy: 14px mobile minimum for the requested text groups. */
  .why-heading>p,.why-card p,
  .how-description,.how-copy ul,
  .about-overlay p,.faq-item p,
  .contact-head p,
  .footer-contact>a:not(.footer-play),
  .footer-column a,.footer-column span,
  .footer-bottom,
  .drawer-info p,.drawer-info a,.drawer-legal a{font-size:14px!important;}
}

/* V37 — requested typography refinements */
@media (min-width:601px){
  .how-description{font-size:20px!important;line-height:1.5!important;}
  .why-heading>p{font-size:20px!important;line-height:1.5!important;}
  .contact-head p{font-size:20px!important;line-height:1.5!important;}
  .faq-item summary{font-size:16px!important;}
}
@media (max-width:600px){
  .mobile-copy p{font-size:16px!important;line-height:1.5!important;max-width:350px!important;}
  .how-description{font-size:16px!important;line-height:1.55!important;}
  .about-overlay p{font-size:16px!important;line-height:1.55!important;}
  .faq-item summary{font-size:16px!important;}
  .why-heading>p{font-size:16px!important;line-height:1.55!important;}
  .contact-head p{font-size:16px!important;line-height:1.5!important;}
  .footer-bottom{font-size:14px!important;}
}

/* V38 — wide-screen How It Works alignment + 20px desktop hero supporting copy */
@media (min-width:901px){
  .how-it-works{padding-left:clamp(48px,6vw,110px);padding-right:clamp(48px,6vw,110px);}
  .how-row{
    width:100%;
    max-width:1440px;
    grid-template-columns:minmax(0,1fr) minmax(0,1.08fr);
    gap:clamp(44px,5vw,90px);
  }
  .how-copy{padding:0!important;max-width:650px;}
  .how-description{max-width:650px;}
  .how-desktop-break{display:none!important;}
  .how-visual,.how-creatives-row .how-visual,.how-clients-row .how-visual{
    width:100%;max-width:650px;
  }
  .how-creatives-row .how-visual{justify-self:end;}
  .how-clients-row .how-visual{justify-self:start;}
  .how-clients-row{grid-template-columns:minmax(0,1.08fr) minmax(0,1fr);}
  .how-clients-row .how-copy{justify-self:end;width:100%;}
}
@media (min-width:1600px){
  .how-row{max-width:1500px;gap:100px;}
  .how-visual,.how-creatives-row .how-visual,.how-clients-row .how-visual{max-width:700px;}
  .how-copy,.how-description{max-width:690px;}
}

/* V39 — button and pill typography requested */
@media (min-width:601px){
  .desktop-get-app{font-size:16px!important;}
}
.how-play-cta b{font-size:16px!important;}
.how-play-cta small{font-size:12px!important;}
.contact-right button{font-size:16px!important;}
.faq-more{font-size:14px!important;}
.why-pill,.how-pill,.about-pill,.contact-head>span{font-size:16px!important;}
@media (max-width:600px){
  .how-play-cta b{font-size:16px!important;}
  .how-play-cta small{font-size:12px!important;}
  .contact-right button{font-size:16px!important;}
  .faq-more{font-size:14px!important;}
  .why-pill,.how-pill,.about-pill,.contact-head>span{font-size:16px!important;}
}


/* V40 — mobile drawer scroll lock + How It Works CTA after image */
.mobile-how-cta{display:none;}
@media(max-width:600px){
  .mobile-drawer{overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;}
  body.drawer-open{overflow:hidden;touch-action:none;}
  .mobile-drawer.open{touch-action:pan-y;}

  .how-copy > .how-play-cta{display:none!important;}
  .how-row > .mobile-how-cta{display:flex!important;order:3;margin-top:-8px;align-self:flex-start;}
  .how-creatives-row .how-copy,.how-clients-row .how-copy{order:1;}
  .how-creatives-row .how-visual,.how-clients-row .how-visual{order:2;}
}

/* V41 — keep Google Play CTA typography consistent everywhere */
.play-cta b,
.footer-play b { font-size:16px !important; }
.play-cta small,
.footer-play small { font-size:12px !important; }

@media (max-width:600px){
  .play-cta b,
  .footer-play b { font-size:16px !important; }
  .play-cta small,
  .footer-play small { font-size:12px !important; }
}

/* V42 — mobile hero Google Play CTA width matches How It Works CTA */
@media (max-width:600px){
  .play-cta{
    width:190px;
    height:55px;
    padding:0 21px;
    gap:11px;
  }
}


/* V56 draft — use the full Resources-style floating navigation on Home too. */
@media (min-width:601px){
  .desktop-fixed-nav{
    top:18px!important;left:50%!important;right:auto!important;transform:translateX(-50%)!important;
    width:min(1320px,92vw)!important;height:58px!important;padding:0 8px 0 14px!important;
    justify-content:space-between!important;align-items:center!important;pointer-events:none!important;
  }
  .desktop-fixed-nav>*{pointer-events:auto!important}
  .desktop-brand{
    display:flex!important;visibility:visible!important;pointer-events:auto!important;position:static!important;
    left:auto!important;top:auto!important;width:auto!important;height:auto!important;overflow:visible!important;
    flex-direction:column!important;align-items:center!important;justify-content:center!important;
    color:#17151d!important;text-decoration:none!important;font-size:21px!important;font-weight:650!important;line-height:.8!important;
  }
  .desktop-brand small{font-size:6px!important;color:#7356b7!important;letter-spacing:.34em!important;margin-top:7px!important;text-indent:.34em!important}
  .desktop-nav-links{position:static!important;left:auto!important;transform:none!important;margin:0!important}
  .desktop-get-app{display:flex!important;visibility:visible!important;pointer-events:auto!important}
}