/* The public site (D242): the app's own colours, type and pills (src/Tablet.UI/wwwroot/tablet.css, desktop.css). */
:root {
    color-scheme: light;
    --bg: #fafafa;
    --surface: #ffffff;
    --ink: #111111;
    --muted: #5c5c5c;
    --line: #d4d4d4;
    --rule: #e8e8e8;
    --brand: #1c1c1c;
    --warn-bg: #fff1d6;
    --warn-ink: #7a4a00;
    --ok-bg: #dff3e6;
    --ok-ink: #14532d;
    --focus: #2563eb;
    --lvl-red: #c8102e;
    --lvl-yellow: #e0a100;
    --lvl-green: #1f8a4c;
    --lvl-non-injury: #5b6b80;
    --on-dark: #c9c9c9;
    --radius: 14px;
    --wrap: 1120px;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; scroll-padding-top: 88px; }

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
}

body {
    margin: 0;
    background: var(--bg);
    color: var(--ink);
    font: 18px/1.55 "Segoe UI", system-ui, -apple-system, Roboto, sans-serif;
    -webkit-text-size-adjust: 100%;
}

img { display: block; max-width: 100%; height: auto; }
a { color: inherit; }
:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }

h1, h2, h3 { margin: 0; letter-spacing: -0.02em; text-wrap: balance; }
h1 { font-size: clamp(2.25rem, 1.4rem + 3.6vw, 3.75rem); line-height: 1.06; letter-spacing: -0.035em; }
h2 { font-size: clamp(1.75rem, 1.3rem + 1.8vw, 2.5rem); line-height: 1.15; letter-spacing: -0.03em; }
h3 { font-size: 1.15rem; line-height: 1.3; }

.wrap { width: min(100% - 32px, var(--wrap)); margin-inline: auto; }
.wrap.wide { --wrap: 1280px; }
.wrap.narrow { --wrap: 840px; }

/* ---------- Top bar: the app's logo and name ---------- */

.top {
    position: sticky; top: 0; z-index: 10;
    border-bottom: 1px solid var(--rule);
    background: rgb(255 255 255 / 0.92);
    backdrop-filter: saturate(1.4) blur(10px);
}
.top-row { display: flex; align-items: center; gap: 28px; min-height: 64px; }
.wordmark {
    display: inline-flex; align-items: center; gap: 0.4em;
    color: var(--ink); font-size: 1.25rem; letter-spacing: -0.02em; text-decoration: none;
}
.wordmark b { font-weight: 700; }
.logo-mark { flex: none; width: 1.3em; height: 1.3em; color: var(--brand); }
.top-nav { display: flex; gap: 24px; margin-left: auto; }
.top-nav a { color: var(--muted); font-size: 0.95rem; font-weight: 600; text-decoration: none; }
.top-nav a:hover { color: var(--ink); }
.top-actions { display: flex; gap: 10px; }
/* Request a walkthrough says Walkthrough on a phone. */
.label-short { display: none; }

/* ---------- Buttons: the app's pills ---------- */

.button {
    display: inline-flex; align-items: center; justify-content: center;
    min-height: 48px; padding: 0 24px;
    border: 1px solid var(--line); border-radius: 999px;
    background: var(--surface); color: var(--ink);
    font: inherit; font-weight: 600; text-decoration: none; white-space: nowrap; cursor: pointer;
    transition: background-color 0.15s, border-color 0.15s;
}
.button:hover { border-color: var(--ink); }
.button.primary { border-color: var(--brand); background: var(--brand); color: #fff; }
.button.primary:hover { background: #000; }
.button.small { min-height: 40px; padding: 0 18px; font-size: 0.95rem; }

/* ---------- Sections ---------- */

section { padding: 96px 0; }
.band { border-block: 1px solid var(--rule); background: var(--surface); }
.section-lead { max-width: 46rem; margin: 18px 0 0; color: var(--muted); font-size: 1.125rem; }

.hero { padding: 80px 0 96px; text-align: center; }
.eyebrow {
    margin: 0 0 18px;
    color: var(--muted); font-size: 0.8rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase;
}
.lead { max-width: 44rem; margin: 24px auto 0; color: var(--muted); font-size: 1.2rem; }
.actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin-top: 32px; }
.note { margin: 16px 0 0; color: var(--muted); font-size: 0.9rem; }

.shot {
    margin: 0; overflow: hidden;
    border: 1px solid var(--rule); border-radius: var(--radius);
    background: var(--surface);
    box-shadow: 0 1px 2px rgb(0 0 0 / 0.05), 0 28px 60px -24px rgb(17 17 17 / 0.25);
}
.hero-shot { margin-top: 56px; }

/* ---------- The usual way against ResortHuddle ---------- */

.versus {
    width: 100%; margin-top: 40px;
    border: 1px solid var(--rule); border-radius: var(--radius); border-collapse: separate; border-spacing: 0; overflow: hidden;
    background: var(--bg); font-size: 1rem;
}
.versus th {
    padding: 16px 24px; background: var(--surface); text-align: left;
    color: var(--muted); font-size: 0.8rem; letter-spacing: 0.08em; text-transform: uppercase;
}
.versus th + th { color: var(--ink); }
.versus td { position: relative; width: 50%; padding: 14px 24px 14px 52px; border-top: 1px solid var(--rule); vertical-align: top; }
.versus td:first-child { color: var(--muted); }
.versus td + td { border-left: 1px solid var(--rule); background: var(--surface); font-weight: 600; }
.versus td::before { position: absolute; left: 24px; top: 14px; font-weight: 700; }
.versus td:first-child::before { content: "\00D7"; color: var(--lvl-red); font-size: 1.2rem; line-height: 1.3; }
.versus td + td::before {
    content: ""; left: 26px; top: 21px;
    width: 12px; height: 6px; border-bottom: 3px solid var(--lvl-green); border-left: 3px solid var(--lvl-green);
    transform: rotate(-45deg);
}
/* Management's own sum, under the table. */
.math { max-width: 46rem; margin: 32px 0 0; padding: 18px 22px; border-left: 4px solid var(--brand); border-radius: 0 var(--radius) var(--radius) 0; background: var(--bg); font-size: 1.05rem; }

/* What it brings, under the opening: two things today, one where it is heading. What is not built yet is dashed,
   here and wherever the page talks about the platform vision. Tags, headings and texts line up across the row. */
.values-section { padding: 0 0 96px; }
.values { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.value {
    display: grid; grid-row: span 3; grid-template-rows: subgrid; row-gap: 12px; justify-items: start;
    padding: 32px; border: 1px solid var(--rule); border-radius: var(--radius); background: var(--surface);
}
.value h2 { font-size: clamp(1.6rem, 1.2rem + 0.8vw, 1.85rem); }
.value p { margin: 0; color: var(--muted); font-size: 1.1rem; }
.value.next, .card.next, .module.beyond { border: 1px dashed var(--line); background: transparent; }
.tag { margin: 0; padding: 4px 12px; border-radius: 999px; font-size: 0.8rem; font-weight: 700; }
.tag.ok { background: var(--ok-bg); color: var(--ok-ink); }
.tag.warn { background: var(--warn-bg); color: var(--warn-ink); }
.tag.next { background: var(--rule); color: var(--ink); }
.card .tag, .module .tag { display: inline-block; margin-bottom: 12px; }

/* Words between the pictures: a column a reader can follow, a statement that carries the section, a closing line. */
.lead-strong { max-width: 44rem; margin: 20px auto 0; font-size: 1.2rem; font-weight: 650; text-wrap: balance; }
/* Two columns where a section tells the problem, then answers it. */
.split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 0 64px; align-items: start; }
.split > div > .statement:first-child { margin-top: 18px; }
.prose { max-width: 46rem; }
.prose p { margin: 18px 0 0; color: var(--muted); font-size: 1.125rem; }
.statement { max-width: 46rem; margin: 32px 0 0; font-size: 1.3rem; font-weight: 650; line-height: 1.4; letter-spacing: -0.01em; }
.prose-list { max-width: 46rem; margin-top: 20px; }
.tagline { margin: 44px 0 0; font-size: 1.3rem; font-weight: 700; letter-spacing: -0.015em; }
.disclaimer {
    max-width: 46rem; margin: 28px 0 0; padding: 14px 18px;
    border: 1px dashed var(--line); border-radius: var(--radius); color: var(--muted); font-size: 0.95rem;
}

/* The vision's questions, dashed: asked across the resort, not answered by the app yet. */
.asks { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 12px; margin: 28px 0 8px; padding: 0; list-style: none; }
.asks li { padding: 16px 20px; border: 1px dashed var(--line); border-radius: var(--radius); font-weight: 600; }

.cards { display: grid; gap: 16px; margin-top: 44px; }
.cards.three { grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr)); }
.cards.four { grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); }
.card { padding: 28px; border: 1px solid var(--rule); border-radius: var(--radius); background: var(--bg); }
.card h3 { margin-bottom: 10px; }
.card p { margin: 0; color: var(--muted); }

/* ---------- How it works: numbered like the start screen's questions ---------- */

.steps { display: grid; gap: 96px; margin: 64px 0 0; padding: 0; list-style: none; counter-reset: step; }
.step { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 56px; align-items: center; }
.step:nth-child(even) { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); }
.step:nth-child(even) .step-text { order: 2; }
/* A step whose pictures are wide, or two: its words above them, the pictures across the page. */
.step.across { grid-template-columns: minmax(0, 1fr); gap: 32px; }
.step.across .step-text { order: 0; max-width: 46rem; }
.step-text h3 { display: flex; align-items: center; gap: 14px; font-size: 1.5rem; letter-spacing: -0.025em; }
.step-text h3::before {
    counter-increment: step; content: counter(step);
    display: inline-grid; place-items: center; flex: none;
    width: 36px; height: 36px; border-radius: 50%;
    background: var(--brand); color: #fff; font-size: 1rem; letter-spacing: 0;
}
.step-text p { margin: 16px 0 0; color: var(--muted); }
/* A note in a step, set apart as the quick math is: the day legal wants one more form. */
.step-text .note { padding: 14px 18px; border-left: 4px solid var(--brand); border-radius: 0 var(--radius) var(--radius) 0; background: var(--surface); color: var(--ink); }
/* Each step's screen in the live demo, one click away. */
.step-link { display: inline-block; margin-top: 14px; font-weight: 600; text-underline-offset: 3px; }
.pair { display: grid; grid-template-columns: 1.15fr 1fr; gap: 16px; align-items: start; }
/* A wide screen beside a small one, about the same height. */
.pair.wide { grid-template-columns: 2.3fr 1fr; align-items: center; }

.levels { display: flex; flex-wrap: wrap; gap: 8px 20px; margin: 20px 0 0; padding: 0; list-style: none; font-size: 0.95rem; font-weight: 600; }
.levels li { display: inline-flex; align-items: center; gap: 8px; }
.levels li::before { content: ""; width: 10px; height: 10px; border-radius: 50%; background: var(--dot); }
.lvl-red { --dot: var(--lvl-red); }
.lvl-yellow { --dot: var(--lvl-yellow); }
.lvl-green { --dot: var(--lvl-green); }
.lvl-non-injury { --dot: var(--lvl-non-injury); }

/* ---------- Demo: one card per way in (the videos join them later) ---------- */

.dark { background: var(--brand); color: #fff; }
.dark .section-lead { color: var(--on-dark); }
.demo-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 20px; margin-top: 44px; }
.demo-card {
    display: flex; flex-direction: column; align-items: flex-start; gap: 14px;
    padding: 32px; border: 1px solid #333333; border-radius: var(--radius); background: #262626;
}
.demo-card h3 { font-size: 1.4rem; }
.demo-card p { margin: 0; color: var(--on-dark); }
.demo-card .button { margin-top: auto; }
.dark .button.primary { border-color: #fff; background: #fff; color: var(--ink); }
.dark .button.primary:hover { background: #e9e9e9; }

/* ---------- What a resort gets: paperwork and dispatch, the same at every size (D256) ---------- */

.modules { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 20px; margin-top: 44px; }
.module { padding: 32px; border: 1px solid var(--rule); border-radius: var(--radius); background: var(--surface); }
.module h3 { font-size: 1.5rem; }
.module-line { margin: 10px 0 0; font-weight: 600; }
.beyond p:last-child { margin: 14px 0 0; color: var(--muted); }

/* Pricing by the size of the mountain: the same tools for all, a bigger mountain for a bigger resort. */
.pricing {
    display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 28px 56px; align-items: center;
    margin-top: 44px; padding: 32px; border: 1px solid var(--rule); border-radius: var(--radius); background: var(--bg);
}
.pricing h3 { font-size: 1.5rem; letter-spacing: -0.025em; }
.pricing p { margin: 12px 0 0; color: var(--muted); font-size: 1.1rem; }
.pricing .pricing-small { font-size: 0.95rem; }
.sizes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin: 0; padding: 0; list-style: none; }
.sizes li {
    display: grid; justify-items: center; align-content: end; gap: 10px; padding: 20px 12px 16px;
    border: 1px solid var(--rule); border-radius: var(--radius); background: var(--surface); font-weight: 700;
}
.sizes svg { width: 100%; max-width: 120px; height: auto; color: var(--brand); }

/* Common questions: each answer folds open under its question, with no script. */
.faq { max-width: 52rem; margin-top: 40px; border-top: 1px solid var(--line); }
.faq details { border-bottom: 1px solid var(--line); }
.faq summary {
    display: flex; justify-content: space-between; align-items: baseline; gap: 20px;
    padding: 20px 0; font-size: 1.1rem; font-weight: 700; cursor: pointer; list-style: none;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; flex: none; color: var(--muted); font-size: 1.5rem; font-weight: 400; line-height: 1; }
.faq details[open] summary::after { content: "\2212"; }
.faq details p { max-width: 46rem; margin: 0 0 22px; color: var(--muted); }
.ticks { margin: 18px 0 0; padding: 0; list-style: none; }
.ticks li { position: relative; padding: 10px 0 10px 32px; border-top: 1px solid var(--rule); }
.ticks li::before {
    content: ""; position: absolute; left: 4px; top: 18px;
    width: 14px; height: 7px; border-bottom: 3px solid var(--lvl-green); border-left: 3px solid var(--lvl-green);
    transform: rotate(-45deg);
}

/* ---------- Closing, footer, the page for an unknown address ---------- */

.lost { padding: 120px 0; text-align: center; }
.lost .lead { margin-inline: auto; }

/* The page's last word beside the contact form (D247): a resort writes in, the message arrives by email. */
.closing-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 56px; align-items: center; }
.closing .actions { justify-content: flex-start; }
.contact-form {
    display: grid; gap: 16px; padding: 32px;
    border: 1px solid var(--rule); border-radius: var(--radius); background: var(--surface);
    box-shadow: 0 1px 2px rgb(0 0 0 / 0.05), 0 28px 60px -32px rgb(17 17 17 / 0.25);
}
.contact-form h3 { font-size: 1.5rem; letter-spacing: -0.025em; }
.contact-form p { margin: 0; color: var(--muted); }
.contact-row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 16px; }
.contact-form label { display: grid; gap: 6px; font-size: 0.95rem; font-weight: 600; }
.contact-form input, .contact-form textarea {
    width: 100%; padding: 11px 14px;
    border: 1px solid var(--line); border-radius: 10px; background: var(--bg); color: var(--ink); font: inherit; font-weight: 400;
}
.contact-form textarea { min-height: 112px; resize: vertical; }
.contact-form .button { justify-self: start; }
/* Kept off the screen, where only a bot fills it in. */
.contact-form .hp { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }

.foot { padding: 40px 0 56px; border-top: 1px solid var(--rule); color: var(--muted); font-size: 0.95rem; }
.foot-row { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 28px; }
.foot p { margin: 0; }
.foot .foot-end { margin-left: auto; }

/* ---------- Narrow screens ---------- */

/* The top bar's five links need about 1,150 px beside the name and both buttons. */
@media (max-width: 1180px) {
    .top-nav { display: none; }
    .top-actions { margin-left: auto; }
}

@media (max-width: 880px) {
    .values, .split, .pricing { grid-template-columns: minmax(0, 1fr); }
    .split > div > .statement:first-child { margin-top: 32px; }
    .step, .step:nth-child(even) { grid-template-columns: minmax(0, 1fr); gap: 28px; }
    .step:nth-child(even) .step-text { order: 0; }
    .closing-grid { grid-template-columns: minmax(0, 1fr); gap: 36px; }
}

@media (max-width: 560px) {
    body { font-size: 17px; }
    section { padding: 72px 0; }
    .hero { padding: 48px 0 72px; }
    .hero-shot { margin-top: 40px; }
    .lead { font-size: 1.1rem; }
    .steps { gap: 72px; }
    .pair, .pair.wide { grid-template-columns: 1fr; }
    .card, .demo-card, .module, .pricing { padding: 24px; }
    .values-section { padding-bottom: 72px; }
    .value { padding: 28px 24px; }
    .contact-form { padding: 24px; }
    .contact-row { grid-template-columns: minmax(0, 1fr); }
    .versus th { padding: 12px 14px; }
    .versus td { padding: 12px 12px 12px 34px; font-size: 0.95rem; }
    .versus td::before { left: 13px; top: 12px; }
    .versus td + td::before { left: 14px; top: 19px; }
    .foot .foot-end { margin-left: 0; }
}

@media (max-width: 480px) {
    /* Both buttons fit beside the mark alone; the link still says ResortHuddle to a screen reader. */
    .top-row { gap: 16px; }
    .wordmark span { display: none; }
    .top-actions { gap: 8px; }
    .top-actions .button.small { padding: 0 14px; }
    .label-long { display: none; }
    .label-short { display: inline; }
}