/* Wolfram One page styles.

   @file        homepage.css.en
   @author      estevaot
   ========================================================================== */

/* ==========================================================================
   set variables
   ========================================================================== */
:root {
  
}

/* ==========================================================================
   set variables
   ========================================================================== */
main {
   #intro { row-gap:2rem; }
   & .hero {
      width: 100%;
      height: min(40vw,40vh);
      margin-bottom: 1.5rem;
      background: bottom center url(/wolfram-one/img/v15/hero-wo.png) no-repeat;
      background-size: min(80vw,700px);
   }
   & .product-logo span {
      display: flex;
      align-items: flex-start;
      &::before {
         content: "|";
         line-height: 1;
         margin-inline: 2px;
         font-weight: 300;
         color: #777;
      }
   }
   & h1 { max-width:980px; }
   & #try-buy-upgrade {
      background: #404040;
      border-bottom: 1px solid #fff;
      color: #fff;
      font-family: 'Source Sans Pro', Arial, sans-serif;
      padding: 2.5rem 2rem;
      text-align: center;
      & h2 {
        font-size: 2.25rem;
        font-weight: 600;
        color: #fff;
        margin-bottom: .5rem;
        & + p {
            font-size: 1.1rem;
            color: #fff;
            margin-bottom: 2rem;
        }
      }
      & > div {
        display: flex;
        justify-content: center;
        gap: 1rem;
        & svg { width:15px; }

      }
      & > p a {
         color: #ffd777;
         &:hover { color:#ff7700; }
      }
      & > div a {
        display: flex;
        gap: .5rem;
        background: #dd1100;
        border-radius: 6px;
        font-size: 1.25rem;
        color: #fff;
        padding: .7rem 1rem;
        &:hover {
            background: #e9671e;
        }
      }
   }
}