/* The public website's marketing layout (landing, discipline pages, feature and reading pages).
   The palette, the logo and the card illustrations are the brand's everywhere (app.css); only this
   landing layout is web-only — the app opens on its own home screen instead. */
html:not(.native) .site-page .topbar .wrap { min-height: calc(var(--site-header-height) - 1px); }
html:not(.native) .site-page .topnav { column-gap: 1.8rem; }
html:not(.native) .site-page .topbar .brand { font-size: 1.25rem; letter-spacing: -.04em; gap: .7rem; }
html:not(.native) .site-page .topbar .brand-logo { width: 44px; height: 44px; }
html:not(.native) .site-page .btn { border-radius: 7px; min-height: 48px; }
html:not(.native) .site-page .btn-primary { background: var(--accent); text-shadow: none; }
html:not(.native) .site-page section.block { padding-block: 5rem; }
html:not(.native) .site-page .section-head { margin-bottom: 2rem; align-items: end; gap: 2rem; }
html:not(.native) .site-page .section-head > div { min-width: 0; }
html:not(.native) .site-page .section-head h2 { font-size: clamp(1.8rem, 3.2vw, 2.6rem); line-height: 1.15; letter-spacing: -.045em; }
html:not(.native) .site-page .eyebrow { display: flex; align-items: center; gap: .65rem; margin: 0 0 1rem; color: var(--accent); font-size: .7rem; line-height: 1.6; font-weight: 800; text-transform: uppercase; letter-spacing: .16em; }
html:not(.native) .site-page .text-link { display: inline-flex; align-items: center; gap: .8rem; color: var(--text); font-weight: 600; font-size: .88rem; }
html:not(.native) .site-page .text-link i { color: var(--accent); font-size: .8rem; }

/* the GPX player, said in a word: the words over the picture's dark side */
html:not(.native) .gpx-player { margin: 0; padding: 1.8rem 2rem; border-radius: 10px; }
html:not(.native) .gpx-player.card-art::after { background: linear-gradient(90deg, #101313 0%, rgba(16, 19, 19, .88) 45%, rgba(16, 19, 19, .35)); }
html:not(.native) .gpx-player .cta-card-text { max-width: 46ch; gap: .45rem; }
html:not(.native) .gpx-player .cta-card-text b { font-size: clamp(1.3rem, 2.2vw, 1.7rem); line-height: 1.2; letter-spacing: -.03em; }
html:not(.native) .gpx-player .cta-card-text > span { color: #c5c8c6; line-height: 1.6; }
html:not(.native) .gpx-player .eyebrow { margin: 0; }
html:not(.native) .site-page #gpxPlayer, html:not(.native) .site-page #upcomingEvents, html:not(.native) .site-page #whatsNew { padding-bottom: 0; }
/* signed in, the toolkit between them is not shown: the GPX player follows the roadbooks' own space */
html.signed-in:not(.native) .site-page #gpxPlayer { padding-top: 0; }

/* The landscape is a backdrop; every word and action stays real, selectable HTML. */
html:not(.native) .adventure-hero { position: relative; isolation: isolate; overflow: hidden; background: #101313; }
html:not(.native) .adventure-image { position: absolute; z-index: -2; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center top; }
html:not(.native) .adventure-hero::after { content: ''; position: absolute; z-index: -1; inset: 0; background: linear-gradient(90deg, #101313 0%, rgba(16,19,19,.96) 15%, rgba(16,19,19,.78) 35%, rgba(16,19,19,.1) 78%), linear-gradient(0deg, #101313 0%, transparent 30%); pointer-events: none; }
html:not(.native) .adventure-content { padding-top: 6rem; padding-bottom: 2rem; }
html:not(.native) .signal-dot { flex: none; width: 6px; height: 6px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 4px rgba(var(--accent-rgb), .12); }
html:not(.native) .adventure-hero h1 { max-width: 22ch; margin: 1.5rem 0; font-size: clamp(3rem, 5.4vw, 5rem); font-weight: 850; line-height: 1.04; letter-spacing: -.055em; text-wrap: balance; hyphens: auto; } /* a long compound (German) breaks with its hyphen, never mid-word without one */
html:not(.native) .adventure-hero h1 span { color: var(--accent); }
html:not(.native) .adventure-hero .lead { max-width: 43ch; margin: 0 0 2rem; font-size: 1.08rem; line-height: 1.75; color: #c5c8c6; }
html:not(.native) .adventure-hero .btnrow { gap: .75rem; }
html:not(.native) .adventure-hero .btn { font-size: .88rem; padding: .9rem 1.25rem; }
html:not(.native) .adventure-hero .btn-ghost { background: rgba(16,19,19,.75); border-color: rgba(255,255,255,.25); }
html:not(.native) .adventure-promise { display: flex; align-items: baseline; gap: .5rem; margin: 1.1rem 0 0; font-size: .95rem; font-weight: 650; color: #e4e7e5; } /* free, said where the eye lands after the buttons */
html:not(.native) .adventure-promise i { color: var(--accent); }

html:not(.native) .site-page .workflow { gap: 0; margin: 0 0 2rem; border: 1px solid var(--line); border-radius: 7px; overflow: hidden; }
html:not(.native) .site-page .workflow .wf-step { flex-direction: row; align-items: center; gap: .8rem; padding: 1.5rem 1.2rem; border: 0; border-radius: 0; background: transparent; text-align: left; }
html:not(.native) .site-page .workflow li + li { border-left: 1px solid var(--line); }
html:not(.native) .site-page .workflow .wf-step::before { position: static; content: '0' counter(wf); font-family: ui-monospace, monospace; font-weight: 400; font-size: .65rem; color: var(--muted); }
html:not(.native) .site-page .workflow .wf-step i { width: auto; height: auto; border: 0; background: transparent; border-radius: 0; font-size: 1rem; }
html:not(.native) .site-page .workflow .wf-step span { font-size: .8rem; }
html:not(.native) .site-page .workflow .wf-step:hover { transform: none; background: rgba(var(--accent-rgb), .05); }
html:not(.native) .site-page .flow { gap: 1rem; grid-template-columns: repeat(3, minmax(0, 1fr)); }
html:not(.native) .site-page .flow .step { position: relative; isolation: isolate; overflow: hidden; display: flex; flex-direction: column; align-items: start; text-align: left; background: var(--bg); padding: 1.7rem; border-radius: 8px; }
html:not(.native) .site-page .tool-art { position: absolute; z-index: -2; inset: 0 0 auto; width: 100%; height: 210px; object-fit: cover; object-position: center 28%; opacity: .7; pointer-events: none; }
html:not(.native) .site-page .flow .step:has(.tool-art)::after { content: ''; position: absolute; z-index: -1; inset: 0; pointer-events: none; background: linear-gradient(0deg, var(--bg) calc(100% - 205px), transparent calc(100% - 65px)), linear-gradient(90deg, rgba(16,19,19,.92), rgba(16,19,19,.35) 70%); }
html:not(.native) .site-page .flow .step:hover { border-color: rgba(var(--accent-rgb), .5); }
html:not(.native) .site-page .flow .step > i { background: rgba(var(--accent-rgb), .08); color: var(--accent); border: 1px solid rgba(var(--accent-rgb), .18); border-radius: 7px; width: 2.8rem; height: 2.8rem; font-size: 1.1rem; }
html:not(.native) .site-page .flow .step h3 { margin: 1rem 0 .55rem; font-size: 1.08rem; letter-spacing: -.02em; }
html:not(.native) .site-page .flow .step p { line-height: 1.7; }
html:not(.native) .site-page .flow .feat-more { padding-top: 1.2rem; margin-top: auto; }
html:not(.native) .site-page .gallery-card { border-radius: 9px; box-shadow: none; }
html:not(.native) .site-page .gallery-empty { width: 100%; grid-column: 1 / -1; padding: 2.5rem; border: 1px dashed var(--line); border-radius: 8px; color: var(--muted); text-align: center; }


html:not(.native) .demo-road { fill: none; stroke: #14110b; stroke-width: 8; stroke-linejoin: round; }
html:not(.native) .demo-branch { fill: none; stroke: #9a9a9a; stroke-width: 8; }
html:not(.native) .demo-head { fill: #14110b; }


html:not(.native) .site-page .foot { margin-top: 0; padding-top: 3.5rem; }
html:not(.native) .site-page .foot-bottom { margin-top: 2.5rem; }

/* A consistent reading rhythm for About, guides, install and tool presentation pages. */
html:not(.native) .site-page .page-col { padding-top: 4rem; }
html:not(.native) .site-page .page-col > h1,
html:not(.native) .site-page .about-intro h1,
html:not(.native) .site-page .doc > h1,
html:not(.native) .site-page .wiki-head h1,
html:not(.native) .site-page:not(.section-page) .tool-titlebar h1 { font-size: clamp(2.3rem, 4vw, 3.5rem); line-height: 1.12; letter-spacing: -.045em; }
html:not(.native) .site-page .feat-page { padding-top: 3rem; }
html:not(.native) .site-page .feat-hero { padding-block: 2rem 3.5rem; margin-bottom: 2.5rem; border-bottom: 1px solid var(--line); background: radial-gradient(ellipse at 50% 0%, rgba(var(--accent-rgb), .09), transparent 70%); }
html:not(.native) .site-page .feat-hero h1 { font-size: clamp(2rem, 3.7vw, 3.2rem); line-height: 1.15; letter-spacing: -.045em; }
html:not(.native) .site-page .feat-hero .lead { margin-top: 1.5rem; }
html:not(.native) .site-page .feat-section .feat-list > .feat-item { flex-basis: max(20em, 40%); }
html:not(.native) .site-page .feat-item { padding: 1.5rem; border-radius: 8px; }
html:not(.native) .site-page .feat-item > div { min-width: 0; }
html:not(.native) .site-page .feat-item p { line-height: 1.7; }
html:not(.native) .site-page .feat-nav-link { background: transparent; font-size: .75rem; }
html:not(.native) .site-page .about-sec { margin-top: 4rem; padding-top: 2.5rem; }
html:not(.native) .site-page .about-sec h2 { font-size: 1.8rem; letter-spacing: -.035em; }
html:not(.native) .site-page .team-card { background: var(--card); border-radius: 8px; padding: 1.75rem; }
html:not(.native) .site-page .about-figure img, html:not(.native) .site-page .about-gallery img { border-radius: 8px; }
html:not(.native) .site-page .wiki-container { padding-block: 2rem 4rem; }
html:not(.native) .site-page .wiki-nav { padding: 1.25rem; background: var(--card); border: 1px solid var(--line); border-radius: 8px; }
html:not(.native) .site-page .wiki-nav a { border-radius: 5px; }
html:not(.native) .site-page .doc { padding-top: 3rem; }

/* Discipline pages keep the landscape separate from the technical tool illustrations. */
html:not(.native) .discipline-content { padding-block: 2rem 5rem; }
html:not(.native) .breadcrumbs { display: flex; flex-wrap: wrap; align-items: center; gap: .7rem; margin-bottom: 3rem; color: #c5c8c6; font-size: .75rem; }
html:not(.native) .breadcrumbs a { color: inherit; }
html:not(.native) .breadcrumbs i { color: var(--accent); font-size: .55rem; }
html:not(.native) .discipline-hero h1 { max-width: 19ch; font-size: clamp(2.7rem, 4.5vw, 4.25rem); }
html:not(.native) .discipline-hero .lead { max-width: 49ch; }
html:not(.native) .discipline-content .btnrow, html:not(.native) .discipline-answers .btnrow, html:not(.native) .discipline-related .btnrow { justify-content: flex-start; }
html:not(.native) .discipline-intro, html:not(.native) .discipline-faq { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); gap: 4rem; align-items: start; }
html:not(.native) .discipline-intro h2, html:not(.native) .discipline-faq h2, html:not(.native) .discipline-related h2 { margin: 0; font-size: clamp(1.8rem, 3vw, 2.5rem); line-height: 1.2; letter-spacing: -.04em; }
html:not(.native) .discipline-intro p { margin: 0; color: var(--muted); line-height: 1.9; }
html:not(.native) .site-page .discipline-tools { background: #141717; border-block: 1px solid var(--line); }
html:not(.native) .discipline-answers { min-width: 0; }
html:not(.native) .discipline-answers details { border-bottom: 1px solid var(--line); padding-block: 1.4rem; }
html:not(.native) .discipline-answers details:first-child { padding-top: 0; }
html:not(.native) .discipline-answers summary { cursor: pointer; color: var(--text); font-size: 1rem; font-weight: 650; }
html:not(.native) .discipline-answers summary::marker { color: var(--accent); }
html:not(.native) .discipline-answers details p { margin: 1rem 0 0; font-size: .95rem; color: var(--muted); line-height: 1.8; }
html:not(.native) .discipline-answers .btnrow { gap: 1.5rem; margin-top: 1.5rem; }
html:not(.native) .site-page .discipline-related { padding-top: 0; }
html:not(.native) .discipline-related .btnrow { margin-top: 1.5rem; }

@media (max-width: 1024px) {
    html:not(.native) .adventure-content { padding-top: 2rem; }
    html:not(.native) .site-page section.block { padding-block: 3.5rem; }
    html:not(.native) .site-page .workflow .wf-step { flex-wrap: wrap; padding: 1.2rem .8rem; }
    html:not(.native) .discipline-intro, html:not(.native) .discipline-faq { gap: 2rem; }
}
@media (max-width: 760px) {
    html:not(.native) .site-page:not(.section-page) .wrap { padding-inline: 1.25rem; }
    html:not(.native) .site-page .section-head { align-items: start; flex-direction: column; gap: 1rem; }
    html:not(.native) .adventure-image { object-position: 40% top; }
    html:not(.native) .adventure-hero::after { background: linear-gradient(90deg, rgba(16,19,19,.92), rgba(16,19,19,.5)), linear-gradient(0deg, #101313, transparent 45%); }
    html:not(.native) .adventure-hero h1 { font-size: clamp(2.3rem, 9vw, 4.5rem); }
    html:not(.native) .adventure-hero .lead { max-width: 40ch; font-size: .98rem; }
    html:not(.native) .site-page .flow { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    html:not(.native) .site-page .flow:has(> :nth-child(3):last-child) { grid-template-columns: minmax(0, 1fr); }
    html:not(.native) .site-page .workflow { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    html:not(.native) .site-page .workflow li:nth-child(3) { border-left: 0; }
    html:not(.native) .site-page .workflow li:nth-child(n+3) { border-top: 1px solid var(--line); }
    html:not(.native) .gpx-player { padding: 1.4rem 1.25rem; }
    html:not(.native) .gpx-player.card-art::after { background: linear-gradient(0deg, #101313 30%, rgba(16, 19, 19, .7)); }
    html:not(.native) .site-page .page-col { padding-top: 2rem; }
    html:not(.native) .site-page .feat-page { padding-top: 1rem; }
    html:not(.native) .site-page .feat-section .feat-list > .feat-item { flex-basis: 100%; }
    html:not(.native) .discipline-content { padding-block: 1.5rem 3rem; }
    html:not(.native) .breadcrumbs { margin-bottom: 2.5rem; }
    html:not(.native) .discipline-hero h1 { font-size: clamp(2.5rem, 7.5vw, 3.5rem); }
    html:not(.native) .discipline-intro, html:not(.native) .discipline-faq { grid-template-columns: 1fr; }
    html:not(.native) .site-page .discipline-tools .flow { grid-template-columns: 1fr; }
}
@media (max-width: 440px) {
    html:not(.native) .site-page .flow { grid-template-columns: 1fr; }
    html:not(.native) .adventure-hero .btnrow { align-items: stretch; flex-direction: column; }
    html:not(.native) .adventure-hero .btn { justify-content: center; }
}

/* Public discovery: viewport-sized desktop hero, equal-height slides and translated HTML over artwork. */
html:not(.native) .showcase-brand { display: none; }
html.signed-in .home-discover { display: none; }
html:not(.signed-in) .home-members { display: none; }
html:not(.native) .home-carousel { position: relative; background: #101313; border-bottom: 1px solid var(--line); }
html.signed-in .home-carousel { display: none; }
html:not(.native) .carousel-track { display: grid; grid-template-columns: minmax(0,1fr); grid-template-rows: minmax(0,1fr); overflow: hidden; touch-action: pan-y; }
html:not(.native) .carousel-slide { grid-area: 1 / 1; min-width: 0; min-height: 0; opacity: 0; visibility: hidden; pointer-events: none; transition: opacity 1.2s ease-in-out, visibility 0s linear 1.2s; }
html:not(.native) .carousel-slide.is-active { opacity: 1; visibility: visible; pointer-events: auto; transition-delay: 0s; }
html:not(.native) .showcase-slide { position: relative; isolation: isolate; display: flex; overflow: hidden; }
html:not(.native) .showcase-backdrop { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; object-position: center; opacity: .8; filter: saturate(.65); pointer-events: none; }
html:not(.native) .showcase-slide::after { content: ''; position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, #101313 2%, rgba(16,19,19,.9) 28%, rgba(16,19,19,.34) 78%), linear-gradient(0deg, #101313, transparent 28%); pointer-events: none; }
html:not(.native) .showcase-layout { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(2rem, 5vw, 5rem); align-items: center; min-height: 35em; padding-block: 3.5rem; }
html:not(.native) .showcase-copy { min-width: 0; }
html:not(.native) .showcase-copy .eyebrow { flex-wrap: wrap; letter-spacing: .13em; }
html:not(.native) .showcase-free { margin-left: .6rem; border-left: 1px solid #69706b; padding-left: 1rem; color: #c5cec7; }
html:not(.native) .showcase-copy h1, html:not(.native) .showcase-copy h2 { font-size: clamp(2.6rem, 4.1vw, 4.2rem); font-weight: 820; line-height: 1.06; letter-spacing: -.055em; margin: 1.2rem 0 1.5rem; text-wrap: balance; hyphens: auto; }
html:not(.native) .showcase-copy h1 > span, html:not(.native) .showcase-copy h2 > span { display: block; }
html:not(.native) .showcase-copy em { display: block; font-style: normal; color: var(--accent); }
html:not(.native) .showcase-lead { max-width: 46ch; font-size: 1.05rem; line-height: 1.8; color: #bec5c0; margin: 0 0 1.8rem; }
html:not(.native) .showcase-copy .btnrow { justify-content: flex-start; flex-wrap: wrap; gap: .65rem; }
html:not(.native) .showcase-copy .btn { font-size: .86rem; padding: .85rem 1.15rem; }
html:not(.native) .showcase-copy .btn-ghost { background: rgba(16,19,19,.75); border-color: #58605a; }
html:not(.native) .showcase-detail { font-size: .72rem; letter-spacing: .025em; color: #a7b0a9; line-height: 1.8; margin: 1.3rem 0 0; }
html:not(.native) .showcase-visual { position: relative; isolation: isolate; min-width: 0; padding-block: 1rem; }
html:not(.native) .showcase-visual::before { content: ''; position: absolute; inset: -2rem -1.5rem; z-index: -1; background: radial-gradient(ellipse at 22% 25%, #ff7a1a38, transparent 65%), radial-gradient(ellipse at 82% 80%, #6bbbc824, transparent 62%); filter: blur(25px); pointer-events: none; opacity: .8; animation-name: showcase-glow; }
html:not(.native) .showcase-preview { display: flex; flex-direction: column; min-height: 25em; background: rgba(22,28,26,.96); border: 1px solid #626b61; border-radius: 16px; box-shadow: 0 28px 65px #0008, 0 0 0 1px #ffffff06, 0 0 40px #ff7a1a0a; overflow: hidden; transform: perspective(1400px) rotateX(2.5deg) rotateY(-5deg); animation-name: showcase-float; }
html:not(.native) .showcase-preview, html:not(.native) .showcase-visual::before { animation-duration: 16s; animation-timing-function: ease-in-out; animation-iteration-count: infinite; animation-play-state: paused; }
/* Start previews and glows together once the complete carousel is mounted, and keep their phase through crossfades. */
html:not(.native):not(.signed-in) .home-carousel.is-ready .showcase-preview,
html:not(.native):not(.signed-in) .home-carousel.is-ready .showcase-visual::before { animation-play-state: running; }
@keyframes showcase-float {
    0%, 100% { transform: perspective(1400px) rotateX(2.5deg) rotateY(-5deg); }
    25% { transform: perspective(1400px) rotateX(-3.75deg) rotateY(-1.25deg); }
    50% { transform: perspective(1400px) rotateX(-1.25deg) rotateY(5deg); }
    75% { transform: perspective(1400px) rotateX(3.75deg) rotateY(1.25deg); }
}
@keyframes showcase-glow {
    0%, 100% { transform: translate(-1%,1%) scale(.98); opacity: .8; }
    25% { transform: translate(1%,-2%) scale(1.02); opacity: .9; }
    50% { transform: translate(2%,1%) scale(1.04); opacity: 1; }
    75% { transform: translate(-1%,2%) scale(1.01); opacity: .9; }
}
html:not(.native) .preview-head { display: flex; flex-wrap: wrap; align-items: center; gap: .65rem; padding: 1rem 1.2rem; font-size: .8rem; font-weight: 700; border-bottom: 1px solid var(--line); }
html:not(.native) .preview-head > i { color: var(--accent); }
html:not(.native) .preview-lights { margin-left: auto; display: flex; gap: .3rem; }
html:not(.native) .preview-lights b { width: .35rem; height: .35rem; border-radius: 50%; background: #63716a; }
html:not(.native) .preview-foot { margin-top: auto; display: flex; align-items: baseline; gap: .6rem; padding: 1rem 1.2rem; font-size: .72rem; line-height: 1.55; color: #c5cec7; border-top: 1px solid var(--line); }
html:not(.native) .preview-foot > i { color: var(--accent); }
html:not(.native) .preview-editor-workspace { display: flex; flex: 1; flex-direction: column; justify-content: center; gap: 1rem; min-height: 0; padding: 1rem; }
html:not(.native) .preview-editor-note { container: showcase-note / inline-size; border: 2px solid var(--accent); border-radius: 9px; overflow: hidden; }
html:not(.native) .showcase-preview .nrow { display: grid; grid-template-columns: minmax(4.5em,.55fr) minmax(0,1.6fr) minmax(0,1fr); min-height: 0; font-size: .8rem; }
html:not(.native) .showcase-preview .nrow .col-distance { min-width: 0; }
html:not(.native) .showcase-preview .nrow .total { font-size: 1.35em; padding-inline: .2rem; }
html:not(.native) .showcase-preview .nrow .partial { font-size: .75em; }
html:not(.native) .showcase-preview .nrow .num { font-size: .7em; }
html:not(.native) .showcase-preview .nrow .col-text { font-size: .85em; line-height: 1.4; }
html:not(.native) .showcase-preview .nrow .coords { display: none; }
html:not(.native) .showcase-preview .nrow .col-vignette svg { display: block; width: 100%; height: auto; max-height: none; }
html:not(.native) .preview-editor-note .nrow { min-height: 12em; }
html:not(.native) .preview-editor-note .col-text { justify-content: center; gap: .6rem; }
html:not(.native) .preview-editor-note .col-text .text { flex: 0; }
html:not(.native) .preview-editor-palette { display: flex; align-items: center; gap: .8rem; color: #b4bfb6; font-size: .7rem; }
html:not(.native) .preview-editor-palette > span { display: flex; gap: .4rem; align-items: center; }
html:not(.native) .preview-editor-palette > div { display: grid; grid-template-columns: repeat(5,minmax(0,1fr)); flex: 1; min-width: 0; justify-items: center; gap: .4rem; padding: .5rem; border-radius: 7px; background: #fff; }
html:not(.native) .preview-editor-palette img { width: 2rem; max-width: 100%; height: 2rem; object-fit: contain; }
html:not(.native) .preview-editor-properties { display: grid; grid-template-columns: repeat(auto-fit,minmax(min(100%,5.5em),1fr)); gap: .6rem; margin: 0; font-size: .85rem; }
html:not(.native) .preview-editor-properties > div { min-width: 0; padding: .65rem .7rem; border: 1px solid #455047; border-radius: 8px; background: #232a26; }
html:not(.native) .preview-editor-properties dt { font-size: .6rem; color: #aebbb0; }
html:not(.native) .preview-editor-properties dd { margin: .25rem 0 0; font-size: .85rem; font-weight: 700; }
html:not(.native) .preview-autonotes { display: flex; flex: 1; flex-direction: column; min-height: 0; padding: .8rem 1rem; }
html:not(.native) .preview-auto-source { padding: .6rem .8rem 0; border: 1px solid #45564b; border-radius: 8px; background: #202b24; }
html:not(.native) .preview-auto-file { display: flex; align-items: center; gap: .6rem; font-size: .68rem; }
html:not(.native) .preview-auto-file i { color: var(--accent); }
html:not(.native) .preview-auto-file span { margin-left: auto; color: #aebbb0; }
html:not(.native) .preview-auto-source > svg { display: block; width: 100%; height: 4.2rem; }
html:not(.native) .preview-auto-crossroads { fill: none; stroke: #6b7d70; stroke-width: 3; }
html:not(.native) .preview-auto-process { display: flex; align-items: center; justify-content: center; gap: .5rem; padding: .65rem 0; font-size: .67rem; color: #e7eee8; }
html:not(.native) .preview-auto-process i { color: var(--accent); }
html:not(.native) .preview-paper { container: showcase-note / inline-size; display: flex; flex: 1; min-height: 0; flex-direction: column; overflow: hidden; border-radius: 7px; }
html:not(.native) .preview-paper .nrow { flex: 1; }
html:not(.native) .preview-paper .nrow .col-vignette { min-height: 0; }
html:not(.native) .preview-paper .nrow .col-vignette svg { height: 100%; max-height: 5.8rem; }
html:not(.native) .preview-paper .nrow .col-text { justify-content: center; }
html:not(.native) .preview-paper .nrow .col-text .text { flex: 0; }
@container showcase-note (max-width: 18em) {
    html:not(.native) .showcase-preview .nrow { grid-template-columns: minmax(4.5em,.55fr) minmax(0,2.6fr); }
    html:not(.native) .showcase-preview .nrow .col-text { grid-column: 1 / -1; margin-left: 0; border-left: 0; border-top: 1px solid #d7d7d7; padding: .6rem .7rem; }
    html:not(.native) .preview-editor-note .col-text { flex-direction: row; flex-wrap: wrap; align-items: center; justify-content: space-between; }
    html:not(.native) .preview-editor-note .col-text .text { flex: 1 1 10em; }
}
html:not(.native) .preview-map { position: relative; aspect-ratio: 2; background: linear-gradient(#10131322,#10131344), image-set(url('../brand/home/terrain-800.webp') 1x, url('../brand/home/terrain.webp') 2x) 76% center / 170%; }
html:not(.native) .preview-route { width: 100%; height: 100%; }
html:not(.native) .preview-trail { fill: none; stroke: var(--accent); stroke-width: 5; stroke-linecap: round; stroke-linejoin: round; }
html:not(.native) .preview-original { fill: none; stroke: #6bbbc8; stroke-width: 4; stroke-dasharray: 9 7; stroke-linejoin: round; }
html:not(.native) .preview-route > circle { fill: #f4f5f1; stroke: #101313; stroke-width: 3; }
html:not(.native) .preview-rider circle { fill: #1a2925; stroke: #e9f1eb; stroke-width: 2; }
html:not(.native) .preview-rider text { fill: #fff; text-anchor: middle; font-size: 15px; font-weight: 750; }
html:not(.native) .preview-navigation { display: flex; flex-direction: column; flex: 1; }
html:not(.native) .preview-map-navigation { aspect-ratio: 1.8; background-position: 60% 35%; background-size: 145%; }
html:not(.native) .preview-route .preview-location-halo { fill: #6bbbc82e; stroke: #6bbbc840; stroke-width: 1; }
html:not(.native) .preview-position { fill: #6fc7f2; stroke: #e5f6ff; stroke-width: 2; }
html:not(.native) .preview-north { position: absolute; right: 1rem; top: 1rem; display: grid; place-items: center; width: 2rem; height: 2rem; border: 1px solid #68766c; border-radius: 50%; background: #18221dde; color: #ecf2ec; }
html:not(.native) .preview-nav-instruments { display: flex; align-items: center; flex-wrap: wrap; gap: .7rem 1rem; padding: 1rem; background: #151c18; border-top: 1px solid #475249; }
html:not(.native) .preview-nav-instruments > div:not(.preview-tulip) { flex: 1 1 5em; display: flex; flex-direction: column; gap: .3rem; min-width: 0; }
html:not(.native) .preview-nav-instruments span { font-size: .65rem; color: #b4bfb6; }
html:not(.native) .preview-nav-instruments b { font-size: clamp(1.3rem,2.4vw,2rem); letter-spacing: -.04em; }
html:not(.native) .preview-nav-instruments small { font-size: .65rem; color: #b4bfb6; }
html:not(.native) .preview-tulip { width: 5rem; padding: .4rem; border-radius: 7px; background: #f4f5f1; }
html:not(.native) .preview-tulip svg { display: block; width: 100%; }
html:not(.native) .preview-revision { padding: 1rem; }
html:not(.native) .preview-branches { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: .65rem; }
html:not(.native) .preview-branch { min-width: 0; overflow: hidden; border: 1px solid #6bbbc860; border-radius: 9px; background: #142328; }
html:not(.native) .preview-branch-selected { border-color: #ff7a1aaa; background: #2b231b; }
html:not(.native) .preview-branch-title { display: flex; align-items: center; gap: .5rem; min-height: 3.6em; padding: .65rem .7rem; font-size: .7rem; color: #93d2df; }
html:not(.native) .preview-branch-title span { min-width: 0; }
html:not(.native) .preview-branch-selected .preview-branch-title { color: #ffaf69; }
html:not(.native) .preview-branch-map { aspect-ratio: 230 / 245; background-image: linear-gradient(#10131355,#10131322), image-set(url('../brand/home/together-800.webp') 1x, url('../brand/home/together.webp') 2x); background-size: 260%; }
html:not(.native) .preview-context { fill: none; stroke: #c7d0c966; stroke-width: 4; }
html:not(.native) .preview-muted-route { opacity: .3; }
html:not(.native) .preview-branch-distance { display: block; padding: .6rem .8rem; font-size: 1.25rem; }
html:not(.native) .preview-branch-distance small { font-size: .65rem; font-weight: 400; color: #b4bfb6; }
html:not(.native) .preview-revision-tools { display: flex; flex-wrap: wrap; gap: .65rem 1rem; padding-top: 1rem; font-size: .7rem; color: #d0d9d1; }
html:not(.native) .preview-revision-tools > span { display: flex; gap: .45rem; align-items: baseline; }
html:not(.native) .preview-revision-tools i { color: var(--accent); }
html:not(.native) .preview-event { flex: 1; background: #15221d; }
html:not(.native) .preview-event-summary { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 1.35rem; }
html:not(.native) .preview-event-summary > div { display: flex; flex-direction: column; gap: .5rem; min-width: 0; font-size: .7rem; color: #b8c6bc; }
html:not(.native) .preview-live-label { display: flex; align-items: baseline; gap: .5rem; color: #84d8b1; }
html:not(.native) .preview-event-summary b { color: #f4f5f1; font-size: 3.4rem; font-weight: 800; line-height: 1; letter-spacing: -.05em; }
html:not(.native) .preview-event-summary small { color: #95a99c; font-size: 1.3rem; font-weight: 500; }
html:not(.native) .preview-event-checkin { align-items: center; text-align: center; }
html:not(.native) .preview-event-checkin > i { display: grid; place-items: center; padding: .65rem; border-radius: 7px; background: #e7efe8; color: #14281b; font-size: 2.4rem; }
html:not(.native) .preview-event-map { position: relative; aspect-ratio: 520 / 255; background-color: #1b3027; background-image: linear-gradient(#81ba9620 1px,transparent 1px), linear-gradient(90deg,#81ba9620 1px,transparent 1px), radial-gradient(ellipse at 65% 45%,#37664b77,transparent 70%); background-size: 28px 28px,28px 28px,100% 100%; }
html:not(.native) .preview-event-course { fill: none; stroke: #94bfac; stroke-width: 3; stroke-dasharray: 4 5; }
html:not(.native) .preview-event-vehicle { position: absolute; display: flex; align-items: center; flex-direction: column; gap: .25rem; transform: translate(-50%,-50%); }
html:not(.native) .preview-event-vehicle > span { display: grid; place-items: center; width: 2.4rem; height: 1.9rem; border: 1px solid #8edcb5; border-radius: .55rem; background: #172c21; color: #eaf7ee; box-shadow: 0 0 0 .45rem #76d6a319, 0 3px 9px #0005; font-size: 1rem; }
html:not(.native) .preview-event-vehicle b { padding: .1rem .4rem; border-radius: 4px; background: #12251de6; color: #eaf7ee; font-size: .62rem; line-height: 1.3; }
html:not(.native) .vehicle-alex { left: 16.54%; top: 61.57%; }
html:not(.native) .vehicle-mika { left: 49.04%; top: 73.33%; }
html:not(.native) .vehicle-jamie { left: 70.96%; top: 27.84%; }
html:not(.native) .preview-event-roster { display: flex; gap: .6rem; padding: .9rem 1.2rem; }
html:not(.native) .preview-event-roster > span { display: flex; flex: 1; flex-wrap: wrap; min-width: 0; align-items: center; justify-content: center; gap: .4rem; padding: .5rem .4rem; border: 1px solid #416450; border-radius: 5px; font-size: .7rem; }
html:not(.native) .preview-event-roster small { color: #a5b8aa; font-size: .55rem; }
html:not(.native) .preview-event-roster i { color: #84d8b1; }
html:not(.native) .preview-club { display: flex; flex: 1; min-height: 0; flex-direction: column; }
html:not(.native) .preview-club-cover { position: relative; display: flex; align-items: flex-end; flex: 1; min-height: 4.5rem; isolation: isolate; }
html:not(.native) .preview-club-cover > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 48%; z-index: -2; }
html:not(.native) .preview-club-cover::after { content: ''; position: absolute; inset: 0; background: linear-gradient(0deg,#101c18f2,#101c180a); z-index: -1; }
html:not(.native) .preview-club-identity { display: flex; align-items: center; gap: .7rem; padding: .7rem 1rem; }
html:not(.native) .preview-club-badge { display: grid; place-items: center; width: 2.6rem; height: 2.6rem; flex: none; border: 1px solid #ffa44796; border-radius: .7rem; color: var(--accent); background: #1b231ce6; font-size: 1.25rem; }
html:not(.native) .preview-club-identity > div { display: flex; flex-direction: column; gap: .2rem; min-width: 0; }
html:not(.native) .preview-club-identity b { font-size: 1.15rem; letter-spacing: -.02em; }
html:not(.native) .preview-club-identity span:not(.preview-club-badge) { font-size: .65rem; color: #d1ded4; }
html:not(.native) .preview-club-content { display: flex; flex: none; flex-direction: column; gap: .7rem; padding: .8rem 1rem; }
html:not(.native) .preview-club-community { display: flex; align-items: center; flex-wrap: wrap; gap: .45rem; font-size: .65rem; color: #c3d0c7; }
html:not(.native) .preview-club-avatars { display: flex; padding-right: .2rem; }
html:not(.native) .preview-club-avatars span { display: grid; place-items: center; width: 1.6rem; height: 1.6rem; margin-left: -.3rem; border: 2px solid #18211b; border-radius: 50%; background: #80532e; color: #fff4e6; font-size: .48rem; font-weight: 800; }
html:not(.native) .preview-club-avatars span:first-child { margin-left: 0; }
html:not(.native) .preview-club-avatars span:nth-child(2) { background: #395f65; }
html:not(.native) .preview-club-avatars span:nth-child(3) { background: #65664a; }
html:not(.native) .preview-club-avatars span:last-child { background: #303e34; }
html:not(.native) .preview-club-event-count { display: flex; align-items: center; gap: .3rem; margin-left: auto; }
html:not(.native) .preview-club-event-count i, html:not(.native) .preview-club-section-title i { color: var(--accent); }
html:not(.native) .preview-club-section-title { display: flex; align-items: center; justify-content: space-between; margin-bottom: .4rem; font-size: .65rem; color: #c3d0c7; }
html:not(.native) .preview-club-section-title > span { display: flex; align-items: center; gap: .4rem; }
html:not(.native) .preview-club-section-title > b { font-size: .6rem; color: #9eafa3; }
html:not(.native) .preview-club-routes { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: .6rem; }
html:not(.native) .preview-club-route { min-width: 0; border: 1px solid #465647; border-radius: 8px; overflow: hidden; background: #1e2a22; }
html:not(.native) .preview-club-route-map { position: relative; height: 2.6rem; background: linear-gradient(#15251b55,#15251b66), image-set(url('../brand/home/terrain-800.webp') 1x, url('../brand/home/terrain.webp') 2x) center / cover; }
html:not(.native) .preview-club-route-map.coastal { background-position: 70% 30%; }
html:not(.native) .preview-club-route-map.coastal .preview-trail { stroke: #7bc5d0; }
html:not(.native) .preview-club-route-map > i { position: absolute; right: .4rem; top: .4rem; color: #fff; font-size: .6rem; text-shadow: 0 1px 5px #000; }
html:not(.native) .preview-club-route-info { display: flex; flex-direction: column; gap: .18rem; padding: .4rem .6rem; }
html:not(.native) .preview-club-route-info > b { font-size: .7rem; }
html:not(.native) .preview-club-route-info > span { color: #adbbb1; font-size: .58rem; }
html:not(.native) .preview-club-route-info > small { color: #7cc6b0; font-size: .55rem; }
html:not(.native) .preview-club-outing { display: flex; align-items: center; gap: .65rem; padding: .5rem .7rem; border: 1px solid #aa703d70; border-radius: 8px; background: linear-gradient(110deg,#63432940,#27372a40); }
html:not(.native) .preview-club-outing > i:first-child { color: var(--accent); font-size: 1.25rem; }
html:not(.native) .preview-club-outing > div { display: flex; flex: 1; flex-direction: column; gap: .2rem; min-width: 0; }
html:not(.native) .preview-club-outing span { color: #c1bbad; font-size: .58rem; }
html:not(.native) .preview-club-outing b { font-size: .75rem; }
html:not(.native) .preview-club-outing > i:last-child { color: var(--accent); font-size: .75rem; }
html:not(.native) .preview-recorder, html:not(.native) .preview-offline { display: flex; flex: 1; min-height: 0; flex-direction: column; }
html:not(.native) .preview-record-status { display: flex; flex-wrap: wrap; justify-content: space-between; gap: .5rem; padding: .8rem 1rem 0; font-size: .68rem; }
html:not(.native) .preview-record-status span { display: flex; align-items: center; gap: .5rem; }
html:not(.native) .preview-record-status i { color: var(--track); }
html:not(.native) .preview-record-status b { color: var(--ok); }
html:not(.native) .preview-record-distance { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; padding: .4rem 1rem .8rem; }
html:not(.native) .preview-record-distance b { font-size: 2.4rem; letter-spacing: -.05em; }
html:not(.native) .preview-record-distance small, html:not(.native) .preview-record-distance > span { font-size: .75rem; color: #b4bfb6; letter-spacing: normal; }
html:not(.native) .preview-record-map { flex: 1; min-height: 5rem; aspect-ratio: auto; }
html:not(.native) .preview-record-tools { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: .5rem; padding: .8rem 1rem; }
html:not(.native) .preview-record-tools > div { display: flex; align-items: center; justify-content: center; gap: .5rem; padding: .75rem .3rem; border: 1px solid #475249; border-radius: 8px; font-size: .7rem; }
html:not(.native) .preview-record-tools > div:first-child { background: var(--accent); color: var(--on-accent); border-color: var(--accent); font-weight: 700; }
html:not(.native) .preview-record-voice { display: flex; align-items: center; gap: 1rem; padding: 0 1rem .8rem; color: #b4bfb6; font-size: .7rem; }
html:not(.native) .preview-record-voice svg { flex: 1; min-width: 0; height: 1.5rem; }
html:not(.native) .preview-record-voice path { fill: none; stroke: #6bbbc8; stroke-width: 3; stroke-linecap: round; }
html:not(.native) .preview-offline-map { position: relative; flex: 1; min-height: 9rem; background: #cbd1b6; overflow: hidden; }
html:not(.native) .preview-offline-map > svg { position: absolute; inset: 0; }
html:not(.native) .preview-offline-contour { fill: none; stroke: #93a482; stroke-width: 1.5; }
html:not(.native) .preview-offline-water { fill: none; stroke: #8cbac5; stroke-width: 7; }
html:not(.native) .preview-offline-corridor { fill: none; stroke: #ffffff86; stroke-width: 50; stroke-linecap: round; stroke-linejoin: round; }
html:not(.native) .preview-offline-chip { position: absolute; top: .8rem; right: .8rem; display: flex; align-items: center; gap: .45rem; padding: .45rem .65rem; background: #16261e; color: #e2f2e6; border-radius: 20px; font-size: .68rem; }
html:not(.native) .preview-offline-chip i, html:not(.native) .preview-offline-download > .fa-circle-check { color: var(--ok); }
html:not(.native) .preview-offline-download { display: flex; align-items: center; gap: .8rem; padding: 1rem 1rem .8rem; }
html:not(.native) .preview-offline-download > .fa-map { color: var(--accent); font-size: 1.3rem; }
html:not(.native) .preview-offline-download > div { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: .3rem; font-size: .75rem; }
html:not(.native) .preview-offline-download span { color: #b4bfb6; font-size: .65rem; }
html:not(.native) .preview-offline-bar { height: .25rem; margin: 0 1rem; border-radius: 3px; background: var(--ok); }
html:not(.native) .preview-offline-note { display: flex; align-items: center; gap: .6rem; padding: .8rem 1rem 1rem; color: #b4bfb6; font-size: .68rem; }
html:not(.native) .carousel-dots { display: flex; justify-content: center; padding: 0 1rem .65rem; }
html:not(.native) .carousel-dot { display: grid; place-items: center; flex: 0 1 44px; min-width: 0; width: 44px; height: 44px; padding: 0; border: 0; border-radius: 50%; background: transparent; cursor: pointer; }
html:not(.native) .carousel-dot::after { content: ''; width: 7px; height: 7px; border-radius: 8px; background: #677269; transition: background-color .2s; }
html:not(.native) .carousel-dot:hover::after { background: #abb6ae; }
html:not(.native) .carousel-dot[aria-current]::after { background: var(--accent); }
html:not(.native) .carousel-dot:focus-visible { outline: 2px solid var(--accent); outline-offset: -6px; }
html:not(.native) .home-promise { border-bottom: 1px solid var(--line); background: #141917; }
html:not(.native) .home-promise .wrap { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 1rem 2rem; padding-block: 1.2rem; }
html:not(.native) .home-promise .wrap > span { display: flex; gap: .65rem; align-items: baseline; color: #b5bfb8; font-size: .78rem; }
html:not(.native) .home-promise i { color: var(--accent); }
html:not(.native) .site-page .home-toolkit .section-head h2 { max-width: 22ch; }
html:not(.native) .site-page .home-toolkit { background: transparent; border: 0; }
html:not(.native) .home-discover .section-head > *, html:not(.native) .home-discover .btn { max-width: 100%; min-width: 0; }
html:not(.native) .home-discover .text-link > span, html:not(.native) .home-discover .btn > span { min-width: 0; overflow-wrap: anywhere; }
html:not(.native):not(.signed-in) #gpxPlayer .cta-card-text { min-width: min(12rem,100%); }
html:not(.native):not(.signed-in) #gpxPlayer .cta-card-actions { min-width: 0; max-width: 100%; flex-shrink: 1; }
html:not(.native):not(.signed-in) #gpxPlayer .btn { min-width: 0; max-width: 100%; }
html:not(.native):not(.signed-in) #gpxPlayer .btn > span { min-width: 0; overflow-wrap: anywhere; }
html:not(.native) .home-tools { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 1rem; }
html:not(.native) .home-tool { display: flex; flex-direction: column; align-items: flex-start; padding: 1.7rem 1.4rem; border: 1px solid #303a33; border-radius: 12px; background: #141917; color: var(--text); text-decoration: none; min-width: 0; transition: border-color .2s, transform .2s; }
html:not(.native) .home-tool:hover { border-color: #a76936; transform: translateY(-3px); }
html:not(.native) .home-tool .card-art-image { opacity: .35; }
html:not(.native) .home-tool > i { display: grid; place-items: center; width: 2.8rem; height: 2.8rem; font-size: 1.2rem; border-radius: 9px; border: 1px solid #ff7a1a40; background: #ff7a1a12; color: var(--accent); }
html:not(.native) .home-tool h3 { margin: 1.2rem 0 .6rem; font-size: 1.08rem; letter-spacing: -.02em; }
html:not(.native) .home-tool p { margin: 0 0 1.5rem; color: #aeb9b1; font-size: .86rem; line-height: 1.75; }
html:not(.native) .home-tool-link { display: flex; justify-content: space-between; align-items: center; width: 100%; margin-top: auto; font-size: .78rem; color: var(--accent); }
html:not(.native) .home-join-panel { display: grid; grid-template-columns: minmax(0,1.25fr) minmax(0,1fr); gap: clamp(1.5rem,4vw,4rem); align-items: center; padding: clamp(1.25rem,4vw,4rem); border: 1px solid #80512d; border-radius: 20px; background: radial-gradient(ellipse at 0 0,#ff7a1a1c,transparent 60%), radial-gradient(ellipse at 100% 100%,#6bbbc814,transparent 65%), #151c19; box-shadow: 0 20px 60px #0003; }
html:not(.native) .home-join-copy, html:not(.native) .home-join-account { min-width: 0; }
html:not(.native) .home-join-copy h2 { font-size: clamp(2rem,3.4vw,3.5rem); line-height: 1.1; letter-spacing: -.045em; margin: 1rem 0 1.4rem; }
html:not(.native) .home-join-copy h2 > span, html:not(.native) .home-join-copy h2 > em { display: block; }
html:not(.native) .home-join-copy h2 > em { color: var(--accent); font-style: normal; }
html:not(.native) .home-join-copy > p:not(.eyebrow) { max-width: 42ch; color: #bac7bf; line-height: 1.75; }
html:not(.native) .home-join-benefits { display: grid; gap: .95rem; list-style: none; padding: 0; margin: 1.8rem 0; }
html:not(.native) .home-join-benefits li { display: flex; align-items: baseline; gap: .75rem; font-size: .9rem; color: #e4eae5; }
html:not(.native) .home-join-benefits i { width: 1.2em; flex: none; color: var(--accent); }
html:not(.native) .home-join-free { display: flex; align-items: baseline; gap: .5rem; color: #9bceb3; font-size: .8rem; }
html:not(.native) .home-join-account { padding: clamp(1rem,2.5vw,2rem); border: 1px solid #526055; border-radius: 14px; background: #101814; box-shadow: 0 12px 40px #0004; }
html:not(.native) .home-join-mark { display: grid; place-items: center; width: 2.8rem; height: 2.8rem; border: 1px solid #a96b3780; border-radius: .8rem; color: var(--accent); background: #ff7a1a12; font-size: 1.3rem; margin-bottom: 1rem; }
html:not(.native) .home-join-account h3 { margin: 0 0 .4rem; font-size: 1.3rem; line-height: 1.3; letter-spacing: -.025em; }
html:not(.native) .home-join-account > p.muted { font-size: .8rem; margin: 0 0 1.4rem; line-height: 1.6; }
html:not(.native) .home-join-account .social-btn { min-height: 46px; height: auto; padding-block: .65rem; }
html:not(.native) .home-join-account .social-hint { font-size: .68rem; line-height: 1.7; margin: .45rem 0; }
html:not(.native) .home-join-email { width: 100%; justify-content: center; min-height: 46px; }
html:not(.native) .home-join-login { margin: 1.1rem 0 0; text-align: center; font-size: .78rem; line-height: 1.8; color: #aebcb2; }
html:not(.native) .home-join-login a { color: var(--accent); font-weight: 700; white-space: nowrap; }
html:not(.native) .home-join-message { padding: .75rem; margin-bottom: .9rem; border: 1px solid var(--track); border-radius: 8px; color: var(--track); font-size: .85rem; }
@media (max-width: 760px) {
    html:not(.native) .home-join-panel { grid-template-columns: minmax(0,1fr); padding: clamp(1rem,4vw,1.5rem); }
    html:not(.native) .home-join-copy h2 { font-size: clamp(1.75rem,7vw,2.5rem); hyphens: auto; }
    html:not(.native) .home-join-account { padding: clamp(.75rem,3vw,1.25rem); }
}
html:not(.native) .site-page section.home-outside { padding-top: 0; }
html:not(.native) .home-outside-panel { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); border: 1px solid #39453c; border-radius: 16px; overflow: hidden; background: #18211b; }
html:not(.native) .home-outside-panel > img { width: 100%; height: 100%; object-fit: cover; }
html:not(.native) .home-outside-panel > div { padding: clamp(1.5rem,3vw,3rem); min-width: 0; }
html:not(.native) .home-outside-panel h2 { font-size: clamp(1.8rem,2.8vw,2.7rem); line-height: 1.15; letter-spacing: -.04em; margin: 0 0 1rem; }
html:not(.native) .home-outside-panel p:not(.eyebrow) { color: #b4c0b6; line-height: 1.75; font-size: .95rem; }
html:not(.native) .home-outside-panel .get-app { margin-block: 1.5rem; }
html:not(.native) .home-disciplines { display: flex; flex-wrap: wrap; gap: .75rem 1.2rem; margin-top: 1.5rem; padding-top: 1.5rem; border-top: 1px solid #39453c; }
html:not(.native) .home-disciplines a { display: inline-flex; gap: .5rem; align-items: center; color: #c6d0c8; font-size: .75rem; }
html:not(.native) .home-disciplines i { color: var(--accent); }
@media (min-width: 1025px) {
    html:not(.native) .home-carousel { height: calc(100svh - var(--site-header-height)); display: flex; flex-direction: column; }
    html:not(.native) .carousel-track { flex: 1; min-height: 0; }
    html:not(.native) .carousel-dots { flex: none; }
    html:not(.native) .showcase-layout { height: 100%; min-height: 0; padding-block: clamp(1rem,2.5svh,2.5rem); }
    html:not(.native) .showcase-copy h1, html:not(.native) .showcase-copy h2 { font-size: clamp(2rem,min(4.1vw,6.2svh),4.2rem); margin-block: clamp(.7rem,1.7svh,1.2rem) clamp(.8rem,2svh,1.5rem); }
    html:not(.native) .showcase-lead { font-size: clamp(.85rem,1.9svh,1.05rem); line-height: 1.65; margin-bottom: clamp(1rem,2.5svh,1.8rem); }
    html:not(.native) .showcase-detail { margin-top: clamp(.65rem,1.8svh,1.3rem); }
    html:not(.native) .showcase-visual { display: grid; place-items: center; align-self: stretch; min-height: 0; padding: 0; }
    html:not(.native) .showcase-preview { width: 100%; height: min(32rem,100%); min-height: 0; }
}
/* Cards fill the available row on phone and desktop: useful artwork takes the space, while
   the footer and nearby carousel dots keep a stable position through every crossfade. */
@media (min-width: 1025px), (max-width: 760px) {
    html:not(.native) .showcase-preview > .preview-head, html:not(.native) .showcase-preview > .preview-foot { flex: none; }
    html:not(.native) .preview-editor-note { flex: 1; min-height: 0; }
    html:not(.native) .preview-editor-note .nrow { height: 100%; min-height: 0; }
    html:not(.native) .preview-editor-note .col-vignette { min-height: 0; }
    html:not(.native) .preview-editor-note .nrow .col-vignette svg { height: 100%; }
    html:not(.native) .preview-navigation, html:not(.native) .preview-revision, html:not(.native) .preview-event { flex: 1; min-height: 0; display: flex; flex-direction: column; }
    html:not(.native) .preview-map-navigation, html:not(.native) .preview-branches, html:not(.native) .preview-event-map { flex: 1; min-height: 0; }
    html:not(.native) .preview-branch { display: flex; flex-direction: column; }
    html:not(.native) .preview-branch-map { flex: 1; min-height: 0; }
}
@media (max-width: 1100px) {
    html:not(.native) .showcase-layout { gap: 2rem; }
    html:not(.native) .home-tools { grid-template-columns: repeat(2,minmax(0,1fr)); }
}
@media (max-width: 1024px) {
    html:not(.native) .preview-club-cover { min-height: 8.5rem; }
    html:not(.native) .showcase-brand { display: block; padding-top: 1.1rem; }
    html:not(.native) .showcase-brand a { display: inline-flex; align-items: center; }
    html:not(.native) .showcase-brand a span { margin-left: -.65rem; color: var(--accent); }
}
@media (max-width: 760px) {
    html:not(.native) .showcase-slide::after { background: linear-gradient(180deg, rgba(16,19,19,.76), rgba(16,19,19,.83) 55%, #101313); }
    html:not(.native) .showcase-layout { grid-template-columns: minmax(0,1fr); grid-template-rows: auto 1fr; gap: 1.6rem; padding-block: 2.2rem 1.1rem; align-content: stretch; align-items: start; }
    html:not(.native) .showcase-copy h1, html:not(.native) .showcase-copy h2 { font-size: clamp(2.3rem,8.6vw,3.6rem); max-width: 20ch; }
    html:not(.native) .showcase-lead { font-size: .94rem; line-height: 1.7; }
    html:not(.native) .showcase-visual { display: grid; padding: 0; align-self: stretch; width: 100%; max-width: 32em; margin-inline: auto; }
    html:not(.native) .showcase-preview { height: 100%; border-radius: 11px; min-height: 0; }
    html:not(.native) .preview-head, html:not(.native) .preview-foot { padding: .7rem 1rem; }
    html:not(.native) .preview-editor-workspace { padding: .7rem; gap: .7rem; }
    html:not(.native) .preview-autonotes { padding: .7rem; }
    html:not(.native) .preview-record-map { min-height: 9rem; }
    html:not(.native) .preview-offline-map { min-height: 13rem; }

    html:not(.native) .home-promise .wrap { justify-content: flex-start; }
    html:not(.native) .home-outside-panel { grid-template-columns: minmax(0,1fr); }
    html:not(.native) .home-outside-panel > img { aspect-ratio: 2; height: auto; }
}
@media (max-width: 440px) {
    html:not(.native) .home-tools { grid-template-columns: minmax(0,1fr); }
    html:not(.native) .showcase-copy .btn { flex: 1 1 auto; justify-content: center; }
}
@media (prefers-reduced-motion: reduce) {
    html:not(.native) .home-tool, html:not(.native) .carousel-dot::after, html:not(.native) .carousel-slide { transition: none; }
    html:not(.native) .showcase-preview, html:not(.native) .showcase-visual::before { animation: none; transform: none; }
}