/* Latuvo landing — redesigned home, ported from the Claude Design handoff
   ("Latuvo Website.dc.html"): sticky nav → hero with floating device pair →
   trust strip → alternating feature rows → the "Read" differentiator card →
   Apple Watch band → FAQ → closing CTA → footer.

   This layer sits ON TOP of tokens.css + app.css + home.css. The handoff's
   own palette (#0A1626 / #C9E55A / drop-shadowed pill buttons) is remapped
   onto the canonical Latuvo theme: its lime accent resolves to --felt, its
   navy to --deep-court, its device shadows kept, its BUTTON shadows dropped
   (the brand .cta in app.css is already shadowless). Every selector here is
   prefixed `lt-` so it can't collide with home.css — which still drives the
   /get invite page and the shared nav/footer chrome.

   Load order: tokens.css → app.css → home.css → landing.css. */

/* ── Page surface ───────────────────────────────────────────────────────
   Flat Deep Court, matching the app (no atmospheric glows — the app forces a
   single flat dark surface, so the site does too). */
body {
    background: var(--deep-court);
    overflow-x: hidden;
    min-height: 100%;
}
::selection { background: var(--felt); color: var(--felt-text); }

html { scroll-behavior: smooth; }
:where(#features, #read, #watch, #faq, #get) { scroll-margin-top: 90px; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

@keyframes lt-floaty {
    0%, 100% { transform: translateY(0); }
    50%      { transform: translateY(-12px); }
}

/* ── Nav (center links added; base .nav comes from home.css) ─────────────*/
.lt-nav__links { display: flex; align-items: center; gap: 30px; }
.lt-nav__links a {
    font-size: 15px;
    font-weight: 600;
    color: var(--slate);
    transition: color var(--t-fast) var(--ease);
}
.lt-nav__links a:hover { color: var(--bone); }

/* ── Device mockups (shared by hero + feature rows) ─────────────────────
   The phone bezel keeps its depth shadow — only *button* shadows were cut. */
.lt-phone {
    position: relative;
    padding: 9px;
    border-radius: 40px;
    background: #0C1828;
    box-shadow:
        0 44px 86px -24px rgba(0, 0, 0, 0.78),
        0 0 0 1px rgba(255, 255, 255, 0.06),
        inset 0 1px 0 rgba(255, 255, 255, 0.12);
}
.lt-phone img { display: block; width: 100%; height: auto; border-radius: 32px; }
/* Glows removed — kept inert so the existing markup doesn't render anything. */
.lt-glow { display: none; }

/* ── Hero ───────────────────────────────────────────────────────────────*/
.lt-hero { position: relative; padding: clamp(56px, 8vw, 92px) 0 clamp(48px, 7vw, 72px); }
.lt-hero__inner {
    position: relative;
    display: flex;
    align-items: center;
    gap: clamp(32px, 5vw, 56px);
    flex-wrap: wrap;
}
.lt-hero__copy { flex: 1 1 360px; min-width: 300px; }

.lt-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 14px;
    border-radius: var(--r-chip);
    border: 1px solid color-mix(in oklab, var(--felt) 32%, transparent);
    background: color-mix(in oklab, var(--felt) 8%, transparent);
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.01em;
    color: var(--felt);
    margin-bottom: 22px;
}
.lt-badge .dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--felt);
}

.lt-hero__title {
    font-size: clamp(40px, 6.6vw, 66px);
    line-height: 1.02;
    letter-spacing: -0.035em;
    font-weight: 800;
    margin: 0 0 20px;
    text-wrap: balance;
}
.lt-hero__title .lt-accent { color: var(--felt); }
.lt-hero__lede {
    font-size: clamp(18px, 2vw, 20px);
    line-height: 1.5;
    color: var(--bone-sec);
    max-width: 30ch;
    margin: 0 0 30px;
    text-wrap: pretty;
}
.lt-hero__actions {
    display: flex;
    align-items: center;
    gap: 18px;
    flex-wrap: wrap;
    margin-bottom: 22px;
}
.lt-hero__note { font-size: 15px; color: var(--slate); font-weight: 500; }

.lt-microtrust {
    display: flex;
    align-items: center;
    gap: 14px;
    flex-wrap: wrap;
    font-size: 13.5px;
    color: var(--bone-ter-text);
    font-weight: 500;
}
.lt-microtrust .sep { width: 3px; height: 3px; border-radius: 50%; background: var(--bone-quat); }

/* Floating device pair */
.lt-hero__devices {
    flex: 0 0 auto;
    position: relative;
    margin: 0 auto;
    display: flex;
    align-items: flex-end;
}
.lt-hero__devices .lt-phone--back {
    width: 168px;
    transform: rotate(-4deg) translateY(18px);
    z-index: 1;
}
.lt-hero__devices .lt-phone--front {
    width: 230px;
    margin-left: -44px;
    z-index: 2;
    animation: lt-floaty 6s ease-in-out infinite;
}

/* ── Trust strip ────────────────────────────────────────────────────────*/
.lt-trust { padding: 8px 0 clamp(28px, 4vw, 40px); }
.lt-trust__row { display: flex; flex-wrap: wrap; gap: 12px; }
.lt-trust__item {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 11px 18px;
    border-radius: var(--r-tile);
    background: var(--surface-overlay);
    border: 1px solid var(--hairline);
    font-size: 15px;
    font-weight: 600;
    color: var(--bone-sec);
}
.lt-trust__item svg { flex: none; color: var(--felt); }

/* ── Feature rows ───────────────────────────────────────────────────────*/
.lt-feature {
    max-width: var(--max);
    margin: 0 auto;
    padding: clamp(48px, 7vw, 72px) var(--gutter);
    display: flex;
    align-items: center;
    gap: clamp(32px, 6vw, 72px);
    flex-wrap: wrap;
}
.lt-feature--reverse { flex-direction: row-reverse; }
.lt-feature__copy { flex: 1 1 380px; min-width: 300px; }
.lt-feature__media { flex: 0 0 auto; position: relative; margin: 0 auto; }
.lt-feature__media .lt-phone { width: clamp(220px, 30vw, 264px); }

/* Two-phone pair inside a feature row — overview in front, the deeper view behind */
.lt-feature__pair { display: flex; align-items: flex-end; justify-content: center; }
.lt-feature__pair .lt-phone { width: auto; }
.lt-feature__pair .lt-phone--back {
    width: clamp(166px, 22vw, 196px);
    transform: rotate(-4deg) translateY(16px);
    z-index: 1;
}
.lt-feature__pair .lt-phone--front {
    width: clamp(206px, 27vw, 244px);
    margin-left: -46px;
    z-index: 2;
}

.lt-eyebrow {
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--felt);
    margin-bottom: 14px;
}
.lt-feature__title {
    font-size: clamp(28px, 3.6vw, 40px);
    line-height: 1.08;
    letter-spacing: -0.03em;
    font-weight: 800;
    margin: 0 0 18px;
    text-wrap: balance;
}
.lt-feature__lede {
    font-size: clamp(17px, 1.9vw, 18px);
    line-height: 1.55;
    color: var(--bone-sec);
    max-width: 46ch;
    margin: 0 0 26px;
}
.lt-checks { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 13px; }
.lt-checks li {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 16px;
    color: var(--bone-sec);
    line-height: 1.4;
}
.lt-checks li .tick {
    flex: 0 0 auto;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: color-mix(in oklab, var(--felt) 14%, transparent);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--felt);
}

/* ── The Read — differentiator card ─────────────────────────────────────*/
.lt-read { padding: clamp(24px, 4vw, 44px) 0; }
.lt-read__card {
    max-width: var(--max);
    margin: 0 auto;
    border-radius: var(--r-sheet);
    overflow: hidden;
    border: 1px solid color-mix(in oklab, var(--felt) 20%, transparent);
    background: var(--surface2);
}
.lt-read__grid {
    display: flex;
    align-items: center;
    gap: clamp(36px, 5vw, 64px);
    flex-wrap: wrap;
    padding: clamp(40px, 5vw, 56px) clamp(28px, 4vw, 52px);
}
.lt-read__copy { flex: 1 1 400px; min-width: 300px; }
.lt-read__title {
    font-size: clamp(30px, 4vw, 44px);
    line-height: 1.05;
    letter-spacing: -0.03em;
    font-weight: 800;
    margin: 0 0 20px;
    text-wrap: balance;
}
.lt-read__lede {
    font-size: clamp(17px, 2vw, 19px);
    line-height: 1.55;
    color: var(--bone-sec);
    max-width: 50ch;
    margin: 0 0 26px;
}
.lt-quote {
    border-left: 3px solid var(--felt);
    padding: 4px 0 4px 18px;
    margin: 0 0 30px;
    max-width: 50ch;
}
.lt-quote p {
    font-size: 18px;
    line-height: 1.5;
    color: var(--bone);
    font-weight: 600;
    font-style: italic;
    margin: 0;
}
.lt-read__legend { display: flex; gap: 26px; flex-wrap: wrap; }
.lt-read__legend dt { font-size: 22px; font-weight: 800; letter-spacing: -0.01em; }
.lt-read__legend dd { font-size: 14px; color: var(--slate); margin: 2px 0 0; }
.lt-read__legend .is-felt { color: var(--felt); }
.lt-read__legend .is-info { color: var(--info); }
.lt-read__legend .is-bone { color: var(--bone); }
.lt-read__media { flex: 0 0 auto; position: relative; margin: 0 auto; }
.lt-read__media .lt-phone { width: clamp(220px, 28vw, 262px); }

/* ── Apple Watch band ───────────────────────────────────────────────────*/
.lt-watch {
    margin: clamp(32px, 5vw, 48px) 0;
    background: var(--surface);
    border-top: 1px solid var(--hairline);
    border-bottom: 1px solid var(--hairline);
}
.lt-watch__inner {
    max-width: var(--max);
    margin: 0 auto;
    padding: clamp(52px, 7vw, 72px) var(--gutter);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: clamp(40px, 6vw, 80px);
    flex-wrap: wrap;
}
.lt-watch__media {
    flex: 0 0 auto;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: clamp(12px, 2.4vw, 28px);
    flex-wrap: wrap;
}
/* The phone the wrist data lands on, shown beside the watch */
.lt-watch__phone { flex: 0 0 auto; width: clamp(152px, 18vw, 184px); }
/* Watch bezel — rounded-rectangle case + digital-crown nub, holding a real
   watch-aspect screenshot (594×726). */
.lt-watch__device {
    position: relative;
    width: clamp(210px, 26vw, 248px);
    padding: 14px;
    border-radius: 60px;
    background: #24272D;
    box-shadow:
        0 46px 90px -24px rgba(0, 0, 0, 0.80),
        0 0 0 1px rgba(0, 0, 0, 0.40),
        inset 0 1.5px 0 rgba(255, 255, 255, 0.16);
}
.lt-watch__screen {
    border-radius: 48px;
    overflow: hidden;
    background: #000;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.05);
}
.lt-watch__screen img { display: block; width: 100%; height: auto; }
.lt-watch__crown {
    position: absolute;
    right: -3px;
    top: 38%;
    width: 7px;
    height: 42px;
    border-radius: 5px;
    background: #4E535B;
}
.lt-watch__copy { flex: 1 1 360px; min-width: 300px; max-width: 480px; }
.lt-watch__title {
    font-size: clamp(28px, 3.6vw, 40px);
    line-height: 1.08;
    letter-spacing: -0.03em;
    font-weight: 800;
    margin: 0 0 18px;
    text-wrap: balance;
}
.lt-watch__lede { font-size: clamp(17px, 1.9vw, 18px); line-height: 1.55; color: var(--bone-sec); margin: 0 0 26px; }
.lt-stats { display: flex; gap: 14px; flex-wrap: wrap; }
.lt-stat {
    padding: 14px 18px;
    border-radius: var(--r-tile);
    background: var(--surface-overlay);
    border: 1px solid var(--hairline);
}
.lt-stat__n { font-size: 22px; font-weight: 800; color: var(--bone); letter-spacing: -0.01em; }
.lt-stat__l { font-size: 13.5px; color: var(--slate); margin-top: 2px; }

/* ── FAQ ────────────────────────────────────────────────────────────────*/
.lt-faq { max-width: 760px; margin: 0 auto; padding: clamp(44px, 6vw, 56px) var(--gutter) clamp(24px, 3vw, 32px); }
.lt-faq__title {
    font-size: clamp(28px, 3.4vw, 34px);
    letter-spacing: -0.03em;
    font-weight: 800;
    margin: 0 0 28px;
    text-align: center;
}
.lt-faq__list { display: flex; flex-direction: column; gap: 12px; }
.lt-faq__item {
    border: 1px solid var(--hairline2);
    border-radius: var(--r-card);
    background: var(--surface-overlay);
    overflow: hidden;
}
.lt-faq__q {
    width: 100%;
    text-align: left;
    background: none;
    border: none;
    color: var(--bone);
    font-family: inherit;
    font-size: 18px;
    font-weight: 600;
    padding: 20px 22px;
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
}
.lt-faq__q:focus-visible { outline: 3px solid var(--bone); outline-offset: -3px; border-radius: var(--r-card); }
.lt-faq__sign { color: var(--felt); font-size: 22px; line-height: 1; flex: none; transition: transform var(--t-std) var(--ease); }
.lt-faq__item[open] .lt-faq__sign { transform: rotate(45deg); }
.lt-faq__a { padding: 0 22px 20px; font-size: 16px; line-height: 1.55; color: var(--bone-sec); margin: 0; }
/* <details> marker reset */
.lt-faq__q::-webkit-details-marker { display: none; }
.lt-faq__item summary { list-style: none; }

/* ── Closing CTA ────────────────────────────────────────────────────────*/
.lt-final { max-width: var(--max); margin: 0 auto; padding: clamp(40px, 5vw, 56px) var(--gutter) clamp(56px, 8vw, 80px); }
.lt-final__card {
    position: relative;
    border-radius: var(--r-sheet);
    overflow: hidden;
    border: 1px solid color-mix(in oklab, var(--felt) 24%, transparent);
    background: var(--surface2);
    padding: clamp(48px, 6vw, 64px) clamp(24px, 4vw, 40px);
    text-align: center;
}
.lt-final__mark { width: 52px; height: 52px; display: block; margin: 0 auto 22px; }
.lt-final__title {
    font-size: clamp(30px, 4.2vw, 46px);
    line-height: 1.05;
    letter-spacing: -0.03em;
    font-weight: 800;
    margin: 0 0 14px;
    text-wrap: balance;
}
.lt-final__lede { font-size: clamp(17px, 2vw, 19px); color: var(--bone-sec); max-width: 52ch; margin: 0 auto 30px; line-height: 1.5; }
.lt-final__fine { margin-top: 18px; font-size: 14px; color: var(--slate); font-weight: 500; }

/* CTA arrow icon — paired with the brand .cta (still shadowless). */
.cta .lt-arrow { margin-left: -2px; }

/* ── Responsive ─────────────────────────────────────────────────────────*/
@media (max-width: 920px) {
    .lt-nav__links { display: none; }
}
@media (max-width: 760px) {
    .lt-hero__inner { flex-direction: column; text-align: center; }
    .lt-hero__copy { flex-basis: auto; }
    .lt-hero__lede { margin-inline: auto; }
    .lt-hero__actions, .lt-microtrust { justify-content: center; }
    .lt-feature, .lt-feature--reverse { flex-direction: column; text-align: center; gap: 30px; }
    .lt-feature__lede { margin-inline: auto; }
    .lt-checks { display: inline-flex; text-align: left; }
    .lt-read__grid { flex-direction: column; text-align: center; }
    .lt-quote, .lt-read__lede { margin-inline: auto; }
    .lt-read__legend { justify-content: center; }
    .lt-watch__inner { flex-direction: column; text-align: center; }
    .lt-stats { justify-content: center; }
}
@media (max-width: 420px) {
    .lt-hero__devices { transform: scale(0.92); }
    .lt-trust__item { flex: 1 1 100%; }
}

@media (prefers-reduced-motion: reduce) {
    .lt-hero__devices .lt-phone--front { animation: none; }
    .lt-faq__sign { transition: none; }
}