@font-face { font-family: "Manrope"; src: url("/assets/fonts/Manrope-wght.ttf") format("truetype"); font-weight: 300 800; font-display: swap; }
@font-face { font-family: "Space Grotesk"; src: url("/assets/fonts/SpaceGrotesk-wght.ttf") format("truetype"); font-weight: 400 700; font-display: swap; }
:root { color-scheme: dark; --tg-bg: #07110e; --tg-surface: #0e201a; --tg-ink: #f0f6f1; --tg-muted: #9aafa5; --tg-line: #26453a; --tg-mint: #50e0b4; --tg-sand: #e7e0c9; --tg-display: "Space Grotesk", sans-serif; --tg-body: "Manrope", sans-serif; }
* { box-sizing: border-box; }
html { scroll-behavior: smooth; background: var(--tg-bg); }
body { margin: 0; }
button, a { font: inherit; }
a { color: inherit; }
img { display: block; max-width: 100%; height: auto; }
h1, h2, p, figure { margin: 0; }
[hidden] { display: none !important; }
.trailglass-page { min-width: 320px; overflow-x: clip; background: radial-gradient(circle at 75% 12%, #123e31 0, transparent 30rem), var(--tg-bg); color: var(--tg-ink); font: 1rem/1.6 var(--tg-body); }
.trailglass-page a:focus-visible, .trailglass-page button:focus-visible { outline: 3px solid var(--tg-mint); outline-offset: 4px; }
.trailglass-nav, .trailglass-footer { width: min(100% - 32px, 1180px); margin-inline: auto; display: flex; align-items: center; justify-content: space-between; gap: 24px; }
.trailglass-nav { min-height: 76px; border-bottom: 1px solid var(--tg-line); }
.trailglass-wordmark { font: 700 .9rem/1 var(--tg-display); letter-spacing: .11em; text-decoration: none; text-transform: uppercase; }
.trailglass-lang { display: flex; gap: 4px; }
.trailglass-lang button { min-width: 44px; min-height: 44px; border: 0; border-radius: 99px; background: transparent; color: var(--tg-muted); cursor: pointer; font-weight: 800; }
.trailglass-lang button.is-active { background: var(--tg-mint); color: var(--tg-bg); }
.trailglass-hero { width: min(100% - 32px, 1180px); min-height: calc(100svh - 76px); margin-inline: auto; padding: clamp(64px, 10vw, 130px) 0; display: grid; align-items: center; gap: clamp(60px, 8vw, 110px); }
.trailglass-icon { width: 88px; border-radius: 22px; margin-bottom: 38px; box-shadow: 0 24px 70px #0008; }
.trailglass-eyebrow { margin-bottom: 18px; color: var(--tg-mint); font-size: .72rem; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; }
.trailglass-hero h1, .trailglass-privacy h2 { font: 600 clamp(3.15rem, 8vw, 7rem)/.92 var(--tg-display); letter-spacing: -.065em; }
.trailglass-hero h1 em { color: var(--tg-sand); font-style: normal; }
.trailglass-lede { max-width: 38rem; margin: 30px 0; color: var(--tg-muted); font-size: clamp(1.05rem, 2vw, 1.35rem); }
.trailglass-link { display: inline-block; color: var(--tg-mint); font-weight: 800; text-underline-offset: 5px; }
.trailglass-hero__devices { position: relative; min-height: 550px; display: grid; place-items: center; }
.trailglass-phone { width: min(72vw, 330px); overflow: hidden; border: 7px solid #20332c; border-radius: 54px; box-shadow: 0 42px 110px #000b; }
.trailglass-watch { position: absolute; right: 1%; bottom: 3%; width: min(38vw, 210px); overflow: hidden; border: 7px solid #263832; border-radius: 48px; box-shadow: 0 28px 70px #000c; }
.trailglass-watch figcaption { padding: 10px 12px 12px; background: #111b17; color: var(--tg-muted); font-size: .68rem; line-height: 1.35; text-align: center; }
.trailglass-features { width: min(100% - 32px, 1180px); margin: 0 auto; padding: 40px 0 130px; border-top: 1px solid var(--tg-line); }
.trailglass-features article { display: grid; grid-template-columns: 70px 1fr; gap: 18px; padding: 42px 0; border-bottom: 1px solid var(--tg-line); }
.trailglass-features article > span { color: var(--tg-mint); font: 700 .75rem/1 var(--tg-display); }
.trailglass-features h2 { font: 600 clamp(1.8rem, 4vw, 3.7rem)/1 var(--tg-display); letter-spacing: -.045em; }
.trailglass-features p { max-width: 43rem; margin-top: 16px; color: var(--tg-muted); }
.trailglass-privacy { padding: clamp(70px, 12vw, 160px) max(16px, calc((100vw - 1180px) / 2)); background: var(--tg-sand); color: #112019; }
.trailglass-privacy h2 { max-width: 880px; font-size: clamp(2.6rem, 7vw, 6.5rem); }
.trailglass-privacy p:not(.trailglass-eyebrow) { max-width: 46rem; margin: 28px 0; color: #42544b; }
.trailglass-privacy .trailglass-eyebrow, .trailglass-privacy .trailglass-link { color: #087759; }
.trailglass-footer { min-height: 120px; color: var(--tg-muted); }
.trailglass-footer strong { color: var(--tg-ink); }
.trailglass-footer nav { display: flex; flex-wrap: wrap; gap: 18px; }
.has-reveal-motion [data-reveal] { opacity: 0; transform: translateY(24px); transition: opacity .7s ease, transform .7s cubic-bezier(.16,1,.3,1); }
.has-reveal-motion [data-reveal].is-visible { opacity: 1; transform: none; }
@media (min-width: 820px) { .trailglass-hero { grid-template-columns: minmax(0, 1.05fr) minmax(340px, .7fr); } .trailglass-features article { grid-template-columns: 90px minmax(0, 1fr); padding-left: 8%; } }
@media (max-width: 600px) { .trailglass-watch { right: 0; } .trailglass-footer { align-items: flex-start; flex-direction: column; padding: 36px 0; } }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } [data-reveal] { opacity: 1; transform: none; transition: none; } }