body { width: 100%; min-width: 100%; max-width: 1000px; }
    #home #header { background: rgba(26, 30, 31, 0.6); }

    .header .nav { margin-top: 52px; margin-right: 35px; }

    .mayflower-in-stages .supporter-tile { background: linear-gradient(202deg, #9f7af1, #f79973); color: #fff; padding: 24px 48px; text-decoration: none; font-size: 1.1em; font-weight: bold; border-radius: 12px; display: inline-block; min-width: 200px; margin-bottom: 5px; line-height: 1.8; color: #fff; }
    
    .header .nav a { color: #fff; font-size: 14px; padding: 1em 2em; margin: 0 5px; text-transform: uppercase; border: solid 1px transparent; border-radius: 0.3em; }

    .header .nav a.button { border: solid 1px white; }

    .header .nav a:hover { border: solid 1px white; background: #fff; color: #1b82cd; text-decoration: none; }

    .home-hero { overflow: hidden; width: 100%; position: absolute; top: 0; left: 0; height: 100%; }

    .hero-image { width: 100%; position: absolute; top: 0; left: 0; height: 100%; }

    .header.small .inner { background: #fff; background: rgba(255, 255, 255, 0.95); box-shadow: 0 0 15px 0 rgba(0, 0, 0, 0.15); }

    .header.small .logo { background-position: -29px -154px; width: 50px; height: 50px; margin: 15px; }

    .header.small .nav { margin-top: 18px; }

    .header.small .nav a { color: #333; }

    .header.small .nav a:hover { background: #333; color: #fff; }

    .header.small .nav a.button { border-color: #333; }

    .header, .header .inner, .header .logo, .header .nav, .header .nav a, .header .nav a.button { -webkit-transition: margin 0.3s linear, color 0.3s linear, background-size 0.3s linear, background-color 0.3s linear, border-color 0.3s linear; -moz-transition: margin 0.3s linear, color 0.3s linear, background-size 0.3s linear, background-color 0.3s linear, border-color 0.3s linear; -ms-transition: margin 0.3s linear, color 0.3s linear, background-size 0.3s linear, background-color 0.3s linear, border-color 0.3s linear; transition: margin 0.3s linear, color 0.3s linear, background-size 0.3s linear, background-color 0.3s linear, border-color 0.3s linear; }

    .home-hero-wrapper h2 { font-size: 31px; font-weight: 300; text-align: center; margin: 30px auto 20px; color: #fff; }

    h1 { font-size: 50px; font-size: clamp(21px, 3.5vw, 31px); font-weight: 800; line-height: 1.3; color: #3095df; text-transform: none; margin: 0.3em auto; text-align: center; letter-spacing: 0px; }

    h1 em { font-size: inherit; font-weight: inherit; line-height: inherit; color: inherit; text-transform: inherit; letter-spacing: inherit; }

    h2 { font-size: clamp(18px, 3.1vw, 28px); font-weight: 400; color: #3095df; margin: 0 auto 1em auto; text-align: center; }

    .next-spokt h2.section-header, .next-spokt h2.section-header em, .next-spokt h2.section-header strong { font-size: 50px; font-size: clamp(21px, 3.5vw, 31px); font-weight: 800; line-height: 1.4; color: #3095df; text-transform: none; margin: 0.3em auto 1rem; text-align: center; letter-spacing: 0px; }

    .next-spokt p.header-blurb { font-weight: 400; color: #3195df; text-transform: none; text-align: center; letter-spacing: 0px; padding: 0px clamp(5px, 13vw, 130px) 0; line-height: 1.6; }
    .next-spokt p.header-blurb em, .next-spokt .header-blurb strong { font-weight: inherit; color: inherit; text-transform: inherit; letter-spacing: inherit; }
    .next-spokt .header-blurb strong { font-weight: 800; }

    h3 { font-family: Montserrat, Raleway, Gotham, "Helvetica Neue", Helvetica, sans-serif; font-size: 19px; color: #3095df; margin: 1em auto; text-align: center; text-transform: none; font-weight: 700; }
    
    p { font-size: 1.35rem; font-size: clamp(15px, 3vw, 22px); font-size: clamp(15px, 3vw, 19px); }
    p strong { color: inherit; font-size: inherit; font-weight: 800; }
    p em { color: inherit; font-size: inherit; }
    
    .meet-mayflower { min-height: 750px; color: #3095df; }

    .meet-mayflower p, .meet-mayflower h1, .meet-mayflower h2, .meet-mayflower h3, .meet-mayflower div, .meet-mayflower span, .meet-mayflower em, .meet-mayflower strong { color: #34A490; }

    .meet-mayflower p { color: #34A490; font-weight: 500; }

    .meet-mayflower .inner { padding: 100px 15px 120px; height: 100%; }

    .three-col { margin-top: 55px; padding: 0 35px; }

    .three-col .column { width: 30%; float: left; margin-right: 5%; }

    .three-col .column.column-3 { margin-right: 0; }

    .meet-mayflower .column .glyph { width: 160px; height: 175px; margin: 0 auto; background-repeat: none; background-position: -151px -28px; }

    .meet-mayflower .column .glyph { height: 0px; }

    .meet-mayflower h2 em, .meet-mayflower p em, .meet-mayflower p strong, .four-col .column p strong { font-weight: inherit; color: inherit; font-size: inherit; line-height: inherit; }

    .meet-mayflower p strong { font-weight: 700; }

    .meet-mayflower .column.column-2 .glyph { background-position: -332px -28px; }

    .meet-mayflower .column.column-3 .glyph { background-position: -514px -28px; }

    .meet-mayflower .column p { font-size: 17px; line-height: 1.6em; text-align: center; }

    .meet-mayflower .mayflower-hero-iti.button, .more-blog .mayflower-hero-iti.button { margin-top: 40px; background: #4FBFAB; }

    .meet-mayflower .mayflower-hero-iti.button:hover, .more-blog .mayflower-hero-iti.button:hover { background: #fff; border: solid 1px #34A490; color: #34A490; }

    .mayflower-hero { padding-top: 86px; overflow: hidden; position: relative; margin-top: -76px; }
    .mayflower-hero-inner { position: relative; z-index: 10; padding-bottom: clamp(10px, 7vw, 120px); }
   
    .mayflower-hero-info { max-width: 1000px; padding: 40px 20px 10px; margin: clamp(265px, 75vw, 300px) auto 0px; line-height: 1.3; color: #333; font-weight: 400; background: transparent; }
    
    .mayflower-hero-info h1 { font-weight: 900; color: #fff; width: 60%; font-size: clamp(37px, 8.5vw, 50px); margin: 0.3em 0; text-align: left; line-height: 1.1; }

    .mayflower-hero-info p { width: 50%; line-height: inherit; color: #fff; margin: 0; text-align: left; font-size: 22px; font-weight: inherit; text-transform: none; font-size: clamp(16px, 4.6vw, 22px); }

    .mayflower-hero-info p strong { line-height: inherit; line-height: inherit; color: inherit; font-size: 26px; font-size: inherit; font-weight: inherit; text-transform: none; }

    .mayflower-hero-iti-wrapper { text-align: center; }

    .mayflower-hero-iti.button { padding: 25px 50px; color: #fff; font-size: 30px; font-weight: 500; border: none; background: #f96a53; background: rgba(240, 104, 56, 0.9); background: #f96a53; border: solid 1px transparent; display: inline-block; margin-top: 70px; }

    .mayflower-hero-iti.button:hover { background: #fff; color: #f96a53; }

    .more-blog { padding: 50px; color: #555; background-color: rgba(0,0,100,0.05); margin: 4rem 0 0rem; }

    .more-blog h1, .more-blog h2, .more-blog h3, .more-blog p { color: #334; }



    .more-blog h2 { line-height: 1.5em; }

    .more-blog h3 { margin-bottom: 5px; }



    .plans-highlight .thumb-wrap { width: 100%; border-radius: 12px; overflow: hidden; margin: 6px auto; aspect-ratio: 6 / 4; }
    .plans-highlight .thumb-wrap img { width: 100%; }



    .mayflower-hero .cta-btn { background-color: #ffffff; color: #0276c9; padding: 14px 20px 14px 28px; text-decoration: none; font-size: 1.1em; font-weight: bold; border-radius: 5px; display: inline-block; min-width: 200px; margin-top: 29px; overflow: hidden; position: relative; line-height: 1; transition: transform 0.4s, opacity 0.3s; will-change: auto; }
    .mayflower-hero .cta-btn > span { color: inherit; text-decoration: inherit; font-size: inherit; line-height: inherit; font-weight: inherit; display: inline-block; position: relative; z-index: 100; }
    .mayflower-hero .cta-btn::after { content: " "; display: block; position: absolute; z-index: 1; top: -10%; left: -10%; width: 120%; height: 120%; background-color: #0276c9; opacity: 0; transition: opacity 0.4s; will-change: auto; }
    .mayflower-hero .cta-btn:hover::after { opacity: 1;  will-change: auto; }
    .mayflower-hero .cta-btn:hover { color: #ffffff; text-decoration: none; transform: scale(1.04); }
    
    .mayflower-hero .cta-btn span span { height: 100%; width: 1.5rem; display: inline-block; text-align: center; transition: transform 0.3s; will-change: auto; }
    .mayflower-hero .cta-btn:hover span span { transform: rotate(90deg); }

    .mayflower-in-stages .mayflower-hero-iti.button:hover { background: transparent; border: solid 1px #fff; color: #fff; }

    .three-col-wrapper { margin-bottom: 0; }
    .three-col-wrapper .column { text-align: center; padding: 0 clamp(10px, 1.5vw, 35px); }

    .three-col-wrapper .column h3 { font-size: clamp(17px, 2.4vw, 21px); line-height: 1.3; text-transform: uppercase; }
    .three-col-wrapper .column a { font-size: clamp(15px, 2vw, 19px); text-transform: capitalize; }

    .three-col-wrapper a { text-transform: uppercase; font-weight: 800; color: #777; }

    .three-col-wrapper .column p { color: #667; font-size: clamp(14px, 1.8vw, 17px); }

    .mayflower-in-stages {
/*         background: #f96a53; */
    }

    .mayflower-in-stages .inner { padding: clamp(50px, 6vw, 52px) 15px 40px; height: 100%; }

    .four-col { margin-top: 45px; padding: 0 5px; margin-bottom: 65px; }

    .four-col .column { width: 21.2%; float: left; margin-right: 5%; }

    .four-col .column.column-4 { margin-right: 0; }

    .four-col .column p { font-size: 14px; line-height: 1.6em; text-align: center; font-weight: 500; }

    .four-col .column p strong { font-weight: 700; }

    .mayflower-in-stages h1, .mayflower-in-stages h2, .mayflower-in-stages h3, .mayflower-in-stages p, .mayflower-in-stages * { color: #383d43; }

    .mayflower-in-stages .column .glyph { width: 100px; height: 50px; margin: 0 auto; background-repeat: none; background-position: -694px -26px; }

    .mayflower-in-stages h3 { font-size: 23px; margin-bottom: 10px; }

    .mayflower-in-stages h3 span { font-weight: 600; display: block; margin-top: 8px; font-size: 19px; }
    
    .mayflower-in-stages p { text-align: center; width: clamp(420px, 80%, 800px); max-width: 100%; margin: 1rem auto; }

    .mayflower-in-stages .column .glyph { height: 0px; }

    .mayflower-in-stages .column.column-2 .glyph { background-position: -809px -22px; width: 60px; }

    .mayflower-in-stages .column.column-3 .glyph { background-position: -887px -13px; width: 145px; }

    .mayflower-in-stages .column.column-4 .glyph { background-position: -1027px -26px; width: 60px; }

    .mayflower-in-stages .button:hover { color: #f96a53; }

    .old-browser { width: 100%; height: 100%; position: fixed; z-index: 1000000000; background: #222; padding: 250px 0; text-align: center; }

    .old-browser p { width: 350px; margin: 0 auto 40px; text-align: center; line-height: 1.9em; color: #fff; }

    .old-browser .logo { width: 100px; margin: 30px auto; }

    .old-browser a { display: block; color: #fff; line-height: 1.5em; font-weight: 600; font-size: 30px; }

    .testimonials { width: 80%; margin: 45px auto 0px; }

    .testimonials p { color: #444; background: #f8f8f8; font-size: 18px; font-weight: 600; padding: 20px 30px; margin: 25px auto; border-radius: 8px; }
    
    .next-spokt .three-col-wrapper .column a.coming-link { cursor: default; color: #3095df; }
    .plans-highlight .three-col-wrapper .column p { margin-bottom: 3px; }

    .inner {
      max-width: 1000px;
      width: 100%;
      margin: 0 auto;
      padding: 0 15px; }
    
    .update-message { background: #fdf6ec; border: solid 1px #f6ad55; margin: 45px auto 85px; border-radius: 12px; max-width: 600px; padding: 30px; }
    .update-message h3, .update-message p { color: #555; }
    .update-message p { font-size: clamp(14px, 1.7vw, 18px); }
    
    .whitainer { background: #f8f8f8; border-radius: 12px; padding: 60px; max-width: 700px; margin: 0px auto;  }
    .whitainer p { text-align: center; width: 100%; max-width: 100%; margin: 1rem auto; line-height: 1.3; font-size: clamp(14px, 2.5vw, 18px); color: #777; }
    #home #header .inner, #header .inner { width: 100%; max-width: 1000px; }
    
    .next-spokt .dad-blurb .whitainer h2.section-header, .next-spokt .dad-blurb .whitainer h2.section-header em, .next-spokt .dad-blurb .whitainer h2.section-header strong { color: #f9795c; }

    .footerContent {
      max-width: 960px;
      padding: 0 20px;
      width: 100%;
      margin: 0 auto; }
    
    .footerColumn, .footerColumn.blogposts { width: 33%; margin-right: 0; padding-right: 25px; }

    #footerWrap .footerColumn h3 {
      line-height: 1.3; }
    
    
    .image-grid {
      display: flex;
      gap: 1rem;
      align-items: stretch;
      justify-content: center;
      margin: 2rem 0;
    }
    .large-square {
      flex: 1 1 0;
/*       aspect-ratio: 1 / 1; */
      min-width: 0;
    }
    .large-square img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      border-radius: 12px;
      display: block;
    }
    .small-squares {
      display: grid;
      grid-template-columns: 1fr 1fr;
      grid-template-rows: 1fr 1fr;
      gap: 1rem;
      flex: 1 1 0;
      min-width: 0;
    }
    .small-squares div {
      aspect-ratio: 1 / 1;
      width: 100%;
      min-width: 0;
    }
    .small-squares img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      border-radius: 12px;
      display: block;
    }

    @media only screen and (max-width: 750px) { 
      
      .mayflower-hero-info h1, .mayflower-hero-info p { width: 70%; }
      .three-col-wrapper { padding-left: 20%; padding-right: 20%; }
      .three-col-wrapper .column { width: 100%; margin: 10px auto; float: none; padding: 45px 0 0; }
      .three-col-wrapper .column h3 { font-size: clamp(17px, 5vw, 21px); }
      .three-col-wrapper .column h3 br { display: none; }
      .three-col-wrapper .column a, .three-col-wrapper .column p { font-size: clamp(15px, 4vw, 19px); }
      .more-blog { padding: 65px 15px; }
      .more-blog.plans-highlight { padding-left: 15px; padding-right: 15px; }
      .plans-highlight .three-col-wrapper { margin-bottom: 0px; }

   }

    @media only screen and (max-width: 650px) { 
      .supporter-tile br { display: none; }
      .three-col-wrapper { padding-left: 15%; padding-right: 15%; }

      .mayflower-hero-info h1, .mayflower-hero-info p { width: 80%; }
      .logo { zoom: .8; margin-top: 23px; }
      .testimonials { width: 90%; margin: 45px auto 45px; }
      .whitainer { background: #f8f8f8; border-radius: 12px; padding: 60px 30px; max-width: 90%; }
      .footerColumn, .footerColumn.blogposts { width: 100%; margin-right: 0; padding-right: 25px; margin-bottom: 20px; }
      .footerColumn.blogposts { margin-bottom: 60px; }

   }

    @media only screen and (max-width: 550px) {
      
      .three-col-wrapper { padding-left: 10%; padding-right: 10%; }
      .mayflower-hero-info h1, .mayflower-hero-info p { width: 100%; }
      .pricing { display: none!important; }
      .testimonials { width: 100%; margin: 45px auto 45px; }
      .next-spokt p.header-blurb { padding: 0px clamp(5px, 2vw, 43px) 0; }
    }
    
    @media only screen and (max-width: 436px) {
      
      .login-link { display: none!important; }
      .image-grid { flex-direction: column; gap: 1rem; }
      .small-squares { grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr; }
      
    }
    
    @media only screen and (max-width: 350px) {
      
      .join-link span { display: none!important; }
      
    }