section{
    font-family: system-ui , sans-serif;
    max-width: var(--breakpoint-lg);
    margin: var(--space-7) auto 0 auto;
    font-size: var(--font-size);
}
section h1{
    line-height: 1.15;
}
section h2{
    font-size: var(--font-size-xl);
    line-height: 1.1;
}
section h2,
section p,
section h3{
    margin: unset;
    padding: unset;
}
section img{
    max-width: 100%;
}
section img.icon{
    width: 2rem;
    height: 2rem;
}
section img.icon.large{
    width: 5rem;
    height: 5rem;
}
section{
    padding-top: var(--space-3);
}
section > h2+p,
section > h2{
    padding-bottom: 0.5em;
}
@media screen and (max-width : 650px){
    section > p,
    section > h2{
        padding-left: var(--space-3);
    }
    section .postscription {
        display: block;
        padding-left: var(--space-3);
    }
}
/* .actions */
.actions{
    display: flex;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-padding-left: var(--space-2);
    gap: var(--space-2);
    margin-bottom: var(--space-3);
    padding-left: var(--space-2);
}
.actions > a:first-of-type{
    background: #000;
    color: #FFF;
}
.actions > a{
    scroll-snap-align: start;
    border-radius: var(--space-2);
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    min-height: var(--button-size);
    display: flex;
    align-items: center;
    padding-left: var(--space-3);
    padding-right: var(--space-3);
}
.actions > a > span{
    font-weight: 500;
    white-space: nowrap;
}
/* .table-scroll */
div.table-scroll {
    display: flex;
    overflow-x: auto;
    max-width: 100vw;
}
div.table-scroll table{
    border-collapse: collapse;
    margin-top: var(--space-3);
    background: var(--color-surface);
}
div.table-scroll table > tbody > tr > td {
    font-size: var(--font-size);
    line-height: 1;
    border: 1px solid var(--color-border);
    padding-left: var(--space-1);
    padding-right: var(--space-1);
    min-height: var(--button-size);
    padding-top: var(--space-2);
    padding-bottom: var(--space-2);
}
@media screen and (max-width : 650px){
    div.table-scroll,
    div.table-scroll table{
        width: 100%;
    }
}
/* .carousel */
.carousel {
    margin-top: var(--space-3);
    position: relative;
}
.carousel > .buttons{
    display: flex;
    justify-content: space-between;
}
.carousel > .buttons > button{
    width: var(--button-size);
    height: var(--button-size);
    border-radius: 20px;
    border: unset;
    transition: 0.5s;
    background: unset;
}
.carousel button.right:hover{
    transform: translateX(20px);
}
.carousel button.left:hover{
    transform: translateX(-20px);
}
.carousel .buttons > .position{
    display: flex;
    align-items: center;
    gap: 6px;
}
.carousel .buttons > .position > button{
    width: var(--space-3);
    height: var(--space-3);
    border-radius: 6px;
    border: unset;
    display: flex;
    align-items: center;
    aspect-ratio: 1/1;
}
.carousel .buttons > .position > button.active{
    background: var(--color-primary);
}
.carousel > .slide{display: none;}
.carousel {
    position: relative;
    cursor: grab;
}
.carousel.grabbing {
    cursor: grabbing;
}

.slide {
    display: none;
    opacity: 0;
    transition: opacity 0.5s ease-in-out;
}

.slide.active {
    display: block;
    opacity: 1;
}
.carousel > .slide .badge{
    color: #fff;
    background: #000;
    font-weight: 500;
    min-height: 30px;
    display: flex;
    align-items: center;
    padding-right: var(--space-3);
    padding-left: var(--space-3);
    border-radius: 15px;
}
.carousel > .slide > cite img.icon{
    margin-left: var(--space-2);
}
@media screen and (min-width : 651px){

    .carousel > .slide.active{
        display: grid;
        opacity: 1;
        transform: translateX(0);
    }
    .carousel > .slide{
        grid-template-columns: 1fr 4fr;
        background: var(--color-surface);
        position: relative;
    }
    .carousel > .slide > img.content{
        border-radius: var(--space-2);
        aspect-ratio: 1/1;
        object-fit: contain;
        grid-column: 1/-2;
        grid-row: 1/3;
        height: 100%;
    }
    .carousel > .slide > blockquote{
        font-size: 1.5rem;
        font-style: italic;
        grid-column: 2/3;
        grid-row: 1/2;
        height: max-content;
        position: relative;
    }
    .carousel > .slide > blockquote::before{
        content: '«';
        position: absolute;
        left: -1.5rem;
        transform: translate(0,-50%);
        font-size: 2rem;
        font-weight: 600;
    }
    .carousel > .slide > cite{
        display: flex;
        justify-content: flex-end;
        align-items: center;
        grid-column: 2/3;
        grid-row: 2/3;
        padding-right: var(--space-3);
    }
    .carousel > .slide .badge{
        position: absolute;
        top: 0;
        right: 0;
        transform: translate(15px,-50%);
    }
    .carousel > .slide > img.icon{
        grid-column: 2/3;
    }
}
@media screen and (max-width : 650px){
    .carousel blockquote{
        line-height: 1.1;
        padding-left: var(--space-2);
        padding-right: var(--space-2);
        margin: var(--space-3) 0 var(--space-2) 0;
    }
    .carousel cite{
        display: flex;
        align-items: center;
        justify-content: flex-end;
        text-align: right;
        line-height: 1;
    }
    .carousel .slide {
        position: relative;
    }
    .carousel .badge{
        position: absolute;
        top: 0;
        right: 0;
        transform: translate(0,-50%);
    }
}

/* hero */
#hero .gallery {
    display: flex;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
}
#hero .gallery > img{
    scroll-snap-align: start;
    min-width: 100%;
}
#hero article ul{
    list-style: none;
    padding-left: unset;
    margin-left: unset;
}
#hero article ul li {
    display: flex;
    align-items: center;
    gap: var(--space-2);
}
#hero h2,
#hero p{
    padding-bottom: 0.75em;
}
#hero ul{
    margin-bottom: 1rem;
}
@media screen and (max-width : 650px) {
    #hero h1,
    #hero h2,
    #hero p{
        padding-left: var(--space-3);
    }
}
@media screen and (min-width : 651px) {
    section#hero {
        margin: 0 auto;
        max-width: var(--breakpoint-xl);
        height: 90vh;
    }
    #hero {
        display: grid;
        grid-template-columns: 3fr 4fr;
        gap: var(--space-5);
    }
    #hero img{
        height: 100%;
        object-fit: contain;
    }
    section#hero article{
        max-width: var(--breakpoint-md);
        align-self: center;
    }
}

/* faq.json */
#faq p{
    margin-bottom: 1rem;
}
#faq details{
    position: relative;
    border: 1px solid var(--color-border);
    margin-bottom: var(--space-2);
    border-radius: var(--space-2);
    background: var(--color-surface);
}
details > summary {
    min-height: var(--button-size);
    font-weight: 500;
    letter-spacing: -0.5px;
    display: flex;
    align-items: center;
    padding-top: var(--space-1);
    padding-bottom: var(--space-1);
    padding-left: var(--space-2);
    padding-right: calc(var(--space-2) + 1.5rem);
    line-height: 1;
    position: relative;
}
#faq details[open] > summary::after{
    transform: scaleY(-1) translateY(50%);
}
#faq details > summary::after{
    content: "";
    width: 1.5rem;
    height: 1.5rem;
    background: url(../icon/arrow_head_top.svg);
    top: 50%;
    transform: translateY(-50%);
    right: var(--space-1);
    position: absolute;
    transition: 0.5s;
}
details > summary::after{
    content: "";
    display: block;
    position: absolute;
    top: 50%;
    transform: translate(0,-50%);
    right: 5px;
    width: 2rem;
    height: 2rem;
    background-image: url(asset_icon_placeholder.svg);
    background-position: center;
    background-repeat: no-repeat;
}
details[open] > summary {
    border-bottom: 1px solid var(--color-border);
}
details > div {
  padding: 0.5em var(--space-2);
  transition: all 0.3s ease;
}
@media screen and (max-width : 650px){
    details{
        border-radius: var(--space-3);
        margin-left: var(--space-2);
        margin-right: var(--space-2);
    }
}

/* contact.json */
#contact span[itemprop="openingHours"]{
    display: flex;
    min-height: var(--button-size);
    align-items: center;
    font-weight: 600;
}
#contact span[itemprop="address"]{
    display: flex;
    line-height: 1.1;
}
#contact > address {
    display: flex;
    flex-direction: column;
    gap: var(--space-2) var(--space-3);
    margin-top: var(--space-2);
}
#contact > address > a{
    display: flex;
    align-items: center;
    gap: var(--space-2);
    padding-right: var(--space-2);
    min-height: 30px;
    line-height: 1;
    padding-top: var(--space-2);
    padding-bottom: var(--space-2);
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    color: var(--color-primary);
}
#contact > address > a:has(img){
    padding-left: var(--space-1);
}
#contact > form{
    padding-left: var(--space-2);
    margin-top: var(--space-3);
    margin-bottom: var(--space-4);
}
#contact > form > h3{
    font-size: 1.5rem;
    line-height: 1.1;
    padding-left: var(--space-2);
    margin-bottom: var(--space-6);
}
#contact form .group{
    position: relative;
    display: flex;
    align-items: center;
    margin-top: 1.5rem;
    border-bottom: 1px solid var(--color-border);
}
#contact form .group-text > label,
#contact form .group > label{
    position: absolute;
    left: var(--space-3);
    top: -18px;
    font-size: 14px;
}
#contact form .group > input{
    width: 100%;
    min-width: 100%;
    min-height: var(--button-size);
    background: var(--color-surface);
    font-size: 17.5px;
    padding-left: var(--space-2);
    border: unset;
    border-radius: var(--space-2);
}
#contact form .group-text{
    position: relative;
    display: flex;
    align-items: center;
    margin-top: 1.5rem;
}
#contact form .group-text > textarea{
    width: 100%;
    min-width: 100%;
    background: var(--color-surface);
    border-radius: var(--space-2);
    font-size: 17.5px;
    padding-left: var(--space-2);
    padding-top: 6px;
    border: unset;
    min-height: 3rem;
    max-height: 10rem;
    resize: vertical;
}
#contact form .group-checkbox{
    position: relative;
    display: flex;
    flex-wrap: wrap;
    margin-top: 0.5rem;
    margin-bottom: 0.5rem;
}
#contact form .group-checkbox > div {
    display: flex;
    align-items: center;
    min-height: var(--button-size);
}
#contact form .group-checkbox > div > input{
    display: none;
}
#contact form .group-checkbox > div > input:checked + label::before{
    background: #000;
    box-shadow: 0 0 0 2px #fff inset;
}
#contact form .group-checkbox > div > label::before{
    content: "";
    display: block;
    position: absolute;
    left: 0;
    top: 50%;
    transform: translate(0,-50%);
    width: 1rem;
    height: 1rem;
    border-radius: 50%;
    background: #fff;
    border: 1px solid #000;
}
#contact form .group-checkbox > div > label{
    margin-left: 1.5rem;
    display: flex;
    align-items: center;
    gap: var(--space-2);
}
#contact form .group-checkbox > div > label a{
    color: var(--color-primary);
    text-decoration: underline;
}

#contact form > button{
    min-height: var(--button-size);
    font-size: 17.5px;
    padding-left: var(--space-2);
    padding-right: var(--space-2);
    color: var(--color-surface);
    background: var(--color-primary);
    border: unset;
    border-radius: var(--space-2);
}

@media screen and (min-width : 651px){
    #contact{
        display: grid;
        grid-template-columns: 2fr 3fr;
        gap: var(--space-3);
    }
    #contact > h2,
    #contact > p{
        grid-column: 1 / -1;
    }
    #contact form .group-half{
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: var(--space-2);
    }
    #contact > address > a {
        border-radius: var(--space-3);
    }
}

/* advantage.json */
#advantage > ul{
    display: grid;
    gap: var(--space-3);
    grid-template-columns: repeat(auto-fill , minmax(220px , 1fr));
    list-style: none;
    padding: unset;
}
#advantage > ul > li{
    border: 1px solid var(--color-border);
    background: var(--color-surface);
    border-radius: var(--space-3);
}
#advantage > ul > li > h3{
    padding-left: var(--space-2);
    padding-right: var(--space-2);
    padding-bottom: var(--space-3);
    line-height: 1;
    margin: unset;
}
#advantage > ul > li > p{
    padding-left: var(--space-2);
    padding-right: var(--space-2);
    line-height: 1;
    margin: 0 0 var(--space-2) 0;
    font-size: var(--font-size-xs);
}
@media screen and (max-width : 650px){
    #advantage > ul{
        padding-right: var(--space-2);
        margin-left: var(--space-3);
    }
}

/* about.json */
#about > h2{
    height: min-content;
}
#about > img + span{
    text-align: right;
    display: flex;
    padding-top: 0.5em;
    padding-right: var(--space-2);
    padding-left: var(--space-2);
}
@media screen and (min-width : 651px){
    #about {
        display: grid;
        grid-template-columns: 2fr 3fr;
        grid-row: min-content 1fr 1fr 1fr;
        gap: var(--space-2) var(--space-3);
    }
    #about > img {
        grid-column: 2 / -1;
        grid-row: 1 / 4;
        border-radius: var(--space-3);
    }
    #about > img + span{
        grid-column: 1 / -1;
        grid-row: 4/ 5;
    }
    div.table-scroll {
        grid-row: 3 / 4;
        grid-column: 1 / 2;
    }
}
@media screen and (max-width : 650px){
    #about{
        display: block;
    }
}
/* key-benefits.json */
#key-benefits > .grid{
    margin-top: 1rem;
}
#key-benefits > .grid > div a{
    display: flex;
    align-items: center;
    min-height: var(--button-size);
    position: relative;
    margin-bottom: var(--space-3);
}
#key-benefits > .grid > div a > span{
    line-height: 1.1;
    color: var(--color-primary);
    position: relative;
    display: flex;
    align-items: center;
    text-decoration: underline;
}
#key-benefits > .grid > div p{
    margin-bottom: var(--space-3);
    line-height: 1;
    font-size: var(--font-size-xs);
}
@media screen and (min-width : 651px) {
    #key-benefits > .grid{
        counter-reset: benefits;
        margin-bottom: var(--space-6);
        position: relative;
        display: grid;
        grid-template-columns: repeat(5 , 1fr);
        gap: var(--space-2);
    }
    #key-benefits > .grid::after{
        content: "";
        position: absolute;
        bottom: -10px;
        width: 100%;
        height: 2px;
        background: #000;
    }
    #key-benefits > .grid > div{
        position: relative;
        background: var(--color-surface);
        border: 1px solid var(--color-border);
        border-radius: var(--space-3);
        margin-bottom: var(--space-2);
    }
    #key-benefits > .grid > div h3{
        line-height: 1;
        margin-bottom: var(--space-3);
    }
    
    #key-benefits > .grid > div h3,
    #key-benefits > .grid > div p,
    #key-benefits > .grid > div a{
        padding-left: var(--space-2);
        padding-right: var(--space-1);
    }
    #key-benefits > .grid > div::before{
        counter-increment: benefits;
        content: counter(benefits);
        position: absolute;
        display: flex;
        align-items: center;
        justify-content: center;
        font-weight: 600;
        right: -1rem;
        bottom: calc(-16px - 2rem);
        width: 2rem;
        height: 2rem;
        border-radius: 50%;
        z-index: 1;
    }
    #key-benefits > .grid > div:last-of-type::before,
    #key-benefits > .grid > div:last-of-type::after{
        display: none;
    }
}
@media screen and (max-width : 650px){
    #key-benefits > .grid {
        counter-reset: benefits;
        position: relative;
        margin-left: 3rem;
    }
    #key-benefits > .grid::before{
        content: "";
        position: absolute;
        left: -10px;
        width: 2px;
        height: 100%;
        background: #000;
    }
    #key-benefits > .grid > div{
        position: relative;
    }
    #key-benefits > .grid > div::before{
        position: absolute;
        counter-increment: benefits;
        content: counter(benefits);
        display: flex;
        align-items: center;
        justify-content: center;
        font-weight: 600;
        bottom: -1rem;
        left: calc(-12px - 2rem);
        width: 2rem;
        height: 2rem;
        border-radius: 50%;
        z-index: 1;
    }
    #key-benefits > .grid > div::after{
        content: "➤";
        position: absolute;
        left: -1rem;
        bottom: calc(-1rem);
        transform: rotate(90deg);
    }
    #key-benefits > .grid > div:last-of-type::before,
    #key-benefits > .grid > div:last-of-type::after{
        display: none;
    }
}
/* price.json */
#price table {
    border: 1px solid #0004;
}
#price table thead tr > th,
#price table tbody tr > td{
    border: unset;
    min-height: max-content;
    height: 32px;
    padding-left: var(--space-3);
    padding-top: var(--space-1);
    padding-bottom: var(--space-1);
    padding-right: var(--space-3);
}
#price table thead tr > th > span,
#price table tbody tr > td > span{
    display: flex;
    align-items: center;
    min-height: var(--button-size);
}
#price table thead tr th{
    background: #0004;
}
#price table > tbody > tr{
    border-bottom: 1px solid #0004;
}
@media screen and (max-width : 650px) {
    #price .table-scroll ,
    #price table{width: 100%;}
}
/* product.json */
#product .grid{
    display: grid;
    margin-top: var(--space-3);
    grid-template-columns: repeat(auto-fill , minmax(220px , 1fr));
    gap: var(--space-3);
}
#product .grid > div{
    border-radius: var(--space-2);
    background: var(--color-surface);
    padding-bottom: var(--space-2);
}
#product .grid > div > h3 {
    line-height: 1.1;
    padding-top: var(--space-1);
    padding-bottom: var(--space-2);
}
#product .grid > div > p{
    line-height: 1;
    padding-bottom: 1rem;
    font-size: var(--font-size-xs);
}
#product .grid > div > h3,
#product .grid > div > p,
#product .grid > div > a > span,
#product .grid > div > a{
    display: flex;
    padding-left: var(--space-2);
    padding-right: var(--space-1);
}
#product .grid > div > a > span{
    text-transform: uppercase;
    color: var(--color-primary);
    letter-spacing: -1px;
}
@media screen and (min-width : 651px){
    #product .grid > div > img{
        border-radius: var(--space-2);
    }
}
/* team.json */
#team > article > h2{
    margin-bottom: var(--space-3);
}
#team .grid > div {
    background: var(--color-surface);
    border-radius: var(--space-2);
    display: grid;
    grid-template-columns: 5rem 1fr;
    padding-bottom: var(--space-1);
}
#team .grid > div > img{
    grid-column: 1 / 2;
    grid-row: 1 / 4;
    aspect-ratio: 1/1;
    height: 100%;
}
#team .grid > div > h3{
    padding-top: var(--space-2);
    line-height: 1.1;
    margin-bottom: var(--space-2);
}
#team .grid > div > a{
    color: var(--color-primary);
    text-decoration: underline;
}
@media screen and (min-width : 651px){
    #team {
        display: grid;
        grid-template-columns: 2fr 3fr;
        grid-row: min-content 1fr 1fr;
        gap: var(--space-3);
    }
    #team > img{
        grid-row: 1 / 3;
        grid-column: 2 / -1;
        border-radius: var(--space-2);
    }
    #team .grid{
        margin-top: var(--space-3);
        display: grid;
        grid-column: 1/-1;
        grid-template-columns: repeat(3,1fr);
        gap: var(--space-3);
    }
    #team > article{
        grid-column: 1/2;
        grid-row: 1/2;
    }
    #team > p.postscription{
        grid-column: 1/-1;
        margin-top: var(--space-3);
    }
}
@media screen and (max-width: 650px){
    #team > article > h2,
    #team > article > p{
        padding-left: var(--space-2);
    }
    #team > article > p{
        margin-bottom: var(--space-3);
    }
    #team .grid > div{
        margin-bottom: var(--space-2);
        border-bottom: 1px solid var(--color-border);
        padding-bottom: var(--space-2);
    }
}
/* testimonial.json */
#testimonial .carousel .slide{
    margin-bottom: var(--space-3);
    border-radius: var(--space-2);
}
#testimonial a.cta{
    margin-top: var(--space-3);
    margin-bottom: var(--space-4);
    background: var(--color-primary);
    color: #FFF;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 500;
    min-height: var(--button-size);
}
@media screen and (max-width : 650px){
    #testimonial a.cta{
        width:100%;
    }
}
@media screen and (min-width: 651px){
    #testimonial a.cta{
        width: max-content;
        border-radius: var(--space-2);
        padding-left: var(--space-3);
        padding-right: var(--space-3);
    }
}