/* Landing page styles. Loaded after style.css and inherits its Recorrido design
   tokens (--ink, --accent, --line, ...). Everything here is .lp-* scoped so the
   app's own component styles are never affected; the few bare-element overrides
   below exist only to undo style.css's app-oriented h1/h2/body defaults, which
   assume a narrow centered card rather than a full-width marketing page. */

body.lp-body {
    padding: 0;
    background: var(--bg);
}

.lp-body h1,
.lp-body h2,
.lp-body h3 {
    text-align: left;
    color: var(--ink);
    margin: 0;
    font-weight: 700;
    letter-spacing: -0.02em;
}

/* The page's side gutter. Every band's inner element carries this class, which is what keeps
   text off the edge of a phone screen.

   Anything that shares an element with .lp-shell must set its vertical padding with the
   padding-top/padding-bottom longhands, never the `padding` shorthand: the shorthand also
   writes the left and right values, and since these rules have the same specificity the winner
   is decided purely by which one appears later in this file. That is how the gutter was
   silently lost on two sections and the closing call to action - their text sat flat against
   the left edge on a phone - while the hero, whose rule happens to come earlier, kept it. */
.lp-shell {
    max-width: 1080px;
    margin: 0 auto;
    padding: 0 24px;
}

/* ---------------- header ---------------- */

.lp-header {
    position: sticky;
    top: 0;
    z-index: 50;
    background: rgba(251, 251, 252, 0.9);
    backdrop-filter: saturate(160%) blur(8px);
    border-bottom: 1px solid var(--line);
}

.lp-header-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding-top: 14px;
    padding-bottom: 14px;
}

.lp-brand {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    font-size: 1.05rem;
    font-weight: 700;
    letter-spacing: -0.02em;
    color: var(--ink);
    text-decoration: none;
    white-space: nowrap;
}

.lp-brand img {
    width: 22px;
    height: 22px;
    border-radius: 5px;
}

.lp-nav {
    display: flex;
    align-items: center;
    gap: 10px;
}

.lp-nav-link {
    color: var(--ink-2);
    text-decoration: none;
    font-size: 0.92rem;
    font-weight: 600;
    padding: 9px 10px;
    border-radius: var(--radius-sm);
    white-space: nowrap;
}

.lp-nav-link:hover {
    color: var(--accent);
}

.lp-btn {
    display: inline-block;
    padding: 11px 18px;
    border-radius: var(--radius-sm);
    background: var(--accent);
    color: var(--accent-ink);
    font-size: 0.92rem;
    font-weight: 650;
    letter-spacing: 0.01em;
    text-decoration: none;
    border: 1px solid var(--accent);
    transition: filter 0.15s, transform 0.15s;
    white-space: nowrap;
}

.lp-btn:hover {
    filter: brightness(0.92);
    transform: translateY(-1px);
}

.lp-btn-ghost {
    background: transparent;
    color: var(--ink);
    border-color: var(--line-strong);
}

.lp-btn-ghost:hover {
    border-color: var(--accent);
    color: var(--accent);
    filter: none;
}

.lp-btn-lg {
    padding: 14px 24px;
    font-size: 1rem;
}

/* ---------------- shared section furniture ---------------- */

.lp-eyebrow {
    display: block;
    font-family: var(--mono);
    font-size: 0.69rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--ink-3);
    margin-bottom: 14px;
}

.lp-section {
    padding-top: 72px;
    padding-bottom: 72px;
    border-top: 1px solid var(--line);
}

.lp-section-head {
    max-width: 54ch;
    margin-bottom: 36px;
}

.lp-section-head h2 {
    font-size: clamp(1.5rem, 3.2vw, 2rem);
    line-height: 1.15;
}

.lp-section-head p {
    margin: 12px 0 0;
    color: var(--ink-2);
    font-size: 1.02rem;
    line-height: 1.6;
    max-width: 48ch;
}

/* ---------------- hero ---------------- */

.lp-hero {
    display: grid;
    grid-template-columns: 1.05fr 0.95fr;
    gap: 56px;
    align-items: center;
    padding-top: 76px;
    padding-bottom: 84px;
}

.lp-hero h1 {
    font-size: clamp(2.1rem, 5vw, 3.25rem);
    line-height: 1.06;
    text-wrap: balance;
}

.lp-lede {
    margin: 20px 0 0;
    color: var(--ink-2);
    font-size: 1.1rem;
    line-height: 1.6;
    max-width: 46ch;
}

.lp-hero-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 30px;
}

.lp-hero-note {
    margin: 18px 0 0;
    color: var(--ink-3);
    font-size: 0.88rem;
}

/* ---------------- hero visual: the day as a route ---------------- */

.lp-hero-visual {
    margin: 0;
}

.lp-route-card {
    background: var(--surface);
    border: 1px solid var(--line-strong);
    border-radius: var(--radius);
    overflow: hidden;
    box-shadow: 0 1px 2px rgba(17, 19, 24, 0.05);
}

.lp-route-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 13px 16px;
    background: var(--ink);
    color: #fff;
}

.lp-route-bar strong {
    font-size: 0.9rem;
    font-weight: 650;
    letter-spacing: -0.01em;
}

.lp-route-bar span {
    font-family: var(--mono);
    font-size: 0.72rem;
    opacity: 0.75;
}

.lp-route {
    position: relative;
    padding: 18px 18px 18px 44px;
}

.lp-route::before {
    content: "";
    position: absolute;
    left: 24px;
    top: 26px;
    bottom: 26px;
    width: 2px;
    background: var(--accent);
    border-radius: 2px;
}

.lp-stop {
    position: relative;
    padding: 7px 0;
}

.lp-stop::before {
    content: "";
    position: absolute;
    left: -25px;
    top: 12px;
    width: 11px;
    height: 11px;
    border-radius: 50%;
    background: var(--surface);
    border: 2.5px solid var(--accent);
}

.lp-stop-head {
    display: flex;
    align-items: baseline;
    gap: 9px;
    flex-wrap: wrap;
}

.lp-stop-time {
    font-family: var(--mono);
    font-size: 0.8rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    color: var(--ink);
}

.lp-stop-name {
    font-size: 0.87rem;
    font-weight: 620;
    color: var(--ink);
}

.lp-stop-meta {
    margin: 2px 0 0;
    font-size: 0.78rem;
    color: var(--ink-2);
}

.lp-pill {
    margin-left: auto;
    font-family: var(--mono);
    font-size: 0.62rem;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    padding: 3px 7px;
    border-radius: 2px;
    border: 1px solid currentColor;
    white-space: nowrap;
}

.lp-pill-ok { color: var(--ok); }
.lp-pill-warn { color: var(--warn); }

.lp-leg {
    position: relative;
    margin: 2px 0;
    padding: 6px 0;
    font-family: var(--mono);
    font-size: 0.66rem;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    color: var(--warn);
}

.lp-leg::before {
    content: "";
    position: absolute;
    left: -20.5px;
    top: 0;
    bottom: 0;
    width: 2px;
    background: repeating-linear-gradient(to bottom, var(--warn) 0 3px, transparent 3px 6px);
}

.lp-gap {
    border: 1px dashed var(--line-strong);
    border-radius: var(--radius-sm);
    padding: 8px 10px;
    margin: 6px 0;
    font-size: 0.78rem;
    color: var(--ink-2);
}

.lp-gap strong {
    color: var(--ink);
    font-weight: 640;
}

.lp-route-foot {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    padding: 11px 16px;
    border-top: 1px solid var(--line);
    background: var(--bg);
    font-size: 0.78rem;
    color: var(--ink-2);
}

.lp-route-foot .lp-money {
    font-family: var(--mono);
    font-variant-numeric: tabular-nums;
    color: var(--ink);
    font-weight: 650;
}

.lp-figcaption {
    margin-top: 12px;
    text-align: center;
    font-size: 0.8rem;
    color: var(--ink-3);
}

/* ---------------- highlight band ---------------- */

.lp-band {
    border-top: 1px solid var(--line);
    background: var(--accent-soft);
}

.lp-band-inner {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 20px;
    align-items: start;
    padding-top: 40px;
    padding-bottom: 40px;
}

.lp-band-mark {
    font-family: var(--mono);
    font-size: 0.69rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--accent);
    padding-top: 5px;
    white-space: nowrap;
}

.lp-band h2 {
    font-size: clamp(1.25rem, 2.6vw, 1.6rem);
    line-height: 1.2;
}

.lp-band p {
    margin: 10px 0 0;
    color: var(--ink-2);
    font-size: 1rem;
    line-height: 1.6;
    max-width: 62ch;
}

/* ---------------- feature cards ---------------- */

.lp-grid {
    display: grid;
    gap: 18px;
}

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

.lp-card {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: 24px;
}

.lp-card-num {
    font-family: var(--mono);
    font-size: 0.69rem;
    letter-spacing: 0.1em;
    color: var(--accent);
    display: block;
    margin-bottom: 10px;
}

.lp-card h3 {
    font-size: 1.08rem;
    line-height: 1.25;
}

.lp-card p {
    margin: 10px 0 0;
    color: var(--ink-2);
    font-size: 0.95rem;
    line-height: 1.6;
}

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

.lp-cta {
    background: var(--ink);
    color: #fff;
}

.lp-cta-inner {
    padding-top: 68px;
    padding-bottom: 68px;
    text-align: center;
}

.lp-cta h2 {
    color: #fff;
    text-align: center;
    font-size: clamp(1.6rem, 3.4vw, 2.15rem);
    line-height: 1.15;
}

.lp-cta p {
    margin: 14px auto 0;
    color: #A8B0BB;
    font-size: 1.02rem;
    line-height: 1.6;
    max-width: 52ch;
}

.lp-cta .lp-btn {
    margin-top: 28px;
}

/* ---------------- footer ---------------- */

.lp-footer {
    border-top: 1px solid var(--line);
    padding: 28px 0;
}

.lp-footer-inner {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    font-size: 0.85rem;
    color: var(--ink-3);
}

.lp-footer a {
    color: var(--ink-2);
    text-decoration: none;
    font-weight: 600;
}

.lp-footer a:hover {
    color: var(--accent);
    text-decoration: underline;
}

.lp-footer-links {
    display: flex;
    flex-wrap: wrap;
    gap: 18px;
}

/* ---------------- responsive ---------------- */

@media (max-width: 900px) {
    .lp-hero {
        grid-template-columns: 1fr;
        gap: 40px;
        padding-top: 52px;
        padding-bottom: 60px;
    }

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

    .lp-band-inner {
        grid-template-columns: 1fr;
        gap: 10px;
    }
}

@media (max-width: 640px) {
    .lp-shell { padding: 0 16px; }

    .lp-section { padding-top: 52px; padding-bottom: 52px; }

    .lp-grid-2,
    .lp-grid-3 { grid-template-columns: 1fr; }

    /* Three items have to share a phone-width header without wrapping.
       Tuning the paddings gets them close, but "close" overflowed by 4px at 360px and would
       break again on any longer word or wider font. So one item is made shrinkable: the nav
       keeps its natural size and the brand gives up space instead, truncating rather than
       pushing the row - and with it the whole page - wider than the screen. */
    .lp-header-inner { gap: 10px; }
    .lp-brand {
        font-size: 0.94rem;
        min-width: 0;
        overflow: hidden;
    }
    .lp-brand span {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
    .lp-brand img { flex: 0 0 auto; }
    .lp-nav { gap: 4px; flex: 0 0 auto; }
    .lp-nav-link { padding: 9px 4px; font-size: 0.84rem; }
    .lp-header .lp-btn { padding: 10px 13px; font-size: 0.84rem; }

    .lp-hero-actions .lp-btn { flex: 1 1 100%; text-align: center; }

    .lp-cta-inner { padding-top: 52px; padding-bottom: 52px; }
}

@media (hover: none) {
    .lp-btn:hover { filter: none; transform: none; }
}