body {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

main {
    width: 90%;
    max-width: 65em;
    margin: 0 auto;
}


.cg {
  font-family: "Cormorant Garamond", serif;
  font-optical-sizing: auto;
  font-weight: 300;
  font-style: light;
}
.ps {
  font-family: "PT Serif", serif;
  font-weight: 400;
  font-style: normal;
}
.ms,h4 {
  font-family: "Montserrat", sans-serif;
  font-optical-sizing: auto;
  font-weight: 500;
  font-style: normal;
}


header {
    margin:4em 0;
    display:flex;
    justify-content:space-between;
}
.logo-container {
    padding-top:1em;
}
header nav ul {
    display:flex;
    flex-direction:row;
    gap:1em;
}
header nav li {
    list-style:none;
}
header nav a {
    display:inline-block;
    text-transform:uppercase;
    font-size:0.75em;
    letter-spacing:0.1em;
    padding:1em;
    margin-top:-1em;
}
header nav a:hover {
    text-decoration:underline;
    text-underline-offset: 0.25em;
    text-decoration-thickness: 0.02em;
    text-decoration-color: #000;
}
.landing {
    margin:9em 0;
}
.landing .subline {
    margin-top:2.5em;
    display:flex;
    justify-content:space-between;
}
.landing h1 {
    margin:0;
    font-size:9em;
}
.landing p {
    font-size:1.55em;
    max-width:12em;
    line-height:150%;
}
a {
    color:inherit;
    text-decoration:none;
}
/* body a::before {
    content:"";
    display:inline-block;
    position:absolute;
    width:110%;
    background-color:yellow;
    opacity:0.35;
    height:0.5em;
    z-index:-1;
    top:0.8em;
    left:-5%;
} */
.link:hover, a:hover .link {
    position:relative;
    text-decoration:underline;
    text-underline-offset: 0.25em;
    text-decoration-thickness: 0.02em;
    text-decoration-color: #000;
}
.link::after {
    content: url(arrow.svg);
    display: inline-block;
    transform: rotate(-45deg);
    width: 1em;
    height: 1em;
    scale: 0.6;
    position: relative;
    bottom: 0.25em;
    margin-right:-0.2em;
}
.link:hover::after, a:hover .link::after {
    bottom:0.35em;
    margin-right:-0.3em;
    margin-left:0.1em;
}


.big-buttons {
    border-top:1px solid #eee;
    display:flex;
    flex-direction:row;
}
.big-button {
    flex:1;
}
.big-button a {
    padding:4em 0;
    display:inline-block;
}
.big-button:first-child {
    padding-right:6em;
}
.big-button:last-child {
    border-left:1px solid #eee;
    padding-left:6em;
}
.big-button p {
    font-size:1.25em;
    line-height:150%;
}
h3 {
    font-weight:normal;
    font-size:1.6em;
}


.features {
    display:flex;
    flex-direction:row;
}
.features > div {
    flex:1;
    padding: 5em 0;
    min-width:0;
}
.features div:nth-child(2) {
    padding-left:6em;
}
.feature-single h2 {
    font-size:5.5em;
    margin:0.5em 0 0.6em 0;
}
.feature-single h2:hover {
    text-decoration:underline;
    text-underline-offset: 0.12em;
    text-decoration-thickness: 0.01em;
    text-decoration-color: #000;
}
h4 {
    text-transform:uppercase;
    color:#666;
    font-size:0.75em;
    letter-spacing:0.1em;
}
.feature-list ul {
    margin:0;
    padding:0;
    min-width:0;
}
.feature-list li a {
    font-size:1.5em;
    font-weight:normal;
    display:inline-block;

    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width:95%;
    margin-bottom: -0.25em;
}
.feature-list li {
    padding:0.65em 0;
    list-style:none;

    white-space: nowrap;
    overflow: hidden;
    width: 100%;
    display: block;
    min-width: 0;
}
.feature-list li::before {
    content:url(bullet.svg);
    display:inline-block;
    width:1em;
    height:1em;
    padding-right:0.25em;
    position:relative;
    bottom:0.2em;
}
.feature-list i {
    color:#999;
    margin-left:0.5em;
}
.feature-list p {
    margin-top:2.5em;
    display:block;
}
.button {
    font-size:1.5em;
}
.button::after {
    content: url(arrow.svg);
    display: inline-block;
    width: 1em;
    height: 1em;
    position: relative;
    bottom: 0;
    margin-left:0.45em;
}
.button:hover::after {
    margin-left:0.55em;
}
.button:hover {
    position:relative;
    text-decoration:underline;
    text-underline-offset: 0.25em;
    text-decoration-thickness: 0.02em;
    text-decoration-color: #000;
}


.big-image {
    display:flex;
    align-items:center;
    flex-direction:column;
}
.big-image img {
    width:45%;
    margin:1em 0;
}
.big-image p {
    font-size:1.25em;
}
.big-image img:first-child {
    margin-top:3em;
}


.list-long {
    column-count:2;
}


.list-icons {
    display:flex;
    flex-direction:row;
    justify-content:space-between;
    gap:3em;
    margin-top:3em;
}
.list-icon {
    border:1px solid #CCC;
    flex:1;
}
.list-icon::after {
    opacity:50%;
    margin-left:0.75em;
    margin-bottom:0.5em;
    margin-right: -0.2em;
}
.list-icon:hover::after {
    opacity:100%;
    margin-left:0.85em;
    margin-bottom:0.6em;
    margin-right:-0.3em;
    margin-top:-0.1em;
}
.list-icon:hover {
    border-color:#000;
}
.list-icon img {
    width:100%;
}


footer {
    display:flex;
    justify-content:center;
    align-items:center;
    padding:10em 0 5em 0;
}

@media (max-width: 1024px) {
    .big-image img {
        width:60%;
    }
}

@media (max-width: 768px) {
    header {
        padding: 1em 0;
        margin:0;
        position:sticky;
        top:0;
        z-index:1;
        background-color:#FFF;
    }
    .landing {
        margin:5em 0;
    }
    .landing h1 {
        font-size:7em;
        text-align:center;
    }
    .landing .subline {
        text-align:center;
        justify-content:center;
        align-items:center;
        flex-direction:column;
    }
    .big-buttons {
        flex-direction:column;
    }
    .big-button:first-child, .big-button:last-child {
        padding:2em 0;
        border-top:1px solid #eee;
        border-left:none;
    }
    .features {
        flex-direction:column;
    }
    .features div:nth-child(2) {
        padding-left:0;
    }
    .big-image img {
        width:90%;
    }
    .list-long {
        column-count: 1;
    }
    .list-icons {
        flex-wrap: wrap;
        gap:1em;
    }
    .list-icon {
        flex: 0 0 calc(50% - 1em);
    }
    .features > div {
        padding: 3em 0;
    }
    .big-buttons {
        border-top:none;
        border-bottom:1px solid #eee;
    }
    .big-button a {
        padding:2em 0;
    }
}