/* ============================================

   OURA RING PRESENTATION – TABLET 1280×800

   ============================================ */

:root {

    --radius: 50px;

    --slide-h: 800px;

    --slide-w: 1280px;

    --transition-fast: 150ms ease;

    --transition-normal: 250ms ease;

    --transition-slow: 400ms ease;

    --white: #e6e4e2;

}



@font-face {

    font-display: swap;

    font-family: 'Akkurat';

    font-style: normal;

    font-weight: 400;

    src: url('../fonts/Akkurat-Regular.ttf') format('truetype');

}



@font-face {

    font-display: swap;

    font-family: 'Akkurat';

    font-style: normal;

    font-weight: 700;

    src: url('../fonts/Akkurat-Bold.ttf') format('truetype');

}



@font-face {

    font-display: swap;

    font-family: 'Akkurat Mono';

    font-style: normal;

    font-weight: 400;

    src: url('../fonts/Akkurat-Mono.ttf') format('truetype'),

        url('../fonts/Akkurat-Mono.otf') format('opentype');

}



@font-face {

    font-display: swap;

    font-family: 'Inter';

    font-style: normal;

    font-weight: 400;

    src: url('../fonts/Inter-Regular.ttf') format('truetype');

}



@font-face {

    font-display: swap;

    font-family: 'Inter';

    font-style: normal;

    font-weight: 700;

    src: url('../fonts/Inter-Bold.ttf') format('truetype');

}





@font-face {

    font-display: swap;

    font-family: 'Editorial New';

    font-style: normal;

    font-weight: 300;

    src: url('../fonts/EditorialNew-Light.woff2') format('woff2'),

        url('../fonts/EditorialNew-Light.woff') format('woff'),

        url('../fonts/EditorialNew-Light.ttf') format('truetype'),

        url('../fonts/EditorialNew-Light.otf') format('opentype');

}



*,

*::before,

*::after {

    box-sizing: border-box;

    margin: 0;

    padding: 0;

}



html,

body {

    -moz-osx-font-smoothing: grayscale;

    -webkit-font-smoothing: antialiased;

    background: #19191c;

    height: 100%;

    overflow: hidden;

    width: 100%;

    margin: 0;

}



body {

    color: #222;

    cursor: default;

    font-family: 'Akkurat', 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;

    font-weight: 400;

    line-height: 1.5;

}



button {

    font-family: 'Akkurat', 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;

}



/* ============================================

   Popup

   ============================================ */

.popup {

    height: calc(100% - 82px - 12px);

    left: 12px;

    top: 82px;

    width: calc(100% - 24px);

}



.popup .popup-close {

    display: block;

    height: 80px;

    width: 80px;

    position: absolute;

    z-index: 10;

    -webkit-transform: translateZ(0);

    transform: translateZ(0);

    cursor: pointer;

    touch-action: manipulation;

    right: -5px;

    top: -5px;

    background: transparent;

    border: none;

}

.popup .popup-close::after {

    content: '';

    display: block;

    width: 40px;

    height: 40px;

    background: #e6e4e2 url('../images/icon-close.svg') center / 10px no-repeat;

    border-radius: 50%;

    position: absolute;

    top: 50%;

    left: 50%;

    transform: translate(-50%, -50%);

}



.popup .popup-close.b-white::after {

    background-color: #fff;

}



.popup-inner {

    background: #fff;

    border-radius: 12px;

}



.popup.popup-compare .col-inner {

    height: calc(100% - 60px);

    margin: 30px 0;

    padding: 0 24px;

}



.popup.popup-compare .col-6:last-child .col-inner {

    border-left: 1px solid #E6E4E2;

}



.popup.popup-compare .p-image {

    background: #F3F1F0;

    border-radius: 12px;

    height: 233px;

    width: 100%;

}



.popup.popup-compare .product-card__specs {

    margin-top: 40px;

}



.popup.popup-compare .product-card__specs .spec-row {

    border: none;

    padding: 13px 0;

}



.popup.popup-compare .product-card__specs .spec-row__label {

    width: 137px;

}



#popup-features .popup-inner {

    padding: 12px;

}

#popup-sizing-video {
    left: 0;
    top: 82px;
    width: 100%;
    height: calc(100% - 82px);
    background: #fff;
    border-radius: 0;
    pointer-events: none;
}

#popup-sizing-video .popup-inner {
    border-radius: 0;
}

#popup-sizing-video video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 0;
}



.popup-features .popup-close {

    right: 4px;
    top: 4px;

}



.popup .tabs {

    background: var(--white);

    border-radius: 12px;

    height: 136px;

}



/* ============================================

   Navigation Bar

   ============================================ */

.nav-bar {

    align-items: center;

    display: flex;

    height: var(--nav-height);

    justify-content: center;

    left: 0;

    padding: 0 var(--space-6);

    position: absolute;

    top: 0;

    width: 100%;

    z-index: 100;

}



.nav-bar__links {

    align-items: center;

    display: flex;

    gap: 40px;

    margin-top: 25px;

}



.nav-btn {

    background: transparent;

    border: none;

    border-radius: 8px;

    color: #19191C;

    cursor: pointer;

    font-size: 14px;

    letter-spacing: 0.05em;

    line-height: 1.2;

    padding: 9px 16px 7px 16px;

    text-transform: uppercase;

    transition: background-color var(--transition-fast);

    white-space: nowrap;

}



.nav-btn:hover {

    background-color: rgba(255, 255, 255, 0.5);

}



.nav-btn--active {

    background-color: #fff;

}



.nav-btn--language {

    border: 1px solid var(--color-text-dark-gray);

    border-radius: var(--radius-pill);

    color: var(--color-text-dark-gray);

    padding: var(--space-3) var(--space-5);

    position: absolute;

    right: var(--space-6);

    top: 50%;

    transform: translateY(-50%);

}



.nav-btn--language:hover {

    background-color: rgba(0, 0, 0, 0.05);

}



.btn-cont {

    padding: 8px 10px 15px 17px;

    right: 12px;

    top: 12px;

}



/* ============================================

   Content Area

   ============================================ */

.content {

    padding-top: 135px;

}



.content .text {

    padding-left: 50px;

}



.content .text .subtext {

    font-size: 20px;

    letter-spacing: -0.03em;

    line-height: 1.3;

    margin-top: 15px;

}

:lang(fr) .content .text .subtext {
    font-size: 18px;
}


.content .text .subtext-small {
    max-width: 375px;
    font-size: 16px;

    margin-top: 15px;

}



.content .spec-row__value p:nth-child(2) {

    padding-top: 10px;

}



.content .col-right {

    margin-right: 66px;

}

:lang(fr) #science .h1 {
    font-size: 57px;
}

/* ============================================

   Accordion

   ============================================ */

#accordion .desc {

    height: 0;

    overflow: hidden;

}



#accordion .desc .cntn {

    padding-top: 30px;

}



#accordion .arrow {

    background: url('../images/icon-arrows.svg');

    background-repeat: no-repeat;

    background-size: contain;

    display: none;

    height: 16px;

    margin-right: 22px;

    width: 16px;

}



#accordion .accordion-item {

    margin-bottom: 12px;

}



.product-title {

    font-size: 48px;

    font-weight: 400;

    letter-spacing: -0.04em;

    line-height: 1.2;

}

.product-title span {
    font-size: 16px;
    font-weight: 400;
    letter-spacing: -0.03em;
    display: none;
}

:lang(en-us) .product-title span {
    display: inline
}

.acc-head:not(.active) .product-title span {
    display: none;
}

.acc-head {

    cursor: pointer;

    touch-action: manipulation;

}

.acc-head * {

    pointer-events: none;

}

.content .acc-head:not(.active) .product-title {

    opacity: 0.5;

}



#accordion .acc-head:not(.active) .arrow {

    display: inline-block;

}



.content .white-bg {

    background: #fff;

    border-radius: 12px;

    padding: 18px 16px;

}



/* ============================================

   Spec Rows

   ============================================ */

.spec-row {

    border-bottom: 1px solid #E6E4E2;

    display: flex;

    gap: 24px;

    padding: 8px 0;

}



.spec-row:last-child {

    border-bottom: none;

}



.spec-row__label {

    color: #484950;

    flex-shrink: 0;

    font-size: 14px;

    font-weight: 400;

    letter-spacing: 0.05em;

    line-height: 21px;

    text-transform: uppercase;

    width: 160px;

}

.product-card__specs .spec-starting-price {
    display: none;
}

:lang(en-us) .product-card__specs .spec-starting-price {
    display: flex;
}



.version-r2-update .spec-row__label {

    width: 150px;

}



/* ============================================

   Oura Ring Buttons

   ============================================ */

#oura-ring .btn-compare {

    background: var(--white);

    border: none;

    border-radius: 12px;

    font-size: 16px;

    font-weight: 400;

    letter-spacing: -0.03em;

    padding: 13px 18px;

    width: 100%;

}



#oura-ring .btn-video {

    -webkit-backdrop-filter: blur(10px);

    backdrop-filter: blur(10px);

    background: rgba(255, 255, 255, 0.13);

    border: none;

    border-radius: 12px;

    bottom: 25px;

    font-size: 16px;

    font-weight: 400;

    left: 16px;

    letter-spacing: -0.03em;

    padding: 13px 18px;

    position: absolute;

    width: calc(100% - 32px);

}



#oura-ring .btn-compare:after {

    background: url('../images/icon-arrows.svg');

    background-repeat: no-repeat;

    background-size: contain;

    content: "";

    height: 16px;

    position: absolute;

    right: 18px;

    top: 50%;

    transform: translateY(-50%);

    width: 16px;

}



#oura-ring .btn-video:after {

    background: url('../images/icon-play.svg');

    background-repeat: no-repeat;

    background-size: contain;

    content: "";

    height: 18px;

    position: absolute;

    right: 18px;

    top: 50%;

    transform: translateY(-50%);

    width: 18px;

}



/* ============================================

   Version R2 Update Layout

   ============================================ */

.version-r2-update .col-7 {

    width: 417px;

}



.version-r2-update .col-5 {

    width: 254px;

}



.version-r2-update .video-card .img-video-card {

    border-radius: 12px;

}



.spec-row__value {

    font-size: 16px;

    font-weight: 400;

    letter-spacing: -0.03em;

    line-height: 1.2;

}



/* ============================================

   Page-specific Text Widths

   ============================================ */

.oura-ring-active .content .text .subtext {

    max-width: 375px;

}

#oura-app .content .text .subtext {

    max-width: 375px;
    font-size: 20px;

}

:lang(de) #oura-app .headline.h1,
:lang(es) #oura-app .headline.h1 {
    font-size: 48px !important;
}

:lang(it) #oura-app .headline.h1 {
    font-size: 55px !important;
}

:lang(fr) #oura-app .headline.h1 {
    font-size: 45px !important;
}

:lang(jp) #oura-app .headline.h1.oura-app-headline {
    font-size: 47px !important;
}

/* ============================================

   Oura Ring Section Background

   ============================================ */

#oura-ring {

    background-image: url(../images/oura-rosegold.png);

    background-position: bottom left;

    background-size: cover;

    position: relative;

    z-index: 1;

}



#oura-ring::before {

    background-image: url(../images/oura-gold.png);

    background-position: bottom left;

    background-size: cover;

    content: "";

    height: 100%;

    left: 0;

    opacity: 0;

    position: absolute;

    top: 0;

    transition: opacity 0.5s ease-in-out;

    width: 100%;

    z-index: -1;

}



#oura-ring.bg-oura-gold::before {

    opacity: 1;

}



#oura-ring .version-r2-update {

    width: 65%;

}



#oura-ring .version-r2-update .white-bg {

    height: calc(100% - 55px);

}



/* ============================================

   Oura App Section

   ============================================ */

#oura-app .col-6-text {

    width: 44%;

}



#oura-app .col-6-cards {

    width: 59%;

}

#oura-app .col-6-cards .flex .col-6 {
    width: 331px;
}

#oura-app .col-6-cards .flex .col-6:first-child {
    margin-right: 12px;
}

#oura-app .tab-content .col-6-text {

    width: 496px;

}



#oura-app .tab-content .col-6-cards {

    width: 716px;

}



#oura-app .col-6-cards button {

    background: transparent;

    border: none;

    bottom: 10px;

    cursor: pointer;

    font-size: 16px;

    height: 68px;

    letter-spacing: -0.03em;

    width: 100%;

}

#oura-app .col-6-cards button span {
    max-width: 70%;
    display: block;
    margin: 0 auto;
}


#oura-app .col-6-cards button.left-12 {

    left: 0px;

}



#oura-app .card-title {
    font-size: 34px;

    left: 50%;

    letter-spacing: -0.03em;

    line-height: 1.2;

    top: calc(50% - 25px);

    transform: translate(-50%, -50%);

    width: 230px;

    font-family: 'Editorial New';

}

#oura-app .nomad-subway {
    bottom: -20px;
    left: -20px;
}

:lang(it) #oura-app .nomad-subway {
    bottom: -50px;
}



/* ============================================

   Science & Research

   ============================================ */

#science {

    background: url(../images/science-bg.jpg) no-repeat;

    background-position: bottom left;

    background-size: 545px 681px;

}



#science .col-6-text {

    width: 47%;

}



#science .col-6-cards {

    width: 51%;

}



#science .subtext {

    max-width: 400px;

}

:lang(de) #science .headline.h1,
:lang(es) #science .headline.h1 {

    font-size: 48px !important;

}

:lang(it) #science .headline.h1 {

    font-size: 55px !important;

}

:lang(de) #science .grid-section h4,
:lang(es) #science .grid-section h4 {

    font-size: 22px;

}



.grid-section {

    display: grid;

    gap: 12px;

    grid-template-columns: 1fr 1fr;

    grid-template-rows: 391px 91px 110px;

    height: 100%;

}



.grid-section .card {

    border-radius: 18px;

    overflow: hidden;

    position: relative;

}



.grid-section .card-image {

    background-position: center;

    background-size: cover;

    color: #fff;

}



.grid-section .large-left {

    background-image: url(../images/accurate-by-design.jpg);

    grid-row: 1 / span 2;

    height: 512px;

}



.grid-section .large-right {

    background-image: url(../images/medical-advisory.jpg);

    grid-row: 1;

}



.grid-section .large-right p {

    width: 243px;

}



.grid-section .card.h-110 {

    height: 110px;

}



.grid-section .card.h-91 {

    height: 91px;

}



.grid-section .card.h-91.b1 {

    margin-top: 19px;

}



.grid-section .overlay {

    background: linear-gradient(to top,

            rgba(0, 0, 0, 0.35),

            rgba(0, 0, 0, 0));

    bottom: 0;

    left: 0;

    padding: 20px;

    position: absolute;

    width: 100%;

}



.grid-section .overlay p {

    font-size: 16px;

    line-height: 1.3;

    margin: 0;

}



.grid-section .stat {

    background: #3a3d42;

    color: #fff;

    display: flex;

    flex-direction: column;

    justify-content: center;

    padding: 22px;

}



.grid-section h4 {

    font-size: 24px;

    font-weight: 400;

    letter-spacing: -0.03em;

    line-height: 1.2;

    margin: 0 0 6px;

}



.grid-section .stat p {

    font-size: 16px;

    letter-spacing: -0.03em;

    line-height: 1.1;

    margin: 0;

}



/* ============================================

   Sizing

   ============================================ */

#sizing .inner {

    padding: 0 12px;

}



#sizing .flex {

    gap: 12px;

}



#sizing .card {

    border-radius: 12px;

    overflow: hidden;

    padding: 20px;

    background-image: url(../images/sizes-bg.jpg);

    background-position: center;

    background-size: cover;

    height: 518px;

}



#sizing .card-title {

    font-size: 24px;

    font-weight: 400;

    letter-spacing: -0.03em;

    line-height: 1.2;

    margin: 0 0 10px;

}



#sizing .card-subtext {

    width: 271px;

    font-size: 16px;

    font-weight: 400;

    letter-spacing: -0.03em;

    line-height: 1.1;

    margin: 0;

}



#sizing .bottom-text {

    color: #19191C;

    padding: 40px 0 0 20px;

    gap: 0;

}



#sizing .bottom-text .label {

    font-family: 'Akkurat Mono';

    font-size: 14px;

    font-weight: 400;

    letter-spacing: 0.05em;

    line-height: 1.1;

    margin: 0 0 12px 0;

}



#sizing .bottom-text p {

    line-height: 1.2;

}



#sizing .col-8 .card-text {

    margin-top: 28px;

    margin-left: -12px;

}

:lang(de) #sizing .col-8 .card-text {
    margin-left: 20px;
}

/* ============================================

   Home & Explore Navigation Overrides

   ============================================ */

.home-active .nav-bar,

.explore-active .nav-bar__links {

    display: none;

}



.explore-active .btn-cont:before {

    background: url(../images/btn-cont-left.png);

    background-size: 100% 100%;

    background-repeat: no-repeat;

    content: "";

    display: block;

    height: 63px;

    left: -1px;

    position: absolute;

    top: -1px;

    width: 45px;

}



.explore-active .btn-cont:after {

    background: #e6e4e2;

    content: "";

    display: block;

    height: 63px;

    left: 43px;

    position: absolute;

    top: -2px;

    width: calc(100% + 2px);

}



/* ============================================

   Language Sidebar

   ============================================ */

.lang-btn,

.language-sidebar__close-pill {

    background: transparent;

    border: 1px solid #191919;

    color: #484950;

    font-size: 14px;

    letter-spacing: 0.05em;

    padding: 12px 18px;

}



.language-sidebar {

    background-color: var(--white);

    border-radius: 24px;

    height: calc(100% - 24px);

    padding: 10px;

    position: fixed;

    right: 12px;

    top: 12px;

    transform: translateX(calc(100% + 12px));

    transition: transform var(--transition-normal);

    width: 357px;

    z-index: 300;

}



.language-sidebar.is-open {

    transform: translateX(0);

}



.language-sidebar__header {

    display: flex;

    justify-content: flex-end;

}



.language-sidebar__close-pill svg {

    flex-shrink: 0;

    height: 12px;

    width: 12px;

}



.language-sidebar__title {

    font-size: 28px;

    font-weight: 400;

    line-height: 1.4;

    margin: 30px 0;

}



.language-sidebar__list {

    display: flex;

    flex-direction: column;

}



.language-sidebar__list li {

    list-style: none;

}



.language-option {

    align-items: center;

    background-color: transparent;

    border: none;

    border-radius: 12px;

    cursor: pointer;

    display: flex;

    font-size: 20px;

    justify-content: space-between;

    line-height: 1.2;

    margin-bottom: 10px;

    padding: 12px;

    width: 100%;

}



.language-option--active {

    background-color: #fff;

}



.language-option--active::after {

    content: '✓';

    font-style: italic;

    font-weight: 700;

}



/* ============================================

   Scrim / Overlay

   ============================================ */

.scrim {

    -webkit-backdrop-filter: blur(10px);

    backdrop-filter: blur(10px);

    background-color: rgba(0, 0, 0, 0.5);

    inset: 0;

    opacity: 0;

    pointer-events: none;

    position: fixed;

    transition: opacity var(--transition-normal);

    z-index: 250;

}



.scrim.is-visible {

    opacity: 1;

    pointer-events: auto;

}



/* ============================================

   Presentation Wrapper

   ============================================ */

.presentation-wrapper {

    background: #e6e4e2;

    height: var(--slide-h);

    width: var(--slide-w);

    position: fixed;

    top: 50%;

    left: 50%;

    /* transform (translate + scale) is set by responsive-scale.js so this
       fixed 1280x800 canvas fits any screen size, desktop or mobile.
       Keep the default (center) transform-origin - do NOT set it to 0 0,
       or scaling will pivot from the corner instead of the center and
       push the canvas off-screen on small viewports. */

}

/* On mobile, responsive-scale.js adds this class to <html> so the page can
   scroll to reveal whatever doesn't fit in the viewport, instead of
   clipping it. The wrapper switches from a fixed, centered box to a
   normal-flow one sized by the `zoom` the script applies, and the page
   scrolls (html is the actual scrolling element, not body). */

html.is-mobile-canvas,

html.is-mobile-canvas body {

    height: auto;

    overflow-x: hidden;

    overflow-y: auto;

}

html.is-mobile-canvas body {

    display: flex;

    justify-content: center;

    align-items: flex-start;

    min-height: 100%;

}

html.is-mobile-canvas .presentation-wrapper {

    position: relative;

    top: auto;

    left: auto;

    transform: none;

}



.presentation {

    display: flex;

    height: var(--slide-h);

    transition: var(--transition-slide);

    width: max-content;

    will-change: transform;

}



/* ============================================

   Home Section

   ============================================ */

.img-oura {

    bottom: 20px;

}



#home {

    background: #3A322F;

    background: linear-gradient(203deg, rgba(58, 50, 47, 1) 0%, rgba(121, 106, 104, 1) 50%, rgba(188, 179, 179, 1) 100%);

}



#home .button {

    background-color: #fff;

    color: #000;

    font-size: 24px;

    letter-spacing: -0.03em;

    line-height: 150%;

    padding: 12px 24px;

    right: 132px;
    border: 0;
}

#home .logo-oura {
    top: 366px;
    left: 61px;
}



/* ============================================

   Home → Explore Transition

   ============================================ */

#home .button {
    cursor: pointer;
    text-decoration: none;
}

#home .button,
#home .z2,
#home .img-oura {
    will-change: opacity, transform;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
}

#explore .card {
    will-change: clip-path;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
}

.page-section {
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
}

.popup {
    will-change: opacity;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
}

#oura-app .content,
#oura-app .img-app-hero,
#oura-app .nomad-subway {
    will-change: opacity;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
}

.img-app-hero {
    cursor: pointer;
}

.app-card {
    will-change: clip-path;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    width: 331px;
    cursor: pointer;
}

.app-card img {
    width: 100%;
}

/* ---- Loader ---- */

#loader {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.6);
    -webkit-backdrop-filter: blur(20px);
    backdrop-filter: blur(20px);
    transition: opacity 0.6s ease;
}

#loader.loaded {
    opacity: 0;
    pointer-events: none;
}

#loader .spinner {
    width: 40px;
    height: 40px;
    border: 3px solid #e6e4e2;
    border-top-color: #222;
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
}

@keyframes spin {
    to {
        transform: rotate(360deg);
    }
}

/* Transition interstitial: white background overlay */

#transition-screen {
    background: #fff;
    display: none;
    height: 100%;
    left: 0;
    position: absolute;
    top: 0;
    width: 100%;
    z-index: 2;
}

/* Hero ring needs higher z-index during animation */

#home .z2 {
    position: relative;
    z-index: 3;
}

/* Button must stay above ring for clickability */

#home .button {
    z-index: 5;
}

@media (prefers-reduced-motion: reduce) {

    #home .button,
    #home .z2,
    #home .img-oura,
    #explore .card,
    #transition-screen {
        transition: none !important;
        animation: none !important;
        will-change: auto;
    }

}

/* ============================================

   Explore Section

   ============================================ */

#explore .grid-container {

    background-color: var(--white);

    display: grid;

    gap: 12px;

    grid-template-columns: 1fr 1.2fr 1fr;

    grid-template-rows: 1fr 1fr;

    height: 100%;

    padding: 12px;

}



#explore .card {

    align-items: flex-end;

    background-color: #333;

    border-radius: 12px;

    display: flex;

    overflow: hidden;

    padding: 16px 16px 12px 16px;

}



#explore .card-1 {

    background-image: url(../images/solo.jpg);

    background-position: center;

    background-size: cover;

    grid-area: 1 / 1 / 2 / 2;

}



#explore .card-2 {

    background-image: url(../images/science-and-research.jpg);

    background-position: center;

    background-size: cover;

    grid-area: 2 / 1 / 3 / 2;

}



#explore .card-middle {

    background-image: url(../images/oura-app.jpg);

    background-position: center;

    background-size: cover;

    grid-area: 1 / 2 / 3 / 3;

    width: 516px;

}



#explore .card-right {

    background-image: url(../images/sizing.jpg);

    background-position: center;

    background-size: cover;

    grid-area: 1 / 3 / 3 / 4;

}



#explore .content h3 {

    background-image: url(../images/chevron.svg);

    background-position: right center;

    background-repeat: no-repeat;

}

:lang(fr) #explore .content h3,
:lang(fr-ca) #explore .content h3,
:lang(it) #explore .content h3 {
    font-size: 19px;
}

#explore .label {

    font-size: 14px;

    letter-spacing: 0.05em;

    padding-bottom: 2px;

}



#explore h3 {

    font-size: 20px;

    font-weight: 400;

    letter-spacing: -0.03em;

}



/* ============================================

   Tabs (Popup Features)

   ============================================ */

.tabs {

    display: flex;

    gap: 30px;

}



.tabs .tab {

    background: transparent;

    border: none;

    border-radius: 24px;

    cursor: pointer;

    font-size: 16px;

    height: 81px;

    letter-spacing: -0.03em;

    transition: background-color var(--transition-fast), color var(--transition-fast);

    width: 160px;

}



.tabs .tab:hover {

    background-color: rgba(0, 0, 0, 0.05);

}



.tabs .tab.active {

    background-color: #484950;

    color: #fff;

}



.tabs .tab .tab-icon {

    height: 26px;

    margin-bottom: 5px;

}



.tabs .tab.active img {

    filter: invert(1);

}



.tab-content {

    height: calc(100% - 150px);

    margin-top: 12px;

    width: 100%;

    position: relative;

}



.tab-content .text {

    padding-top: 20px;

}



.tab-content .subtext {

    font-size: 18px;

    line-height: 1.2;

    max-width: 347px;

    padding-top: 25px;
    letter-spacing: -0.03em;

}

#panel-activity .subtext {
    max-width: 363px;
}

#panel-stress .subtext {
    max-width: 317px;
}

#panel-womens-health .subtext {
    max-width: 340px;
}


.tab-content ul {

    margin-top: 26px;

}



.tab-content li {

    font-size: 18px;

    letter-spacing: -0.03em;

    line-height: 1;

    margin-bottom: 15px;

}



.tab-content li .feature-icon {

    height: 24px;

    margin-right: 13px;

    width: 24px;

}



.tab-content .small {

    font-size: 14px;

    letter-spacing: -0.03em;

    line-height: 1;

    margin-top: 17px;

}



.tab-content .col-right img {

    border-radius: 12px;

    display: block;

    height: 100%;

    object-fit: cover;

    width: 100%;

}



.tab-panel {

    display: none;

    padding-left: 20px;

}



.tab-panel.active {

    display: block;

}