/* Shared stylesheet for the full-width Visiblora pages: the home page and
   /contact/. The thin "coming soon" placeholder pages use assets/soon.css
   instead -- a different, much smaller layout.

   This lived inline in index.html until /contact/ needed the same look.
   Two pages holding two copies of one stylesheet drift apart on the first
   style change that only one of them receives, so there is one copy here.
   Both pages link it with an ABSOLUTE /assets/site.css path: /contact/ is
   one directory deep and a relative path would resolve differently on the
   two pages. */

  :root{
    --blue:#22A0FE;
    --blue-dark:#0C7FDC;
    --navy:#131841;
    --navy-2:#1B2157;
    --ink:#1B1E2B;
    --grey-1:#5B5F73;
    --grey-2:#8A8DA0;
    --line:#E4E6EF;
    --bg-soft:#F5F7FC;
    --white:#FFFFFF;
    --radius:14px;
    --max:1120px;
  }
  *{box-sizing:border-box;}
  html{scroll-behavior:smooth;}
  body{
    margin:0;
    font-family:"Lato","Open Sans",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
    color:var(--ink);
    background:var(--white);
    line-height:1.6;
  }
  img{max-width:100%;display:block;}
  a{color:inherit;text-decoration:none;}
  .wrap{max-width:var(--max);margin:0 auto;padding:0 32px;}
  .eyebrow{
    display:inline-block;
    font-size:13px;
    font-weight:700;
    letter-spacing:.06em;
    text-transform:uppercase;
    color:var(--blue-dark);
    background:rgba(34,160,254,0.10);
    padding:6px 14px;
    border-radius:999px;
    margin-bottom:18px;
  }
  /* The header is sticky, so an anchor jump must stop below it. */
  [id]{scroll-margin-top:88px;}
  h1,h2,h3{font-weight:800;color:var(--navy);margin:0;}
  h1{font-size:44px;line-height:1.12;letter-spacing:-.01em;}
  h2{font-size:30px;line-height:1.2;}
  h3{font-size:18px;line-height:1.3;}
  p{margin:0;}
  .lead{font-size:18px;color:var(--grey-1);}
  .btn{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:8px;
    padding:13px 26px;
    border-radius:10px;
    font-weight:700;
    font-size:15px;
    cursor:pointer;
    border:1.5px solid transparent;
    /* Without this a narrow screen breaks "Start free trial" over three
       lines and the header buttons grow tall enough to cover the logo. */
    white-space:nowrap;
  }
  .btn-primary{background:var(--blue);color:var(--white);}
  .btn-ghost{background:transparent;color:var(--navy);border-color:var(--line);}
  .btn-ghost-light{background:transparent;color:var(--white);border-color:rgba(255,255,255,0.35);}

  /* NAV */
  header.nav{
    position:sticky;top:0;z-index:50;
    background:rgba(255,255,255,0.92);
    backdrop-filter:blur(8px);
    border-bottom:1px solid var(--line);
  }
  .nav-inner{display:flex;align-items:center;justify-content:space-between;padding:16px 32px;max-width:var(--max);margin:0 auto;}
  .brand{display:flex;align-items:center;gap:10px;}
  .brand img{width:32px;height:32px;}
  .brand span{font-size:19px;font-weight:800;color:var(--navy);}
  nav.links{display:flex;gap:30px;}
  nav.links a{font-size:14px;font-weight:600;color:var(--grey-1);}
  nav.links a:hover{color:var(--navy);}
  .nav-cta{display:flex;gap:12px;align-items:center;}

  /* Small-screen menu. No JavaScript: <details> is the native disclosure
     widget, so it works with a keyboard and a screen reader as-is. Below
     640px the desktop links and buttons are hidden and this replaces them
     -- before this, a phone had no navigation at all. */
  .nav-menu{display:none;position:relative;}
  .nav-menu>summary{
    list-style:none;cursor:pointer;
    width:42px;height:42px;border:1.5px solid var(--line);border-radius:10px;
    display:flex;align-items:center;justify-content:center;
  }
  .nav-menu>summary::-webkit-details-marker{display:none;}
  .nav-menu .bars{position:relative;display:block;width:18px;height:2px;background:var(--navy);border-radius:2px;}
  .nav-menu .bars::before,.nav-menu .bars::after{
    content:"";position:absolute;left:0;width:18px;height:2px;background:var(--navy);border-radius:2px;
  }
  .nav-menu .bars::before{top:-6px;}
  .nav-menu .bars::after{top:6px;}
  .nav-menu[open]>summary{border-color:var(--blue);}
  .nav-panel{
    position:absolute;right:0;top:52px;width:min(78vw,264px);
    background:var(--white);border:1px solid var(--line);border-radius:14px;
    box-shadow:0 18px 40px rgba(19,24,65,.14);
    padding:10px;display:flex;flex-direction:column;gap:2px;
  }
  .nav-panel a{padding:11px 12px;border-radius:9px;font-size:15px;font-weight:600;color:var(--navy);}
  .nav-panel a.btn{margin-top:8px;justify-content:center;}

  /* HERO */
  .hero{padding:88px 0 64px;background:linear-gradient(180deg,#F8FAFF 0%, #FFFFFF 100%);}
  .hero-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:56px;align-items:center;}
  .hero h1{margin-bottom:20px;}
  .hero .lead{margin-bottom:30px;max-width:520px;}
  .hero-ctas{display:flex;gap:14px;margin-bottom:22px;}
  .hero-art{
    background:var(--navy);
    border-radius:20px;
    overflow:hidden;
    display:flex;
    align-items:center;
    justify-content:center;
    min-height:420px;
  }
  /* The panel is landscape and the photograph is portrait, so cover crops
     the top and the bottom off. object-position raises the crop window --
     at the default 50% the subject's forehead sits on the top edge. */
  .hero-art img{width:100%;height:100%;object-fit:cover;object-position:50% 30%;display:block;}

  /* SECTION generic */
  section{padding:76px 0;}
  .section-head{max-width:640px;margin:0 auto 44px;text-align:center;}
  .section-head .eyebrow{display:block;width:fit-content;margin:0 auto 14px;}
  .section-head h2{margin-bottom:14px;}
  .section-head p{color:var(--grey-1);font-size:16px;}

  /* PROBLEM */
  .problem{background:var(--bg-soft);}
  .problem-grid{display:grid;grid-template-columns:1fr 1fr 1fr;gap:24px;margin-top:12px;}
  .problem-card{background:var(--white);border:1px solid var(--line);border-radius:var(--radius);padding:26px;}
  .problem-card .num{font-size:13px;font-weight:800;color:var(--blue-dark);margin-bottom:10px;}
  .problem-card p{color:var(--grey-1);font-size:14.5px;}

  /* HOW IT WORKS */
  .steps{display:grid;grid-template-columns:repeat(4,1fr);gap:22px;}
  .step{border:1px solid var(--line);border-radius:var(--radius);padding:26px 22px;}
  .step .idx{
    width:34px;height:34px;border-radius:9px;background:var(--blue);color:var(--white);
    display:flex;align-items:center;justify-content:center;font-weight:800;font-size:15px;margin-bottom:16px;
  }
  .step h3{margin-bottom:8px;}
  .step p{font-size:14px;color:var(--grey-1);}

  /* VERTICALS */
  .verticals{background:var(--navy);color:var(--white);}
  .verticals .section-head h2, .verticals .section-head p{color:var(--white);}
  .verticals .section-head p{color:rgba(255,255,255,0.72);}
  .vert-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;}
  .vert-chip{
    background:rgba(255,255,255,0.06);
    border:1px solid rgba(255,255,255,0.14);
    border-radius:12px;
    padding:20px 18px;
  }
  .vert-chip h3{color:var(--white);font-size:16px;margin-bottom:6px;}
  .vert-chip p{color:rgba(255,255,255,0.65);font-size:13px;}
  .vert-note{margin-top:28px;text-align:center;color:rgba(255,255,255,0.75);font-size:14.5px;max-width:640px;margin-left:auto;margin-right:auto;}

  /* ENGINES */
  /* Seven engine cards, not four. A fixed 2-column grid left one card
     alone on a fourth row; auto-fit packs them and still collapses to the
     column counts the two media queries below pin. */
  .engines-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:22px;margin-bottom:34px;}
  .engine-card{border:1px solid var(--line);border-radius:var(--radius);padding:26px;}
  .engine-card .tag{font-size:12px;font-weight:800;letter-spacing:.04em;text-transform:uppercase;color:var(--blue-dark);margin-bottom:12px;}
  .engine-card h3{margin-bottom:10px;}
  .engine-card p{font-size:14px;color:var(--grey-1);}
  .engines-foot{
    background:var(--bg-soft);border-radius:var(--radius);padding:22px 28px;
    font-size:15px;color:var(--navy);font-weight:600;text-align:center;
  }

  /* PRODUCT PREVIEW */
  .preview-card{
    border:1px solid var(--line);border-radius:20px;padding:32px;background:var(--white);
    box-shadow:0 20px 50px -30px rgba(19,24,65,0.35);
  }
  .preview-top{display:flex;justify-content:space-between;align-items:center;margin-bottom:22px;flex-wrap:wrap;gap:10px;}
  .preview-top h3{font-size:16px;}
  .legend{display:flex;gap:18px;font-size:13px;color:var(--grey-1);}
  .legend span{display:inline-flex;align-items:center;gap:6px;}
  .dot{width:9px;height:9px;border-radius:50%;display:inline-block;}
  .dot.you{background:var(--blue);}
  .dot.comp{background:var(--grey-2);}
  .engine-row{margin-bottom:18px;}
  .engine-row-head{display:flex;justify-content:space-between;font-size:13.5px;font-weight:700;color:var(--navy);margin-bottom:8px;}
  .bar-track{background:var(--bg-soft);border-radius:8px;height:10px;position:relative;overflow:hidden;margin-bottom:6px;}
  .bar-fill{height:100%;border-radius:8px;background:var(--blue);}
  .bar-track.comp .bar-fill{background:var(--grey-2);}

  /* PRICING */
  .pricing-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;}
  .price-card{border:1px solid var(--line);border-radius:var(--radius);padding:30px 26px;display:flex;flex-direction:column;}
  .price-card.featured{border:2px solid var(--blue);position:relative;}
  .badge{
    position:absolute;top:-13px;left:26px;background:var(--blue);color:var(--white);
    font-size:11.5px;font-weight:800;letter-spacing:.03em;text-transform:uppercase;
    padding:5px 12px;border-radius:999px;
  }
  .price-card h3{margin-bottom:4px;}
  .price-card .price{font-size:32px;font-weight:800;color:var(--navy);margin:14px 0 4px;}
  .price-card .price small{font-size:14px;font-weight:600;color:var(--grey-2);}
  .price-card .desc{font-size:14px;color:var(--grey-1);margin-bottom:18px;}
  .price-card ul{list-style:none;margin:0 0 24px;padding:0;flex:1;}
  .price-card li{font-size:14px;color:var(--ink);padding:8px 0;border-top:1px solid var(--line);}
  .price-card li:first-child{border-top:none;}

  /* CTA BANNER */
  .cta-banner{
    background:var(--navy);
    border-radius:24px;
    padding:56px 48px;
    text-align:center;
    color:var(--white);
  }
  .cta-banner h2{color:var(--white);margin-bottom:12px;}
  .cta-banner p{color:rgba(255,255,255,0.72);font-size:16px;max-width:520px;margin:0 auto 28px;}
  .cta-actions{display:flex;gap:14px;justify-content:center;}

  /* FOOTER */
  footer{border-top:1px solid var(--line);padding:56px 0 34px;}
  .foot-grid{display:grid;grid-template-columns:1.3fr 1fr 1fr 1fr;gap:32px;margin-bottom:40px;}
  .foot-brand{display:flex;align-items:center;gap:10px;margin-bottom:14px;}
  .foot-brand img{width:26px;height:26px;}
  .foot-brand span{font-size:17px;font-weight:800;color:var(--navy);}
  .foot-desc{font-size:13.5px;color:var(--grey-1);max-width:260px;margin-bottom:18px;}
  .foot-col h4{font-size:12.5px;font-weight:800;text-transform:uppercase;letter-spacing:.05em;color:var(--grey-2);margin-bottom:14px;}
  .foot-col a{display:block;font-size:14px;color:var(--grey-1);margin-bottom:10px;}
  .foot-col a:hover{color:var(--navy);}
  .offices{display:flex;gap:0;font-size:14px;}
  .office-block{padding-right:0;}
  .office-block p{margin-bottom:2px;}
  .office-block .city{font-weight:700;color:var(--navy);}
  .office-block .addr{color:var(--grey-1);font-size:13.5px;}
  .foot-bottom{
    border-top:1px solid var(--line);padding-top:22px;
    display:flex;justify-content:space-between;align-items:center;
    font-size:13px;color:var(--grey-2);flex-wrap:wrap;gap:10px;
  }
  .foot-ver{color:var(--grey-2);opacity:.75;}
  .foot-legal{display:flex;flex-wrap:wrap;gap:8px 18px;}
  .foot-legal a{color:var(--grey-1);}
  .foot-legal a:hover{color:var(--navy);text-decoration:underline;}

  @media (max-width:900px){
    .hero-grid{grid-template-columns:1fr;}
    .problem-grid,.steps,.vert-grid,.engines-grid,.pricing-grid{grid-template-columns:1fr 1fr;}
    .foot-grid{grid-template-columns:1fr 1fr;}
    nav.links{display:none;}
    .nav-menu{display:block;}
  }

  /* Phone. The 900px block above only goes as far as two columns; at 390px
     two pricing cards plus the gap are wider than the screen, so the page
     scrolled sideways and the third card was cut off. One column here. */
  @media (max-width:640px){
    .wrap{padding:0 20px;}
    .nav-inner{padding:12px 20px;}
    .nav-cta{display:none;}
    .problem-grid,.steps,.vert-grid,.engines-grid,.pricing-grid,.foot-grid{grid-template-columns:1fr;}
    h1{font-size:34px;}
    h2{font-size:25px;}
    .lead{font-size:17px;}
    .hero{padding:52px 0 44px;}
    section{padding:54px 0;}
    .hero-art{min-height:280px;}
    .hero-ctas,.cta-actions{flex-wrap:wrap;}
    .hero-ctas .btn,.cta-actions .btn{flex:1 1 auto;}
    .foot-bottom{flex-direction:column;align-items:flex-start;}
  }