/* IQOS Free Demo test landing — shared styles (EN/AR, LTR/RTL). */

:root {
    --dark: #1c1c21;
    --dark-2: #141417;
    --slate: #34303d;
    --soft-white: #fffdfb;
    --light-grey: #f4f2ef;
    --turquoise: #00c3d0;
    --text-on-dark: #ffffff;
    --text-muted: #b8b6bc;
    --card-collapsed: rgba(255, 255, 255, 0.14);
    --card-expanded: rgba(255, 255, 255, 0.38);
    --radius-card: 12px;
    --radius-section: 32px;
}

@font-face {
    font-family: 'IQOS';
    src: url('/assets/landing/fonts/IQOSW04-Regular.woff2') format('woff2');
    font-weight: 400;
    font-display: swap;
}

@font-face {
    font-family: 'IQOS';
    src: url('/assets/landing/fonts/IQOSW04-Bold.woff2') format('woff2');
    font-weight: 700;
    font-display: swap;
}

@font-face {
    font-family: 'IQOS Sans Arabic';
    src: url('/assets/landing/fonts/IQOSSansArabic-Light.ttf') format('truetype');
    font-weight: 300;
    font-display: swap;
}

@font-face {
    font-family: 'IQOS Sans Arabic';
    src: url('/assets/landing/fonts/IQOSSansArabic-Regular.ttf') format('truetype');
    font-weight: 400;
    font-display: swap;
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

body {
    font-family: 'IQOS', 'Segoe UI', Tahoma, Arial, sans-serif;
    background: var(--soft-white);
    color: var(--dark);
    font-size: 16px;
    line-height: 1.5;
}

html[lang="ar"] body {
    font-family: 'IQOS Sans Arabic', 'IQOS', 'Segoe UI', Tahoma, Arial, sans-serif;
}

img {
    max-width: 100%;
    display: block;
}

.container {
    width: 100%;
    max-width: 1120px;
    margin-inline: auto;
    padding-inline: 20px;
}

/* ---------- Header ---------- */

.site-header {
    position: sticky;
    top: 0;
    z-index: 50;
    background: var(--soft-white);
    border-bottom: 1px solid rgba(0, 0, 0, 0.06);
}

.site-header__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 64px;
}

.site-header__logo img {
    height: 26px;
    width: auto;
}

.btn {
    display: inline-block;
    border: 0;
    cursor: pointer;
    text-decoration: none;
    text-align: center;
    font-family: inherit;
    font-size: 16px;
    font-weight: 400;
    border-radius: 999px;
    padding: 12px 28px;
    transition: opacity 0.2s ease, transform 0.2s ease;
}

.btn:hover {
    opacity: 0.85;
}

.btn--outline {
    background: transparent;
    color: var(--dark);
    border: 1px solid var(--dark);
    padding: 9px 22px;
    font-size: 15px;
}

.btn--light {
    background: var(--soft-white);
    color: var(--dark);
    padding: 14px 40px;
}

.btn--turquoise {
    background: var(--turquoise);
    color: var(--dark);
    font-weight: 700;
    padding: 14px 40px;
}

/* ---------- Mobile bottom CTA ---------- */
/* On phones the header CTA moves into a fixed thumb-reach bar at the
   bottom; it slides away while the lead form itself is on screen. */

.mobile-cta {
    display: none;
}

@media (max-width: 767px) {
    .site-header__logo img {
        height: 20px;
    }

    .site-header .btn--outline {
        display: none;
    }

    body {
        padding-bottom: 96px;
    }

    /* Liquid-glass floating capsule: heavy blur + saturation boost picks
       up the colors scrolling underneath; the highlight border and inset
       glare fake the glass edge. */
    .mobile-cta {
        display: block;
        position: fixed;
        bottom: calc(16px + env(safe-area-inset-bottom));
        left: 24px;
        right: 24px;
        z-index: 60;
        padding: 8px;
        border-radius: 999px;
        background: rgba(255, 255, 255, 0.45);
        -webkit-backdrop-filter: blur(20px) saturate(180%);
        backdrop-filter: blur(20px) saturate(180%);
        box-shadow: 0 8px 32px rgba(28, 28, 33, 0.18);
        transition: transform 0.3s ease;
    }

    .mobile-cta.is-hidden {
        transform: translateY(200%);
    }

    .mobile-cta .btn {
        display: block;
        width: 100%;
    }
}

@supports not (backdrop-filter: blur(1px)) {
    .mobile-cta {
        background: rgba(255, 253, 251, 0.95);
    }
}

/* ---------- Hero ---------- */

.hero {
    background: var(--dark);
    overflow: hidden;
}

.hero__video video {
    width: 100%;
    height: auto;
    display: block;
}

/* Reserve the hero's height before video metadata loads, so the page
   doesn't collapse and scroll-triggered animations below don't fire early. */
.hero__video--desktop video {
    aspect-ratio: 2880 / 1240;
}

.hero__video--mobile video {
    aspect-ratio: 780 / 1360;
}

/* SA hero: the whole video is an anchor to the lead form;
   the SA videos have their own aspect ratios. */
.hero__link {
    display: block;
}

.hero--sa .hero__video--desktop video {
    aspect-ratio: 1440 / 774;
}

.hero--sa .hero__video--mobile video {
    aspect-ratio: 780 / 1240;
}

.hero__video--desktop {
    display: none;
}

@media (min-width: 768px) {
    .hero__video--mobile {
        display: none;
    }

    .hero__video--desktop {
        display: block;
    }
}

/* ---------- What is IQOS ---------- */

.what {
    background: linear-gradient(180deg, var(--dark) 0%, var(--dark-2) 100%);
    color: var(--text-on-dark);
    border-radius: 0 0 var(--radius-section) var(--radius-section);
    padding: 64px 0 56px;
    overflow: hidden;
}

.what__heading {
    text-align: center;
    font-size: 30px;
    font-weight: 700;
}

.what__intro {
    text-align: center;
    max-width: 720px;
    margin: 16px auto 0;
    color: rgba(255, 255, 255, 0.92);
}

.what__visual {
    position: relative;
    margin: 32px auto 24px;
    max-width: 640px;
    min-height: 260px;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    gap: 0;
}

.what__visual img {
    opacity: 0;
    transform: translateY(24px);
    transition: opacity 0.8s ease, transform 0.8s ease;
}

.what__visual.is-visible img {
    opacity: 1;
    transform: none;
}

.what__device {
    width: 46%;
    max-width: 300px;
    z-index: 2;
}

.what__device--secondary {
    width: 34%;
    max-width: 220px;
    z-index: 1;
    margin-inline-start: -6%;
}

.what__packs {
    width: 26%;
    max-width: 150px;
    align-self: center;
    z-index: 3;
    margin-inline-start: -8%;
}

.what__visual.is-visible .what__device--secondary {
    transition-delay: 0.15s;
}

.what__visual.is-visible .what__packs {
    transition-delay: 0.3s;
}

/* KW: composed visual on desktop, single pre-composed image on mobile. */
.what__device-animation {
    width: 100%;
    max-width: 390px;
}

@media (max-width: 767px) {
    .what__visual--desktop {
        display: none;
    }
}

@media (min-width: 768px) {
    .what__visual--mobile {
        display: none;
    }
}

/* ---------- What is IQOS: animated visual (KW EN only) ----------
   Devices slide in from both edges slightly counter-tilted, settle,
   then tilt apart to their natural pose while the packs emerge from
   behind them with a stronger mirrored tilt. The final frame matches
   the pre-composed device-animation.png used on mobile: images are
   absolutely positioned to those coordinates and end at transform:none.
   Triggered by the existing .is-visible class. */

.what__visual--animated {
    max-width: 560px;
    aspect-ratio: 390 / 350;
    min-height: 0;
}

.what__visual--animated img {
    position: absolute;
    opacity: 0;
    transform: none;
    transition: none;
    will-change: transform, opacity;
}

.what-anim__device {
    transform-origin: 50% 80%;
}

.what-anim__device--left {
    left: 0;
    top: 0;
    width: 85%;
    z-index: 3;
}

.what-anim__device--right {
    left: 8.5%;
    top: 0;
    width: 91.5%;
    z-index: 2;
}

.what-anim__packs {
    z-index: 1;
    transform-origin: 50% 80%;
}

.what-anim__packs--left {
    left: 0;
    top: 30%;
    width: 50.5%;
}

.what-anim__packs--right {
    left: 38%;
    top: 26.5%;
    width: 62%;
}

/* SA: big ILUMA i pen + pocket charger on the left, a fan of three
   TEREA packs at the case's right edge (per the approved mock). The
   device slides in from the left, the packs fan out one after another.
   Shown on all viewports. */
.what__visual--sa {
    max-width: 520px;
    aspect-ratio: 8 / 7;
}

.what__visual--sa .sa-anim__device {
    left: -7%;
    top: 0;
    width: 96%;
    z-index: 5;
}

.what__visual--sa .sa-anim__pack {
    width: 44%;
    transform-origin: 15% 85%;
}

.what__visual--sa .sa-anim__pack--1 {
    left: 40.5%;
    top: 55%;
    rotate: 24deg;
    z-index: 4;
}

.what__visual--sa .sa-anim__pack--2 {
    left: 49.5%;
    top: 39%;
    rotate: 0deg;
    z-index: 3;
}

.what__visual--sa .sa-anim__pack--3 {
    left: 55%;
    top: 20%;
    rotate: -24deg;
    z-index: 2;
}

.what__visual--sa.is-visible .sa-anim__device {
    animation: sa-device-in 0.9s cubic-bezier(0.22, 0.61, 0.36, 1) both;
}

.what__visual--sa.is-visible .sa-anim__pack--1 {
    animation: sa-pack-in 0.7s cubic-bezier(0.34, 1.25, 0.64, 1) 0.45s both;
}

.what__visual--sa.is-visible .sa-anim__pack--2 {
    animation: sa-pack-in 0.7s cubic-bezier(0.34, 1.25, 0.64, 1) 0.65s both;
}

.what__visual--sa.is-visible .sa-anim__pack--3 {
    animation: sa-pack-in 0.7s cubic-bezier(0.34, 1.25, 0.64, 1) 0.85s both;
}

@keyframes sa-device-in {
    from {
        opacity: 0;
        transform: translateX(-45vw);
    }
    to {
        opacity: 1;
        transform: none;
    }
}

@keyframes sa-pack-in {
    from {
        opacity: 0;
        transform: translate(-18%, 12%) scale(0.92);
    }
    to {
        opacity: 1;
        transform: none;
    }
}

.what__visual--animated.is-visible .what-anim__device--left {
    animation: what-device-left 2s both;
}

.what__visual--animated.is-visible .what-anim__device--right {
    animation: what-device-right 2s both;
}

.what__visual--animated.is-visible .what-anim__packs--left {
    animation: what-packs-left 0.8s cubic-bezier(0.34, 1.25, 0.64, 1) 1.35s both;
}

.what__visual--animated.is-visible .what-anim__packs--right {
    animation: what-packs-right 0.8s cubic-bezier(0.34, 1.25, 0.64, 1) 1.35s both;
}

/* 0–55%: slide in counter-tilted and settle; 55–68%: rest;
   68–100%: rotate to the natural pose (tilt apart). */
@keyframes what-device-left {
    0% {
        opacity: 0;
        transform: translateX(-55vw) rotate(6deg);
        animation-timing-function: cubic-bezier(0.22, 0.61, 0.36, 1);
    }
    8% {
        opacity: 1;
    }
    55% {
        transform: translateX(0) rotate(6deg);
        animation-timing-function: linear;
    }
    68% {
        transform: translateX(0) rotate(6deg);
        animation-timing-function: cubic-bezier(0.34, 1.25, 0.64, 1);
    }
    100% {
        opacity: 1;
        transform: none;
    }
}

@keyframes what-device-right {
    0% {
        opacity: 0;
        transform: translateX(55vw) rotate(-6deg);
        animation-timing-function: cubic-bezier(0.22, 0.61, 0.36, 1);
    }
    8% {
        opacity: 1;
    }
    55% {
        transform: translateX(0) rotate(-6deg);
        animation-timing-function: linear;
    }
    68% {
        transform: translateX(0) rotate(-6deg);
        animation-timing-function: cubic-bezier(0.34, 1.25, 0.64, 1);
    }
    100% {
        opacity: 1;
        transform: none;
    }
}

@keyframes what-packs-left {
    from {
        opacity: 0;
        transform: translateX(40%) scale(0.94) rotate(8deg);
    }
    to {
        opacity: 1;
        transform: none;
    }
}

@keyframes what-packs-right {
    from {
        opacity: 0;
        transform: translateX(-40%) scale(0.94) rotate(-8deg);
    }
    to {
        opacity: 1;
        transform: none;
    }
}

@media (prefers-reduced-motion: reduce) {
    .what__visual--animated img {
        opacity: 1;
        animation: none !important;
    }
}

/* ---------- Accordion ---------- */

.accordion {
    max-width: 800px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.accordion__item {
    background: var(--card-collapsed);
    border-radius: var(--radius-card);
    overflow: hidden;
    transition: background 0.3s ease;
}

.accordion__item.is-open {
    background: var(--card-expanded);
}

.accordion__toggle {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 14px;
    background: none;
    border: 0;
    cursor: pointer;
    font-family: inherit;
    font-size: 16px;
    font-weight: 700;
    color: var(--text-on-dark);
    padding: 16px 18px;
    text-align: start;
}

.accordion__icon {
    flex-shrink: 0;
    width: 36px;
    height: 36px;
}

.accordion__title {
    flex-grow: 1;
}

.accordion__chevron {
    flex-shrink: 0;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: var(--soft-white);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.3s ease;
}

.accordion__item.is-open .accordion__chevron {
    transform: rotate(180deg);
}

.accordion__body {
    display: none;
    padding: 0 18px 16px calc(18px + 36px + 14px);
    color: var(--text-on-dark);
    font-size: 15px;
}

[dir='rtl'] .accordion__body {
    padding: 0 calc(18px + 36px + 14px) 16px 18px;
}

.accordion__item.is-open .accordion__body {
    display: block;
}

/* ---------- Important information ---------- */

.important-note {
    max-width: 800px;
    margin: 28px auto 0;
    border: 1px solid var(--soft-white);
    padding: 12px 20px;
    text-align: center;
    font-size: 13px;
    color: var(--text-on-dark);
}

.what__cta {
    text-align: center;
    margin-top: 36px;
}

/* ---------- How it works + form ---------- */

.how {
    padding: 64px 0;
}

/* SA: fixed photo background behind the "How does the free demo work?"
   steps (the content scrolls over the static photo), softened by a light
   overlay to keep the copy readable. The lead form lives in its own
   .form-section below, on plain IQOS white. */
.how--photo {
    position: relative;
    background: url('/assets/landing/sa/img/sa-how-bg.jpg') center / cover no-repeat;
    background-attachment: fixed;
}

/* iOS Safari renders fixed cover backgrounds poorly — scroll it there. */
@media (hover: none) {
    .how--photo {
        background-attachment: scroll;
    }
}

.how--photo::before {
    content: '';
    position: absolute;
    inset: 0;
    background: rgba(255, 255, 255, 0.5);
}

.how--photo .container {
    position: relative;
}

.how--photo .step {
    background: rgba(255, 255, 255, 0.6);
}

.form-section {
    background: var(--soft-white);
    padding: 56px 0 72px;
}

.form-section .lead-form-wrap {
    margin-top: 0;
}

.how__heading {
    text-align: center;
    font-size: 30px;
    font-weight: 700;
    color: var(--slate);
}

.steps {
    max-width: 560px;
    margin: 36px auto 0;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.step {
    display: flex;
    align-items: center;
    gap: 18px;
    background: #e9e7e4;
    border-radius: var(--radius-card);
    padding: 18px 22px;
}

.step__num {
    font-size: 64px;
    line-height: 1;
    font-weight: 700;
    color: #c9c7c4;
    flex-shrink: 0;
}

.step__text {
    font-size: 17px;
    color: var(--slate);
}

.steps__chevron {
    text-align: center;
    margin-top: 20px;
    color: var(--slate);
}

/* ---------- Lead form ---------- */

.lead-form-wrap {
    max-width: 560px;
    margin: 40px auto 0;
    background: var(--dark);
    border-radius: 16px;
    padding: 40px 26px;
    color: var(--text-on-dark);
}

.lead-form-wrap h2 {
    text-align: center;
    font-size: 26px;
    font-weight: 700;
    margin-bottom: 28px;
}

.lead-form .form-field {
    margin-bottom: 16px;
}

.lead-form input[type='text'],
.lead-form input[type='tel'],
.lead-form select {
    width: 100%;
    font-family: inherit;
    font-size: 16px;
    color: var(--dark);
    background: var(--soft-white);
    border: 0;
    border-radius: 10px;
    padding: 15px 16px;
    appearance: none;
}

.lead-form input::placeholder {
    color: #8d8b90;
}

.lead-form select:invalid {
    color: #8d8b90;
}

.lead-form .form-field--select {
    position: relative;
}

.lead-form .form-field--select::after {
    content: '';
    position: absolute;
    inset-inline-end: 18px;
    top: 50%;
    width: 10px;
    height: 10px;
    border-inline-end: 2px solid var(--dark);
    border-bottom: 2px solid var(--dark);
    transform: translateY(-70%) rotate(45deg);
    pointer-events: none;
}

.form-check {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    margin-top: 18px;
    font-size: 13px;
    color: rgba(255, 255, 255, 0.92);
}

.form-check input[type='checkbox'] {
    appearance: none;
    flex-shrink: 0;
    width: 22px;
    height: 22px;
    margin-top: 2px;
    background: var(--soft-white);
    border-radius: 5px;
    cursor: pointer;
    position: relative;
}

.form-check input[type='checkbox']:checked::after {
    content: '';
    position: absolute;
    left: 7px;
    top: 3px;
    width: 6px;
    height: 11px;
    border: solid var(--dark);
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
}

.form-check a {
    color: inherit;
}

.lead-form .form-submit {
    text-align: center;
    margin-top: 28px;
}

.form-note {
    display: none;
    margin-top: 16px;
    text-align: center;
    font-size: 14px;
    color: var(--turquoise);
}

.form-note.is-visible {
    display: block;
}

/* ---------- Footnotes / legal ---------- */

.footnotes {
    background: var(--soft-white);
    padding: 28px 0;
    font-size: 12px;
    color: var(--slate);
    text-align: center;
}

.footnotes p + p {
    margin-top: 10px;
}

.risk-banner {
    background: var(--light-grey);
    padding: 40px 0;
    text-align: center;
}

.risk-banner p {
    font-size: 22px;
    font-weight: 700;
    color: var(--slate);
    max-width: 1000px;
    margin: 0 auto;
}