/*
 * Landing page (Components/Pages/Home.razor).
 *
 * The page is laid out in plain HTML rather than MudBlazor components, because it has to look
 * like the app and not like Material: the colours, the Instrument Serif headings and the IBM
 * Plex Mono figures are the ones the MAUI app uses, so a screenshot and the page around it
 * belong to each other. Everything here is prefixed lp- and used nowhere else.
 */

:root {
    --lp-navy: #1D294A;          /* TextPrimary, and the app's ink */
    --lp-indigo: #2A3E74;        /* TwilightIndigo */
    --lp-gold: #E9C780;          /* SunriseGold */
    --lp-cyan: #35B7C8;          /* GlacierCyan */
    --lp-ink-dark: #0F1626;      /* the hero ground, a shade under the app's dark surface */
    --lp-ground: #F7F8FA;
    --lp-body: #4B5563;
    --lp-muted: #6B7280;
    --lp-line: #E5E7EB;
    --lp-on-dark-dim: #C9D2E4;
    --lp-on-dark-faint: #8A98B5;
}

.lp-section {
    width: 100%;
    font-family: 'Inter', 'Helvetica Neue', Helvetica, sans-serif;
    color: var(--lp-navy);
}

.lp-dark {
    background: var(--lp-ink-dark);
    color: #FFFFFF;
}

.lp-wrap {
    max-width: 1180px;
    margin: 0 auto;
    padding: 0 40px;
}

.lp-display {
    font-family: 'Instrument Serif', Georgia, 'Times New Roman', serif;
    font-weight: 400;
}

.lp-mono {
    font-family: 'IBM Plex Mono', 'SFMono-Regular', Consolas, monospace;
}

.lp-eyebrow {
    font-family: 'IBM Plex Mono', 'SFMono-Regular', Consolas, monospace;
    font-size: 12px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

/* Two-column band. The aside carries a phone screenshot and gives way first, so the
   screenshot sits under the copy on a phone instead of squeezing beside it. */
.lp-split {
    display: flex;
    flex-wrap: wrap;
    gap: 56px;
    align-items: center;
}

.lp-split-main {
    flex: 999 1 420px;
    min-width: 0;
}

.lp-split-aside {
    flex: 1 1 300px;
    min-width: 0;
    display: flex;
    justify-content: center;
}

/* Image first in the source so it reads before the copy when the row stacks. */
.lp-split-reverse .lp-split-aside {
    order: 2;
}

.lp-split-reverse .lp-split-main {
    order: 1;
}

.lp-shot {
    width: 100%;
    max-width: 320px;
    height: auto;
    border-radius: 32px;
    box-shadow: 0 20px 48px rgba(29, 41, 74, 0.16);
}

.lp-shot-dark {
    box-shadow: 0 30px 70px rgba(0, 0, 0, 0.5);
}

.lp-shot-pair {
    max-width: 300px;
    border-radius: 30px;
}

/* Icon plus two lines, used for the three billing points. */
.lp-point {
    display: flex;
    gap: 18px;
    align-items: flex-start;
}

.lp-point-icon {
    flex: 0 0 auto;
    width: 44px;
    height: 44px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.lp-point-title {
    margin: 0 0 6px;
    font-size: 17px;
    font-weight: 600;
    color: var(--lp-navy);
}

.lp-point-text {
    margin: 0;
    font-size: 16px;
    line-height: 1.6;
    color: var(--lp-body);
}

.lp-tiles {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 20px;
    max-width: 28em;
}

.lp-tile {
    background: #FFFFFF;
    border: 1px solid var(--lp-line);
    border-radius: 14px;
    padding: 18px 20px;
}

.lp-tile-label {
    font-size: 14px;
    color: var(--lp-muted);
    margin-bottom: 6px;
}

.lp-tile-value {
    font-size: 24px;
    color: var(--lp-navy);
}

.lp-checklist {
    margin: 0;
    padding: 0;
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.lp-checklist li {
    display: flex;
    gap: 12px;
    align-items: flex-start;
    font-size: 16px;
    line-height: 1.6;
    color: #374151;
}

.lp-checklist li svg {
    flex: 0 0 auto;
    margin-top: 2px;
}

/* 52px tall: a comfortable target, and the same height whether the label wraps or not. */
.lp-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    min-height: 52px;
    padding: 0 30px;
    border-radius: 12px;
    font-size: 16px;
    font-weight: 600;
    text-decoration: none;
    border: 1px solid transparent;
    cursor: pointer;
}

.lp-btn:hover {
    text-decoration: none;
}

.lp-btn-gold {
    background: var(--lp-gold);
    color: var(--lp-ink-dark);
}

.lp-btn-gold:hover {
    background: #F0D399;
    color: var(--lp-ink-dark);
}

.lp-btn-ghost {
    border-color: #3A4765;
    color: #FFFFFF;
    font-weight: 500;
}

.lp-btn-ghost:hover {
    border-color: #566A8E;
    color: #FFFFFF;
}

.lp-btn-navy {
    background: var(--lp-navy);
    color: #FFFFFF;
    min-height: 48px;
}

.lp-btn-navy:hover {
    background: var(--lp-indigo);
    color: #FFFFFF;
}

.lp-btn-outline {
    border-color: var(--lp-navy);
    color: var(--lp-navy);
    min-height: 48px;
}

.lp-btn-outline:hover {
    background: var(--lp-navy);
    color: #FFFFFF;
}

.lp-save-badge {
    font-family: 'IBM Plex Mono', 'SFMono-Regular', Consolas, monospace;
    font-size: 11px;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    background: #E6F6F8;
    color: #17707C;
    padding: 5px 10px;
    border-radius: 999px;
}

.lp-plans {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 28px;
    max-width: 840px;
    margin: 0 auto;
}

.lp-plan {
    position: relative;
    border: 1px solid var(--lp-line);
    border-radius: 20px;
    padding: 36px 32px;
    background: #FFFFFF;
    display: flex;
    flex-direction: column;
}

.lp-plan-featured {
    border: 2px solid var(--lp-gold);
    background: #FFFDF8;
}

.lp-plan-badge {
    position: absolute;
    top: -13px;
    left: 32px;
    background: var(--lp-gold);
    color: var(--lp-ink-dark);
    font-family: 'IBM Plex Mono', 'SFMono-Regular', Consolas, monospace;
    font-size: 11px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    padding: 5px 12px;
    border-radius: 999px;
}

/* margin-top auto on the button keeps the two cards' buttons on one line when the
   feature lists differ in length. */
.lp-plan-features {
    margin: 0 0 30px;
    padding: 0;
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 12px;
    flex-grow: 1;
}

.lp-plan-features li {
    font-size: 16px;
    color: #374151;
}

.lp-footer-link {
    color: var(--lp-on-dark-faint);
    text-decoration: none;
    font-size: 15px;
    padding: 10px 4px;
}

.lp-footer-link:hover {
    color: #FFFFFF;
}

@media (max-width: 700px) {
    .lp-wrap {
        padding: 0 20px;
    }

    .lp-split {
        gap: 40px;
    }

    .lp-section h1.lp-display {
        font-size: 44px;
    }

    .lp-section h2.lp-display {
        font-size: 32px;
    }

    .lp-tiles {
        grid-template-columns: repeat(1, minmax(0, 1fr));
    }
}

/* Language switch (Components/Shared/Controls/LanguageSwitch.razor).
   Lives here rather than in a scoped stylesheet because the component is used from two
   layouts and the inline styles only carry the colours, which differ between them. */
.lang-switch {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    margin-left: 8px;
}

.lang-switch a:hover {
    text-decoration: underline;
}