:root{
      --accent:#00B4FF;
      --accent-dark:#008fd4;
      --ink:#0b1728;
      --muted:#667085;
      --border:#e6edf5;
      --soft:#f7fbff;
      --max:1180px;
      --shadow:0 24px 60px rgba(15,23,42,.13);
      --shadow-soft:0 12px 32px rgba(15,23,42,.08);
    }

    *{box-sizing:border-box}
    html{scroll-behavior:smooth}
    body{
      margin:0;
      overflow-x:hidden;
      /* Inherit the original font stack from site.css. */
      color:var(--ink);
      background:#fff;
      line-height:1.55;
    }

    .lexi-site a{color:inherit;text-decoration:none}
    img{display:block;max-width:100%}
    .lexi-container{width:min(calc(100% - 40px),var(--max));margin-inline:auto}

    /* ---------- Header ---------- */

    .site-header{
      position:sticky;
      top:0;
      z-index:100;
      background:rgba(255,255,255,.88);
      backdrop-filter:blur(18px);
      -webkit-backdrop-filter:blur(18px);
      border-bottom:1px solid rgba(230,237,245,.9);
    }

    .header-inner{
      height:72px;
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:28px;
    }

    .brand{
      display:flex;
      align-items:center;
      gap:11px;
      min-width:max-content;
      font-weight:800;
      letter-spacing:normal;
    }

    .brand-mark{
      width:38px;
      height:38px;
      border-radius:10px;
      display:grid;
      place-items:center;
      color:white;
      font-size:21px;
      background:linear-gradient(135deg,#27c5ff,#7368ff);
      box-shadow:0 8px 22px rgba(0,180,255,.20);
    }

    .brand-copy{line-height:1.05}
    .brand-copy small{
      display:block;
      margin-top:4px;
      color:#778196;
      font-size:11px;
      font-weight:600;
      letter-spacing:0;
    }

    .lexi-nav{
      display:flex;
      align-items:center;
      gap:30px;
      font-size:14px;
      font-weight:650;
    }

    .lexi-nav a:not(.lexi-nav-cta):hover{color:var(--accent-dark)}

    .lexi-nav-cta{
      color:white;
      background:linear-gradient(135deg,#13bfff,#1195f7);
      padding:11px 17px;
      border-radius:10px;
      box-shadow:0 8px 22px rgba(0,180,255,.22);
    }

    /* ---------- Hero ---------- */

    .hero{
      position:relative;
      isolation:isolate;
      overflow:hidden;
      padding:82px 0 72px;
      background:
        radial-gradient(circle at 80% 16%,rgba(0,180,255,.16),transparent 28%),
        radial-gradient(circle at 57% -12%,rgba(111,107,255,.15),transparent 29%),
        linear-gradient(180deg,#fbfdff 0%,#f8fcff 72%,#fff 100%);
    }

    .hero:before{
      content:"";
      position:absolute;
      z-index:-1;
      width:680px;
      height:680px;
      right:-250px;
      top:-210px;
      border-radius:50%;
      background:linear-gradient(145deg,rgba(119,110,255,.11),rgba(0,180,255,.13));
    }

    .hero-grid{
      display:grid;
      grid-template-columns:minmax(0,1.05fr) minmax(430px,.95fr);
      gap:54px;
      align-items:center;
    }

    .eyebrow{
      display:inline-flex;
      gap:8px;
      align-items:center;
      margin-bottom:22px;
      padding:7px 12px;
      border-radius:999px;
      color:#078cc8;
      background:#e8f8ff;
      font-size:12px;
      font-weight:800;
      text-transform:uppercase;
      letter-spacing:.06em;
    }

    .lexi-home h1{
      margin:0;
      max-width:700px;
      font-size:clamp(48px,5.6vw,76px);
      line-height:.99;
      letter-spacing:normal;
    }

    .hero-lead{
      max-width:650px;
      margin:25px 0 28px;
      color:var(--muted);
      font-size:20px;
      line-height:1.55;
    }

    .store-badge{
      display:inline-flex;
      align-items:center;
      gap:10px;
      padding:9px 15px 10px;
      color:white;
      background:#050505;
      border-radius:10px;
      box-shadow:var(--shadow-soft);
    }

    .store-badge .apple{
      font-size:31px;
      line-height:1;
    }

    .store-badge small{
      display:block;
      font-size:10px;
      opacity:.82;
      line-height:1.05;
    }

    .store-badge strong{
      display:block;
      margin-top:2px;
      font-size:19px;
      font-weight:650;
      line-height:1;
    }

    .hero-benefits{
      display:flex;
      flex-wrap:wrap;
      gap:15px 25px;
      margin-top:30px;
      color:#526175;
      font-size:14px;
      font-weight:650;
    }

    .hero-benefits span{
      display:flex;
      align-items:center;
      gap:8px;
    }

    .hero-benefits span:before{
      content:"✓";
      width:18px;
      height:18px;
      display:grid;
      place-items:center;
      color:white;
      background:var(--accent);
      border-radius:50%;
      font-size:11px;
      font-weight:900;
    }

    /*
      The note is part of the layout, not absolutely positioned against
      the viewport. This prevents overlap on intermediate browser widths.
    */
    .hero-visual{
      min-width:0;
      display:grid;
      grid-template-columns:minmax(270px,330px) 145px;
      align-items:center;
      justify-content:center;
      gap:24px;
    }

    .hero-phone-area{
      position:relative;
      display:grid;
      place-items:center;
      min-height:540px;
    }

    .hero-phone-area:before{
      content:"";
      position:absolute;
      width:430px;
      height:430px;
      max-width:125%;
      border-radius:31% 69% 63% 37% / 58% 32% 68% 42%;
      background:linear-gradient(145deg,rgba(13,179,255,.19),rgba(114,101,255,.12));
      transform:rotate(-8deg);
    }

    .hand-note{
      position:relative;
      z-index:3;
      width:140px;
      color:#145179;
      font-family:"Bradley Hand","Comic Sans MS",cursive;
      font-size:20px;
      line-height:1.28;
      font-weight:700;
      transform:rotate(-7deg);
    }

    .hand-note:after{
      content:"↙";
      display:block;
      margin-top:8px;
      margin-left:20px;
      font-size:42px;
      font-weight:400;
    }

    /* ---------- Phone mockups ---------- */

    .phone-shell{
      position:relative;
      z-index:2;
      width:280px;
      aspect-ratio:9 / 18.85;
      padding:9px;
      border-radius:44px;
      background:#0b0b0d;
      box-shadow:0 25px 50px rgba(15,23,42,.24);
    }

    .hero-phone-area .phone-shell{width:305px}

    .phone-shell:before{
      content:"";
      position:absolute;
      z-index:5;
      top:14px;
      left:50%;
      width:88px;
      height:23px;
      transform:translateX(-50%);
      border-radius:999px;
      background:#09090b;
    }

    .phone-screen{
      position:relative;
      width:100%;
      height:100%;
      overflow:hidden;
      border-radius:36px;
      background:#fff;
    }

    .phone-screen img,
    .phone-screen .hero-demo{
      width:100%;
      height:100%;
      object-fit:cover;
      object-position:top;
    }

    .phone-screen .hero-demo{
      display:block;
    }

    .hero-demo-toggle{
      position:absolute;
      inset:0;
      display:grid;
      place-items:center;
      width:100%;
      height:100%;
      padding:0;
      border:0;
      border-radius:inherit;
      background:transparent;
      cursor:pointer;
    }

    .hero-demo-toggle[hidden]{display:none}

    .hero-demo-icon{
      display:grid;
      place-items:center;
      width:70px;
      height:70px;
      border:3px solid white;
      border-radius:50%;
      background:rgba(0,0,0,.65);
      box-shadow:0 3px 15px rgba(0,0,0,.25);
    }

    .hero-demo-icon:before{
      content:"";
      width:0;
      height:0;
      margin-left:5px;
      border-top:13px solid transparent;
      border-bottom:13px solid transparent;
      border-left:20px solid white;
    }

    .hero-demo-toggle.is-playing .hero-demo-icon:before{
      width:19px;
      height:25px;
      margin-left:0;
      border:0;
      border-left:6px solid white;
      border-right:6px solid white;
    }

    .hero-demo-toggle.is-playing .hero-demo-icon{opacity:0}
    .hero-demo-toggle.is-playing:hover .hero-demo-icon,
    .hero-demo-toggle.is-playing:focus-visible .hero-demo-icon{opacity:1}

    /* ---------- Section intro ---------- */

    .lexi-home section{padding:88px 0}

    .kicker{
      margin-bottom:8px;
      text-align:center;
      color:#8390a4;
      font-size:11px;
      font-weight:800;
      letter-spacing:.16em;
      text-transform:uppercase;
    }

    .section-title{
      margin:0;
      text-align:center;
      font-size:clamp(35px,4vw,51px);
      line-height:1.06;
      letter-spacing:normal;
    }

    .section-lead{
      max-width:720px;
      margin:15px auto 58px;
      text-align:center;
      color:var(--muted);
      font-size:18px;
    }

    /* ---------- Main features ---------- */

    .feature-list{
      display:flex;
      flex-direction:column;
      gap:38px;
    }

    .feature-row{
      display:grid;
      grid-template-columns:minmax(0,1fr) minmax(0,1fr);
      gap:88px;
      align-items:center;
      min-height:560px;
    }

    /* IMPORTANT:
       Row 1: text left / phone right
       Row 2: phone left / text right
       Row 3: text left / phone right
       No CSS order override on desktop.
    */

    .feature-copy{
      max-width:520px;
    }

    .feature-row:nth-child(odd) .feature-copy{justify-self:start}
    .feature-row:nth-child(even) .feature-copy{justify-self:end}

    .feature-icon{
      width:52px;
      height:52px;
      display:grid;
      place-items:center;
      margin-bottom:19px;
      border-radius:16px;
      font-size:25px;
    }

    .feature-icon.blue{color:#159fe8;background:#eaf7ff}
    .feature-icon.purple{color:#775fe2;background:#f2edff}
    .feature-icon.green{color:#27a855;background:#eaf8ee}

    .feature-copy h3{
      margin:0 0 15px;
      font-size:30px;
      line-height:1.14;
      letter-spacing:normal;
    }

    .feature-copy p{
      margin:0;
      color:var(--muted);
      font-size:16px;
      line-height:1.65;
    }

    .sources{
      margin:17px 0 0;
      padding-left:18px;
      color:#667085;
      font-size:13px;
    }

    .sources a{
      color:#078dcc;
      text-decoration:underline;
      text-underline-offset:2px;
    }

    .feature-visual{
      position:relative;
      min-height:540px;
      display:grid;
      place-items:center;
    }

    .feature-visual:before{
      content:"";
      position:absolute;
      width:440px;
      height:350px;
      max-width:95%;
      border-radius:27% 73% 41% 59% / 64% 31% 69% 36%;
      transform:rotate(-8deg);
      background:var(--blob,#eaf7ff);
    }

    .feature-row:nth-child(1) .feature-visual{--blob:#eaf7ff}
    .feature-row:nth-child(2) .feature-visual{--blob:#f1edff}
    .feature-row:nth-child(3) .feature-visual{--blob:#eaf8ef}

    /* ---------- Extra features ---------- */

    .extras{
      padding-top:48px;
    }

    .extras-panel{
      padding:42px;
      border:1px solid #e5f0f8;
      border-radius:28px;
      background:linear-gradient(135deg,#f0f9ff,#f7fbff);
    }

    .extras-title{
      margin:0 0 30px;
      text-align:center;
      font-size:34px;
      letter-spacing:normal;
    }

    .extras-grid{
      display:grid;
      grid-template-columns:repeat(3,minmax(0,1fr));
      gap:18px;
    }

    .extra-card{
      min-height:185px;
      overflow:hidden;
      display:grid;
      grid-template-columns:76px 1fr;
      align-items:center;
      gap:18px;
      padding:22px;
      border:1px solid #e5ebf2;
      border-radius:17px;
      background:white;
      box-shadow:0 7px 22px rgba(15,23,42,.045);
      transition:transform .2s ease,box-shadow .2s ease;
    }

    .extra-card:hover{
      transform:translateY(-3px);
      box-shadow:var(--shadow-soft);
    }

    .extra-thumb{
      width:76px;
      height:76px;
      overflow:hidden;
      display:grid;
      place-items:center;
      border-radius:14px;
      background:#f5f8fb;
    }

    .extra-thumb img{
      width:100%;
      height:100%;
      object-fit:cover;
    }

    .extra-icon{
      font-size:29px;
    }

    .extra-card h4{
      margin:0 0 6px;
      font-size:16px;
      line-height:1.25;
    }

    .extra-card p{
      margin:0;
      color:var(--muted);
      font-size:13px;
      line-height:1.45;
    }

    /* ---------- Blog ---------- */

    .blog-.lexi-home section{padding-top:86px}

    .blog-head{
      display:flex;
      align-items:flex-end;
      justify-content:space-between;
      gap:30px;
      margin-bottom:30px;
    }

    .blog-head .kicker,
    .blog-head .section-title,
    .blog-head .section-lead{
      text-align:left;
      margin-left:0;
    }

    .blog-head .section-lead{
      margin-bottom:0;
    }

    .view-all{
      margin-bottom:7px;
      color:var(--accent-dark);
      font-size:14px;
      font-weight:750;
      white-space:nowrap;
    }

    .blog-grid{
      display:grid;
      grid-template-columns:repeat(3,minmax(0,1fr));
      gap:22px;
    }

    .post{
      overflow:hidden;
      border:1px solid #e3eaf2;
      border-radius:18px;
      background:white;
      box-shadow:0 8px 22px rgba(15,23,42,.05);
      transition:transform .2s ease,box-shadow .2s ease;
    }

    .post:hover{
      transform:translateY(-4px);
      box-shadow:var(--shadow-soft);
    }

    .post img{
      width:100%;
      height:185px;
      object-fit:cover;
    }

    .post-body{padding:20px}
    .post h3{
      margin:0 0 10px;
      font-size:19px;
      line-height:1.22;
      letter-spacing:normal;
    }

    .post p{
      margin:0 0 16px;
      color:var(--muted);
      font-size:14px;
    }

    .post-link{
      color:var(--accent-dark);
      font-size:14px;
      font-weight:750;
    }

    /* ---------- CTA ---------- */

    .download{
      padding:34px 0 72px;
    }

    .download-box{
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:35px;
      padding:34px 40px;
      color:white;
      border-radius:25px;
      background:linear-gradient(120deg,#30c6dd,#0789ff);
      box-shadow:0 18px 40px rgba(0,153,255,.20);
    }

    .download-box h2{
      margin:0 0 5px;
      font-size:34px;
      line-height:1.1;
      letter-spacing:normal;
    }

    .download-box p{margin:0;opacity:.92}

    /* ---------- Footer ---------- */

    .site-footer{
      padding:30px 0 38px;
      color:#667085;
      border-top:1px solid var(--border);
      font-size:13px;
    }

    .footer-top{
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:24px;
    }

    .footer-links{
      display:flex;
      flex-wrap:wrap;
      justify-content:flex-end;
      gap:18px;
    }

    .footer-bottom{
      display:flex;
      justify-content:space-between;
      gap:20px;
      margin-top:24px;
      padding-top:20px;
      border-top:1px solid #edf1f5;
    }



    .extras-grid .reveal:nth-child(2),
    .blog-grid .reveal:nth-child(2){--reveal-delay:70ms}
    .extras-grid .reveal:nth-child(3),
    .blog-grid .reveal:nth-child(3){--reveal-delay:140ms}
    .extras-grid .reveal:nth-child(4){--reveal-delay:0ms}
    .extras-grid .reveal:nth-child(5){--reveal-delay:70ms}
    .extras-grid .reveal:nth-child(6){--reveal-delay:140ms}

    /* ---------- Motion ---------- */

    /* Scroll-reveal elements remain readable if JavaScript is unavailable.
       JS adds .reveal-ready only after the observer has been initialized. */
    .reveal-ready .reveal{
      opacity:0;
      transform:translateY(28px);
      transition:
        opacity .75s cubic-bezier(.2,.65,.3,1),
        transform .75s cubic-bezier(.2,.65,.3,1);
      transition-delay:var(--reveal-delay,0ms);
    }

    .reveal-ready .reveal.revealed{
      opacity:1;
      transform:translateY(0);
    }

    .reveal-ready .reveal-from-left{
      transform:translateX(-34px);
    }

    .reveal-ready .reveal-from-right{
      transform:translateX(34px);
    }

    .reveal-ready .reveal-from-left.revealed,
    .reveal-ready .reveal-from-right.revealed{
      transform:translateX(0);
    }

    /* Organic, very slow shape changes. transform is kept subtle so the
       blobs do not visibly move the surrounding layout. */
    .hero-phone-area:before{
      animation:heroBlobMorph 32s ease-in-out infinite alternate;
      transform-origin:center;
      will-change:border-radius,transform;
    }

    .feature-visual:before{
      animation:featureBlobMorph 36s ease-in-out infinite alternate;
      transform-origin:center;
      will-change:border-radius,transform;
    }

    .feature-row:nth-child(2) .feature-visual:before{
      animation-duration:40s;
      animation-delay:-7s;
    }

    .feature-row:nth-child(3) .feature-visual:before{
      animation-duration:44s;
      animation-delay:-13s;
    }

    /*
      Deliberately asymmetric blob geometry. The horizontal and vertical
      radii are substantially different at each stage, producing a more
      natural "liquid" silhouette instead of a rounded oval.
    */
    @keyframes heroBlobMorph{
      0%{
        border-radius:31% 69% 63% 37% / 58% 32% 68% 42%;
        transform:rotate(-9deg) scale(1,.96);
      }
      22%{
        border-radius:67% 33% 42% 58% / 35% 61% 39% 65%;
        transform:rotate(-4deg) scale(1.045,1.01);
      }
      48%{
        border-radius:38% 62% 74% 26% / 67% 29% 71% 33%;
        transform:rotate(-12deg) scale(.975,1.045);
      }
      73%{
        border-radius:72% 28% 35% 65% / 43% 72% 28% 57%;
        transform:rotate(-6deg) scale(1.035,.975);
      }
      100%{
        border-radius:26% 74% 56% 44% / 71% 38% 62% 29%;
        transform:rotate(-10deg) scale(.99,1.03);
      }
    }

    @keyframes featureBlobMorph{
      0%{
        border-radius:27% 73% 41% 59% / 64% 31% 69% 36%;
        transform:rotate(-9deg) scale(1);
      }
      20%{
        border-radius:63% 37% 71% 29% / 34% 66% 38% 62%;
        transform:rotate(-3deg) scale(1.04,.965);
      }
      45%{
        border-radius:35% 65% 24% 76% / 73% 42% 58% 27%;
        transform:rotate(-12deg) scale(.975,1.045);
      }
      70%{
        border-radius:76% 24% 57% 43% / 29% 72% 28% 71%;
        transform:rotate(-5deg) scale(1.045,.98);
      }
      100%{
        border-radius:44% 56% 75% 25% / 61% 25% 75% 39%;
        transform:rotate(-10deg) scale(.985,1.035);
      }
    }

    /* Respect the operating system's Reduce Motion preference. */
    @media (prefers-reduced-motion:reduce){
      html{scroll-behavior:auto}

      .reveal-ready .reveal,
      .reveal-ready .reveal.revealed{
        opacity:1;
        transform:none;
        transition:none;
      }

      .hero-phone-area:before,
      .feature-visual:before{
        animation:none;
      }
    }

    /* ---------- Responsive ---------- */

    @media (max-width:1100px){
      .hero-grid{
        grid-template-columns:minmax(0,1fr) minmax(350px,.8fr);
        gap:35px;
      }

      .hero-visual{
        grid-template-columns:1fr;
      }

      .hand-note{
        display:none;
      }

      .feature-row{gap:55px}
    }

    @media (max-width:860px){
      .lexi-nav a:not(.lexi-nav-cta){display:none}

      .hero{padding-top:58px}

      .hero-grid{
        grid-template-columns:1fr;
        text-align:center;
      }

      .hero-lead{margin-inline:auto}
      .hero-benefits{justify-content:center}

      .hero-phone-area{min-height:500px}

      .feature-row{
        grid-template-columns:1fr;
        gap:18px;
        min-height:0;
        padding:22px 0 48px;
      }

      /*
        On mobile, always show the explanatory copy before the phone,
        regardless of alternating desktop layout.
      */
      .feature-row .feature-copy{order:1;justify-self:center}
      .feature-row .feature-visual{order:2}
      .feature-copy{text-align:left;width:100%;max-width:650px}
      .feature-visual{min-height:470px}

      .extras-grid,.blog-grid{grid-template-columns:1fr 1fr}
    }

    @media (max-width:620px){
      .lexi-container{width:min(calc(100% - 24px),var(--max))}
      .header-inner{height:64px}
      .brand-copy small{display:none}

      .lexi-home h1{font-size:46px}
      .hero-lead{font-size:17px}
      .hero-phone-area .phone-shell{width:270px}

      .lexi-home section{padding:68px 0}
      .section-title{font-size:36px}
      .section-lead{font-size:16px;margin-bottom:40px}

      .feature-copy h3{font-size:26px}
      .feature-visual{min-height:430px}
      .phone-shell{width:245px}

      .extras-panel{padding:26px 17px}
      .extras-title{font-size:28px}
      .extras-grid,.blog-grid{grid-template-columns:1fr}
      .extra-card{min-height:145px}

      .blog-head{
        align-items:flex-start;
        flex-direction:column;
      }

      .download-box{
        align-items:flex-start;
        flex-direction:column;
        padding:28px 23px;
      }

      .download-box h2{font-size:29px}

      .footer-top,.footer-bottom{
        align-items:flex-start;
        flex-direction:column;
      }

      .footer-links{justify-content:flex-start}
    }
  
/* Integration with the existing MVC site. */
.lexi-site { margin-bottom: 0; }
.lexi-site h1, .lexi-site h2, .lexi-site h3, .lexi-site h4 { font-weight: 700; }
.lexi-site .brand-logo { width: 50px; height: 50px; object-fit: contain; }
.lexi-site .lexi-nav-cta, .lexi-site .lexi-nav-cta:hover { color: #fff !important; }
.lexi-site .store-badge { padding: 0; background: transparent; box-shadow: none; flex-shrink: 0; }
.store-badge img { width: 180px; height: auto; }
.hero-visual { --reveal-delay: 120ms; }
#features .section-title { --reveal-delay: 60ms; }
#features .section-lead { --reveal-delay: 110ms; }
.feature-row > :nth-child(2) { --reveal-delay: 100ms; }
.lexi-home section[id] { scroll-margin-top: 80px; }
.cookie-banner[hidden], .cookie-modal[hidden] { display: none; }
.cookie-note { margin-top: 12px; }
.lexi-site a:focus-visible, .lexi-site button:focus-visible { outline: 3px solid #008fd4; outline-offset: 4px; }
@media (max-width: 620px) {
    .header-inner { gap: 12px; }
    .lexi-nav { gap: 0; }
    .lexi-nav-cta { padding: 10px 12px; }
}