/**
 * Product landing page template (page-templates/techrato-landing.php).
 * Loaded only on pages using that template — see inc/landing-page.php.
 *
 * Visual language matches the reference the site owner supplied (a dark,
 * oversized-type, Apple-style product page prototype): black/near-black
 * sections throughout, huge tight-tracked headlines, pill controls, big
 * rounded media. Class names are unchanged from earlier revisions of this
 * file on purpose — only the values changed — so no template-part needed
 * edits for this pass.
 *
 * Scroll-reveal on the story sections is gated behind body.js-landing,
 * added by assets/js/landing.js. Without that class every section is
 * already fully visible below, so JS being blocked/slow never hides
 * content — it just skips the fade/slide-in animation.
 */

.techrato-landing {
    --techrato-landing-accent: #2997ff;
    --tl-bg: #000;
    --tl-bg-alt: #1d1d1f;
    --tl-panel: #18181a;
    --tl-ink: #f5f5f7;
    --tl-muted: #a1a1a6;
    overflow-x: hidden;
    background: var(--tl-bg);
    color: var(--tl-ink);
}

.techrato-landing .container {
    width: min(var(--page-width, 1240px), calc(100% - 44px));
    margin-inline: auto;
}

.landing-kicker {
    display: inline-block;
    margin-bottom: 14px;
    color: var(--tl-muted);
    font-size: 15px;
    font-weight: 600;
}

.landing-section-heading {
    max-width: 760px;
    margin-inline: auto;
    margin-bottom: 48px;
    text-align: center;
}

.landing-section-heading h2 {
    margin: 0 0 14px;
    font-size: clamp(32px, 5vw, 56px);
    font-weight: 800;
    letter-spacing: -.03em;
    line-height: 1.08;
}

.landing-section-heading p {
    margin: 0;
    color: var(--tl-muted);
    font-size: clamp(16px, 1.6vw, 19px);
    line-height: 1.7;
}

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

.landing-hero {
    position: relative;
    width: 100vw;
    margin-inline-start: calc(50% - 50vw);
    min-height: min(94vh, 920px);
    display: flex;
    align-items: flex-end;
    overflow: hidden;
    background: #000;
    color: #fff;
}

.landing-hero--light {
    color: #111;
}

.landing-hero__media {
    position: absolute;
    inset: 0;
}

.landing-hero__media picture,
.landing-hero__media img,
.landing-hero__media video {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Subtle "zoom + drift" as the hero scrolls out of view — the same
   --hero-shift/--hero-scale idiom the reference prototype uses, computed in
   assets/js/landing.js. Defaults are inert (0px / scale 1) so this is a
   no-op until JS sets real values. */
.landing-hero__media img,
.landing-hero__media video {
    transform: translateY(var(--hero-shift, 0px)) scale(var(--hero-scale, 1));
    will-change: transform;
}

/* No photo uploaded yet: a designed gradient instead of a flat box, with
   the placeholder phone bleeding off the edge like product art. */
.landing-hero--no-image .landing-hero__media--placeholder {
    background:
        radial-gradient(circle at 80% 20%, color-mix(in srgb, var(--techrato-landing-accent) 35%, transparent), transparent 55%),
        linear-gradient(160deg, #1c1c1e, #0a0a0b 70%);
    display: flex;
    align-items: flex-end;
    justify-content: flex-end;
    overflow: hidden;
}

.landing-hero--no-image .landing-hero__media--placeholder .landing-placeholder-phone {
    height: 115%;
    width: auto;
    margin-inline-end: -4%;
    opacity: .5;
    filter: drop-shadow(0 30px 60px rgba(0, 0, 0, .5));
}

.landing-hero__content {
    position: relative;
    z-index: 1;
    padding-block: 60px 90px;
    max-width: 820px;
    will-change: transform, opacity;
}

.landing-hero__kicker {
    display: block;
    margin-bottom: 16px;
    font-size: 18px;
    font-weight: 600;
    color: var(--tl-muted);
}

.landing-hero__headline {
    margin: 0 0 18px;
    font-size: clamp(42px, 7.5vw, 96px);
    font-weight: 800;
    line-height: .98;
    letter-spacing: -.045em;
}

.landing-hero__sub {
    margin: 0 0 30px;
    font-size: clamp(16px, 2vw, 20px);
    line-height: 1.7;
    max-width: 560px;
    color: #d2d2d7;
}

.landing-hero__cta {
    display: inline-block;
    padding: 14px 30px;
    border-radius: 999px;
    background: var(--techrato-landing-accent);
    color: #fff;
    font-size: 16px;
    font-weight: 700;
}

/* ---------- Highlights (tabbed autoplay showcase) ---------- */

.landing-highlights {
    padding-block: 100px;
    background: var(--tl-bg);
}

.landing-highlights__head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 20px;
    margin-bottom: 40px;
}

.landing-highlights__head h2 {
    margin: 0;
    font-size: clamp(34px, 5.5vw, 60px);
    font-weight: 800;
    letter-spacing: -.03em;
}

.landing-highlights__film-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 0;
    border: 0;
    background: none;
    color: var(--techrato-landing-accent);
    font-size: 17px;
    font-weight: 600;
    cursor: pointer;
    white-space: nowrap;
}

/* Default (no JS, or JS still loading): every slide is its own fully
   visible card — nothing here depends on scripting to be readable. */
.landing-highlights__stage {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
}

.landing-highlights__slide {
    margin: 0;
    border-radius: 28px;
    overflow: hidden;
    background: var(--tl-panel);
    color: #fff;
}

.landing-highlights__slide img,
.landing-highlights__placeholder {
    display: block;
    width: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
}

.landing-highlights__placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    background: #1c1c1e;
}

.landing-highlights__slide figcaption {
    padding: 22px 24px 28px;
}

.landing-highlights__icon {
    display: block;
    width: 26px;
    height: 26px;
    margin-bottom: 12px;
    object-fit: contain;
}

.landing-highlights__slide strong {
    display: block;
    font-size: 19px;
    font-weight: 700;
    line-height: 1.5;
    letter-spacing: -.01em;
}

.landing-highlights__controls {
    display: none;
}

/* JS-enhanced: one big stage, slides stacked/absolute and cross-faded,
   caption overlaid over the image like Apple's own highlight tabs. */
.js-landing .landing-highlights__stage {
    position: relative;
    display: block;
    aspect-ratio: 16 / 9;
    border-radius: 34px;
    overflow: hidden;
    background: #060607;
}

.js-landing .landing-highlights__slide {
    position: absolute;
    inset: 0;
    opacity: 0;
    visibility: hidden;
    transition: opacity .5s ease;
    border-radius: 0;
}

.js-landing .landing-highlights__slide.is-active {
    opacity: 1;
    visibility: visible;
}

.js-landing .landing-highlights__slide img,
.js-landing .landing-highlights__placeholder {
    height: 100%;
    aspect-ratio: auto;
}

.js-landing .landing-highlights__slide figcaption {
    position: absolute;
    inset: auto 0 0 0;
    padding: clamp(28px, 5vw, 70px);
    background: linear-gradient(180deg, transparent, rgba(0, 0, 0, .78) 68%);
}

.js-landing .landing-highlights__slide strong {
    font-size: clamp(26px, 4vw, 48px);
    max-width: 780px;
    line-height: 1.08;
    letter-spacing: -.03em;
}

.js-landing .landing-highlights__controls {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
    margin-top: 28px;
}

.landing-highlights__tabs {
    display: flex;
    gap: 10px;
    padding: 10px;
    background: #333336;
    border-radius: 999px;
}

.landing-highlights__tabs button {
    width: 8px;
    height: 8px;
    padding: 0;
    border: 0;
    border-radius: 999px;
    background: #77777c;
    cursor: pointer;
    transition: width .3s ease, background .3s ease;
}

.landing-highlights__tabs button.is-active {
    width: 40px;
    background: #d6d6da;
}

.landing-highlights__playpause {
    width: 46px;
    height: 46px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: #333336;
    color: #fff;
    display: grid;
    place-items: center;
    cursor: pointer;
}

.landing-highlights__playpause[data-playing="false"] .icon-pause,
.landing-highlights__playpause[data-playing="true"] .icon-play {
    display: none;
}

/* ---------- Film modal ---------- */

.landing-film-modal {
    position: fixed;
    inset: 0;
    z-index: 500;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 6vw;
    background: #000;
}

.landing-film-modal[hidden] {
    display: none !important;
}

.landing-film-modal__frame {
    position: relative;
    width: min(1200px, 100%);
    height: min(68vw, 720px);
    border-radius: 30px;
    overflow: hidden;
    background: #000;
    color: #fff;
}

.landing-film-modal__media {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.landing-film-modal__close {
    position: absolute;
    top: 22px;
    inset-inline-end: 22px;
    z-index: 2;
    width: 44px;
    height: 44px;
    border: 0;
    border-radius: 50%;
    background: #2c2c2e;
    color: #fff;
    font-size: 22px;
    line-height: 1;
    cursor: pointer;
}

.landing-film-modal__copy {
    position: absolute;
    z-index: 1;
    inset-inline-start: 6%;
    bottom: 7%;
    max-width: 640px;
}

.landing-film-modal__copy h3 {
    margin: 0 0 10px;
    font-size: clamp(28px, 5vw, 54px);
    letter-spacing: -.04em;
}

.landing-film-modal__copy p {
    margin: 0;
    color: #bbb;
    line-height: 1.7;
}

/* ---------- Upgrade (big centered stats block) ---------- */

.landing-upgrade {
    padding-block: 130px;
    background: var(--tl-bg);
    text-align: center;
}

.landing-upgrade__inner {
    max-width: 1000px;
}

.landing-upgrade h2 {
    margin: 0;
    font-size: clamp(44px, 7vw, 96px);
    font-weight: 800;
    letter-spacing: -.045em;
    line-height: .95;
}

.landing-upgrade__lead {
    max-width: 780px;
    margin: 40px auto 0;
    color: var(--tl-muted);
    font-size: clamp(18px, 2vw, 25px);
    line-height: 1.5;
}

.landing-upgrade__stats {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
    width: min(950px, 100%);
    margin: 80px auto 0;
    padding-top: 45px;
    border-top: 1px solid #303033;
    text-align: start;
}

.landing-upgrade__stats strong {
    display: block;
    font-size: clamp(38px, 5.5vw, 64px);
    font-weight: 800;
    letter-spacing: -.03em;
}

.landing-upgrade__stats span {
    display: block;
    margin-top: 6px;
    color: var(--tl-muted);
    font-size: 16px;
    line-height: 1.4;
}

/* ---------- Story ---------- */

.landing-story__section {
    padding-block: 100px;
    opacity: 1;
    transform: none;
    background: var(--tl-bg-alt);
}

.landing-story__section:nth-of-type(even) {
    background: var(--tl-bg);
}

/* Continuous scroll-linked reveal, not a one-time trigger: landing.js sets
   --progress (0→1) on every scroll frame as each section moves through the
   viewport, so the copy/media ease in exactly in step with the scroll
   instead of just fading in once and sitting still. Without JS, --progress
   is never set and the fallback below (1) keeps everything fully visible. */
.js-landing .landing-story__section {
    --progress: 1;
    opacity: calc(0.2 + var(--progress) * 0.8);
    transform: translateY(calc((1 - var(--progress)) * 60px));
}

.js-landing .landing-story__media img,
.js-landing .landing-story__media-placeholder {
    transform: scale(calc(0.9 + var(--progress, 1) * 0.1));
}

.landing-story__inner {
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: center;
    gap: 60px;
}

.landing-story--image-left .landing-story__inner {
    grid-template-columns: 1fr 1fr;
}

.landing-story--image-left .landing-story__media {
    order: 2;
}

.landing-story--image-full .landing-story__inner,
.landing-story--text-center .landing-story__inner {
    grid-template-columns: 1fr;
    text-align: center;
}

.landing-story__media {
    position: sticky;
    top: 90px;
}

.landing-story__media img {
    display: block;
    width: 100%;
    border-radius: 30px;
}

.landing-story--image-full .landing-story__media img {
    border-radius: 34px;
}

.landing-story--text-center .landing-story__media {
    display: none;
}

.landing-story__media-placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 380px;
    border-radius: 30px;
    background: #111;
}

.landing-story__media-placeholder .landing-placeholder-phone {
    height: 82%;
    width: auto;
}

.landing-story__copy {
    max-width: 480px;
}

.landing-story--image-full .landing-story__copy,
.landing-story--text-center .landing-story__copy {
    max-width: 680px;
    margin-inline: auto;
}

.landing-story__kicker {
    display: block;
    margin-bottom: 14px;
    color: var(--techrato-landing-accent);
    font-size: 15px;
    font-weight: 700;
}

.landing-story__headline {
    margin: 0 0 18px;
    font-size: clamp(28px, 4vw, 44px);
    font-weight: 800;
    letter-spacing: -.03em;
    line-height: 1.12;
}

.landing-story__body {
    margin: 0;
    font-size: 18px;
    line-height: 1.75;
    color: var(--tl-muted);
}

/* ---------- Sticky story (pinned image + scrolling facts) ---------- */

.landing-sticky-story {
    padding-block: 60px;
    background: var(--tl-bg);
}

.landing-sticky-story__grid {
    display: grid;
    grid-template-columns: 1.1fr 1fr;
    gap: 40px;
}

.landing-sticky-story__media {
    position: sticky;
    top: 80px;
    align-self: start;
    height: 74vh;
    display: grid;
    place-items: center;
    border-radius: 34px;
    overflow: hidden;
    background: var(--tl-panel);
}

.landing-sticky-story__media img {
    max-width: 82%;
    max-height: 82%;
    object-fit: contain;
    filter: drop-shadow(0 30px 60px rgba(0, 0, 0, .5));
}

.landing-sticky-story__media .landing-placeholder-phone {
    height: 70%;
    width: auto;
}

.landing-sticky-story__facts {
    display: flex;
    flex-direction: column;
    gap: 45vh;
    padding-block: 15vh 45vh;
}

.landing-sticky-story__fact strong {
    display: block;
    margin-bottom: 12px;
    font-size: clamp(42px, 6.5vw, 76px);
    font-weight: 800;
    letter-spacing: -.03em;
}

.landing-sticky-story__fact span {
    color: var(--tl-muted);
    font-size: 19px;
}

/* ---------- Gallery ---------- */

.landing-gallery {
    padding-block: 100px;
    background: var(--tl-bg-alt);
}

/* A swipeable/draggable horizontal carousel, not a static grid — matches
   the "take a closer look" strip on Apple's own pages. Native scroll-snap:
   works with touch, trackpad and mouse-wheel-shift with no JS. */
.landing-gallery__grid {
    display: flex;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    gap: 20px;
    margin-inline: calc(-1 * (100vw - 100%) / 2);
    padding-inline: calc((100vw - 100%) / 2 + 12px);
    padding-bottom: 8px;
    scrollbar-width: none;
}

.landing-gallery__grid::-webkit-scrollbar {
    display: none;
}

.landing-gallery__item {
    flex: 0 0 340px;
    margin: 0;
    scroll-snap-align: start;
}

.landing-gallery__item img {
    display: block;
    width: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    border-radius: 24px;
}

.landing-gallery__placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    aspect-ratio: 4 / 3;
    border-radius: 24px;
    background: #222;
}

.landing-gallery__placeholder .landing-placeholder-phone {
    height: 75%;
    width: auto;
}

.landing-gallery__item figcaption {
    margin-top: 12px;
    text-align: center;
    color: var(--tl-muted);
    font-size: 14px;
}

/* ---------- Camera zoom (scroll-triggered) ---------- */

.landing-zoom {
    position: relative;
    height: 280vh;
    background: var(--tl-bg);
}

.landing-zoom__pin {
    position: sticky;
    top: 0;
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    color: #fff;
    text-align: center;
}

.landing-zoom__media {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

.landing-zoom__media img,
.landing-zoom__media .landing-placeholder-phone {
    max-width: 55%;
    max-height: 65%;
    width: auto;
    height: auto;
    transform: scale(calc(1 + var(--zoom-progress, 0) * 2.4));
}

.landing-zoom__copy {
    position: relative;
    z-index: 1;
    max-width: 640px;
    padding-inline: 24px;
    opacity: calc(1 - var(--zoom-progress, 0) * 1.6);
}

.landing-zoom__copy h2 {
    margin: 0 0 14px;
    font-size: clamp(30px, 4.5vw, 48px);
    font-weight: 800;
    letter-spacing: -.03em;
}

.landing-zoom__copy p {
    margin: 0;
    color: #ccc;
    font-size: 17px;
    line-height: 1.75;
}

/* ---------- Aperture selector ---------- */

.landing-aperture {
    padding-block: 100px;
    background: var(--tl-bg-alt);
    color: #fff;
}

.landing-aperture__stage {
    width: min(1150px, 100%);
    margin-inline: auto;
    border-radius: 34px;
    overflow: hidden;
    background: #101012;
}

.landing-aperture__stage > img,
.landing-aperture__placeholder {
    display: block;
    width: 100%;
    height: min(60vw, 580px);
    object-fit: cover;
    transition: filter .5s ease;
}

.landing-aperture__placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
}

.landing-aperture__panel {
    padding: 32px clamp(20px, 4vw, 40px) 48px;
    text-align: center;
}

.landing-aperture__options {
    display: inline-flex;
    gap: 4px;
    padding: 6px;
    margin-bottom: 26px;
    background: #28282b;
    border-radius: 999px;
}

.landing-aperture__options button {
    padding: 11px 20px;
    border: 0;
    border-radius: 999px;
    background: transparent;
    color: #98989e;
    cursor: pointer;
}

.landing-aperture__options button.is-active {
    background: #45454a;
    color: #fff;
}

.landing-aperture__copy {
    margin: 0;
    color: var(--tl-muted);
    font-size: 19px;
}

.landing-aperture__copy strong {
    color: #fff;
}

/* ---------- Feature slider (arrows) ---------- */

.landing-slider {
    padding-block: 100px;
    background: var(--tl-bg);
}

.landing-slider__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    margin-bottom: 40px;
}

.landing-slider__head h2 {
    margin: 0;
    font-size: clamp(34px, 5.5vw, 58px);
    font-weight: 800;
    letter-spacing: -.03em;
}

.landing-slider__arrows {
    display: flex;
    gap: 10px;
}

.landing-slider__arrows button {
    width: 46px;
    height: 46px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: var(--tl-panel);
    color: #fff;
    display: grid;
    place-items: center;
    cursor: pointer;
}

.landing-slider__grid {
    display: grid;
    grid-template-columns: 1.5fr 1fr;
    gap: 18px;
}

.landing-slider__image,
.landing-slider__copy {
    position: relative;
    border-radius: 34px;
    overflow: hidden;
}

.landing-slider__image {
    min-height: 500px;
    background: var(--tl-panel);
}

.landing-slider__copy {
    min-height: 500px;
    background: var(--tl-panel);
}

.landing-slider__image img.landing-slider__row,
.landing-slider__image .landing-slider__row.landing-slider__placeholder {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0;
    visibility: hidden;
    transition: opacity .4s ease;
}

.landing-slider__image .landing-slider__placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
}

.landing-slider__image .landing-slider__row.is-active {
    opacity: 1;
    visibility: visible;
}

.landing-slider__copy .landing-slider__row {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    padding: 54px;
    opacity: 0;
    visibility: hidden;
    transition: opacity .4s ease;
}

.landing-slider__copy .landing-slider__row.is-active {
    opacity: 1;
    visibility: visible;
}

.landing-slider__count {
    margin-bottom: auto;
    padding-bottom: 20px;
    color: #77777c;
    font-size: 14px;
}

.landing-slider__copy h3 {
    margin: 0 0 18px;
    font-size: clamp(26px, 3.4vw, 40px);
    letter-spacing: -.03em;
    color: #fff;
}

.landing-slider__copy p {
    margin: 0;
    color: var(--tl-muted);
    font-size: 17px;
    line-height: 1.7;
}

/* ---------- Capabilities grid ---------- */

.landing-capabilities {
    padding-block: 100px;
    background: var(--tl-bg-alt);
}

.landing-capabilities__grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
}

.landing-capabilities__item {
    min-height: 260px;
    padding: 34px;
    border-radius: 30px;
    background: linear-gradient(145deg, #202023, #0d0d0e);
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
}

.landing-capabilities__icon {
    width: 34px;
    height: 34px;
    margin-bottom: 16px;
    object-fit: contain;
}

.landing-capabilities__dot {
    display: block;
    width: 12px;
    height: 12px;
    margin-bottom: 20px;
    border-radius: 50%;
    background: var(--techrato-landing-accent);
}

.landing-capabilities__item h3 {
    margin: 0 0 8px;
    font-size: 19px;
    font-weight: 800;
    letter-spacing: -.01em;
}

.landing-capabilities__item p {
    margin: 0;
    color: var(--tl-muted);
    font-size: 15px;
    line-height: 1.75;
}

/* ---------- Compare table ---------- */

.landing-compare {
    padding-block: 100px;
    background: var(--tl-bg);
}

/* The table gets a min-width so it stays readable on narrow screens instead
   of squeezing illegibly — .landing-compare__scroll is the ONLY thing that
   scrolls when it doesn't fit, never the page itself (the same fix already
   applied to the classic [gallery] shortcode in style.css after it once
   pushed the whole site into horizontal scroll). */
.landing-compare__scroll {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.landing-compare__table {
    width: 100%;
    min-width: 560px;
    border-collapse: collapse;
}

.landing-compare__table th,
.landing-compare__table td {
    padding: 18px;
    border-bottom: 1px solid #262626;
    font-size: 15px;
    text-align: center;
    color: #fff;
}

.landing-compare__table th[scope="row"] {
    color: var(--tl-muted);
    font-weight: 600;
    text-align: right;
}

.landing-compare__table thead th {
    color: var(--tl-muted);
    font-size: 13px;
    font-weight: 700;
}

.landing-compare__current {
    color: var(--techrato-landing-accent);
    font-weight: 800;
}

/* ---------- Colors ---------- */

.landing-colors {
    padding-block: 100px;
    background: var(--tl-bg-alt);
}

.landing-colors__stage {
    position: relative;
    max-width: 680px;
    margin-inline: auto;
    aspect-ratio: 4 / 3;
}

.landing-color-image {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: contain;
    opacity: 0;
    transition: opacity .35s ease;
    pointer-events: none;
    filter: drop-shadow(0 30px 60px rgba(0, 0, 0, .5));
}

.landing-color-image.is-active {
    opacity: 1;
    pointer-events: auto;
}

.landing-color-image--placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
}

.landing-color-image--placeholder .landing-placeholder-phone {
    height: 80%;
    width: auto;
}

.landing-colors__swatches {
    display: flex;
    justify-content: center;
    gap: 16px;
    margin-top: 40px;
}

.landing-swatch {
    width: 36px;
    height: 36px;
    padding: 0;
    border-radius: 50%;
    background: var(--swatch, #999);
    border: 2px solid transparent;
    box-shadow: 0 0 0 1px rgba(255, 255, 255, .15) inset;
    cursor: pointer;
}

.landing-swatch.is-active {
    border-color: var(--techrato-landing-accent);
}

.landing-colors__name {
    margin: 20px 0 0;
    text-align: center;
    font-size: 17px;
    font-weight: 700;
}

/* ---------- Specs ---------- */

.landing-specs {
    padding-block: 100px;
    background: var(--tl-bg);
}

.landing-specs__grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
}

.landing-specs__item {
    padding: 32px;
    border-radius: 30px;
    background: var(--tl-panel);
}

.landing-specs__icon {
    width: 34px;
    height: 34px;
    margin-bottom: 16px;
    object-fit: contain;
}

.landing-specs__item h3 {
    margin: 0 0 10px;
    font-size: 17px;
    font-weight: 800;
}

.landing-specs__item p {
    margin: 0;
    color: var(--tl-muted);
    font-size: 15px;
    line-height: 1.75;
}

/* ---------- FAQ ---------- */

.landing-faq {
    padding-block: 100px;
    background: var(--tl-bg-alt);
}

.landing-faq__list {
    max-width: 760px;
    margin-inline: auto;
}

.landing-faq__item {
    padding: 24px 0;
    border-bottom: 1px solid #2c2c2e;
}

.landing-faq__item summary {
    cursor: pointer;
    font-size: 18px;
    font-weight: 700;
    list-style: none;
    position: relative;
    padding-inline-end: 30px;
}

.landing-faq__item summary::-webkit-details-marker {
    display: none;
}

.landing-faq__item summary::after {
    content: "+";
    position: absolute;
    inset-inline-end: 0;
    top: -4px;
    font-size: 24px;
    font-weight: 400;
    color: var(--techrato-landing-accent);
}

.landing-faq__item[open] summary::after {
    content: "\2212";
}

.landing-faq__item p {
    margin: 16px 0 0;
    color: var(--tl-muted);
    font-size: 16px;
    line-height: 1.85;
}

/* ---------- AR ---------- */

.landing-ar {
    padding-block: 100px;
    background: var(--tl-bg);
    color: #fff;
}

.landing-ar__viewer {
    display: block;
    width: 100%;
    height: min(70vh, 560px);
    border-radius: 30px;
    background: var(--tl-panel);
    --poster-color: transparent;
}

.landing-ar__button {
    padding: 13px 26px;
    border: 0;
    border-radius: 999px;
    background: var(--techrato-landing-accent);
    color: #fff;
    font-size: 15px;
    font-weight: 700;
    cursor: pointer;
}

.landing-ar__note {
    margin: 20px 0 0;
    text-align: center;
    color: var(--tl-muted);
    font-size: 13px;
}

/* ---------- CTA ---------- */

.landing-cta {
    position: relative;
    width: 100vw;
    margin-inline-start: calc(50% - 50vw);
    padding-block: 130px;
    background: #050505 center / cover no-repeat;
    color: #fff;
    text-align: center;
}

.landing-cta__inner {
    max-width: 680px;
}

.landing-cta h2 {
    margin: 0 0 16px;
    font-size: clamp(32px, 5vw, 56px);
    font-weight: 800;
    letter-spacing: -.03em;
}

.landing-cta p {
    margin: 0 0 30px;
    font-size: 18px;
    line-height: 1.75;
    color: var(--tl-muted);
}

.landing-cta__button {
    display: inline-block;
    padding: 15px 32px;
    border-radius: 999px;
    background: var(--techrato-landing-accent);
    color: #fff;
    font-size: 16px;
    font-weight: 700;
}

/* ---------- Mobile ---------- */

@media (max-width: 900px) {
    .landing-story__inner {
        grid-template-columns: 1fr;
    }

    .landing-story--image-left .landing-story__media {
        order: 0;
    }

    .landing-story__media {
        position: static;
        margin-bottom: 24px;
    }

    .landing-story__copy {
        max-width: none;
    }

    .landing-specs__grid,
    .landing-capabilities__grid,
    .landing-upgrade__stats {
        grid-template-columns: repeat(2, 1fr);
    }

    .landing-gallery__grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .landing-sticky-story__grid,
    .landing-slider__grid {
        grid-template-columns: 1fr;
    }

    .landing-sticky-story__media {
        position: static;
        height: 50vh;
        margin-bottom: 24px;
    }

    .landing-sticky-story__facts {
        gap: 30px;
        padding-block: 0;
    }

    .landing-slider__image,
    .landing-slider__copy {
        min-height: 340px;
    }
}

@media (max-width: 650px) {
    .landing-hero {
        min-height: 80vh;
        align-items: flex-end;
    }

    .landing-hero__content {
        padding-block: 40px 50px;
    }

    .landing-specs__grid,
    .landing-capabilities__grid,
    .landing-upgrade__stats {
        grid-template-columns: 1fr;
    }

    .landing-upgrade__stats {
        gap: 22px;
        border-top: 0;
        padding-top: 0;
        text-align: center;
    }

    .landing-upgrade__stats > div {
        padding: 20px 0;
        border-top: 1px solid #262626;
    }

    .landing-story__section,
    .landing-colors,
    .landing-specs,
    .landing-ar,
    .landing-cta,
    .landing-highlights,
    .landing-upgrade,
    .landing-gallery,
    .landing-faq,
    .landing-capabilities,
    .landing-compare,
    .landing-sticky-story,
    .landing-aperture,
    .landing-slider {
        padding-block: 64px;
    }

    .landing-highlights__stage,
    .landing-gallery__grid {
        grid-template-columns: 1fr;
    }

    .landing-highlights__head,
    .landing-slider__head {
        flex-direction: column;
        align-items: flex-start;
        gap: 14px;
    }

    .landing-aperture__stage > img,
    .landing-aperture__placeholder {
        height: 320px;
    }

    .landing-aperture__options {
        flex-wrap: wrap;
        justify-content: center;
    }
}

@media (prefers-reduced-motion: reduce) {
    .techrato-landing * {
        animation-duration: .01ms !important;
        transition-duration: .01ms !important;
    }
}