/* landing.css — refined editorial style for the platform marketing
 * site (#294). Palette echoes the presentation HTML:
 *   bg     #f6f4ef  (warm cream)
 *   paper  #ffffff
 *   ink    #1f2933  (deep blue-grey)
 *   accent #315f72  (teal — hero gradient + CTAs)
 *   warm   #b46a3c  (rust — secondary accent / Pro)
 *   line   #ded8cc  (subtle dividers)
 *
 * Typography: system stack with the editorial display variant
 * (Georgia / "Times New Roman" / serif) reserved for h1/h2 so the
 * page reads "publication" rather than "startup." Body keeps
 * sans-serif for legibility.
 */

:root {
    --lp-bg:        #f6f4ef;
    --lp-paper:     #ffffff;
    --lp-ink:       #1f2933;
    --lp-ink-soft:  #4b5563;
    --lp-accent:    #315f72;
    --lp-accent-2:  #b46a3c;
    --lp-soft:      #eef4f5;
    --lp-warn:      #fff5e8;
    --lp-good:      #edf7ef;
    --lp-line:      #ded8cc;
    --lp-shadow:    0 1px 2px rgba(15, 23, 42, 0.05), 0 4px 16px rgba(15, 23, 42, 0.04);
    --lp-radius:    18px;
    --lp-radius-sm: 10px;
    --lp-pad-x:     clamp(16px, 4vw, 40px);
    --lp-display:   "Georgia", "Times New Roman", "Liberation Serif", serif;
    --lp-sans:      -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
}

html, body { margin: 0; padding: 0; }

body.lp {
    background: var(--lp-bg);
    color: var(--lp-ink);
    font-family: var(--lp-sans);
    font-size: 17px;
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

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

/* ── Nav ─────────────────────────────────────────────────────── */

.lp-nav {
    position: sticky;
    top: 0;
    z-index: 30;
    background: rgba(246, 244, 239, 0.9);
    backdrop-filter: saturate(140%) blur(10px);
    border-bottom: 1px solid var(--lp-line);
}
.lp-nav__inner {
    max-width: 1120px;
    margin: 0 auto;
    padding: 14px var(--lp-pad-x);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
}
.lp-nav__brand {
    font-family: var(--lp-display);
    font-size: 22px;
    font-weight: 700;
    letter-spacing: -0.01em;
    color: var(--lp-ink) !important;
    text-decoration: none !important;
}
.lp-nav__links {
    display: flex;
    align-items: center;
    gap: 26px;
    flex-wrap: wrap;
}
.lp-nav__link {
    color: var(--lp-ink-soft) !important;
    font-size: 14.5px;
    font-weight: 500;
    text-decoration: none !important;
    transition: color 120ms;
}
.lp-nav__link:hover,
.lp-nav__link.is-active {
    color: var(--lp-ink) !important;
}
.lp-nav__cta {
    background: var(--lp-ink);
    color: var(--lp-paper) !important;
    padding: 9px 18px;
    border-radius: 999px;
    font-size: 14px;
    font-weight: 600;
    text-decoration: none !important;
    transition: transform 120ms, background 120ms;
}
.lp-nav__cta:hover { background: var(--lp-accent); transform: translateY(-1px); }

.lp-nav__lang { display: inline-flex; align-items: center; }
.lp-nav__lang-select {
    border: 1px solid var(--lp-line);
    background: transparent;
    color: var(--lp-ink);
    border-radius: 999px;
    padding: 6px 10px;
    font: inherit;
    font-size: 13.5px;
    cursor: pointer;
    appearance: none;
    -webkit-appearance: none;
    padding-right: 26px;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'><path fill='%231f2933' d='M1 1l5 5 5-5'/></svg>");
    background-repeat: no-repeat;
    background-position: right 10px center;
    background-size: 9px 6px;
    transition: border-color 120ms;
}
.lp-nav__lang-select:hover { border-color: var(--lp-ink); }
.lp-nav__lang-select:focus { outline: none; border-color: var(--lp-accent); }

/* ── Hero ────────────────────────────────────────────────────── */

.lp-hero {
    background: linear-gradient(135deg, #21313a 0%, #315f72 100%);
    color: var(--lp-paper);
    padding: clamp(64px, 12vw, 130px) var(--lp-pad-x) clamp(56px, 10vw, 110px);
    position: relative;
    overflow: hidden;
}
.lp-hero::after {
    /* Subtle warm-tinted glow on the right, recalls the presentation
     * deck's accent colour without dominating the composition. */
    content: "";
    position: absolute;
    top: -20%;
    right: -10%;
    width: 60%;
    height: 140%;
    background: radial-gradient(ellipse at center, rgba(180, 106, 60, 0.18) 0%, rgba(180, 106, 60, 0) 60%);
    pointer-events: none;
}
.lp-hero__inner {
    max-width: 920px;
    margin: 0 auto;
    position: relative;
    z-index: 1;
}
.lp-hero--page {
    padding-top: clamp(56px, 9vw, 100px);
    padding-bottom: clamp(48px, 8vw, 90px);
}
.lp-eyebrow {
    margin: 0 0 18px;
    font-family: var(--lp-sans);
    font-size: 12.5px;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.7);
}
.lp-hero__title {
    margin: 0 0 22px;
    font-family: var(--lp-display);
    font-size: clamp(34px, 5.5vw, 60px);
    line-height: 1.08;
    letter-spacing: -0.02em;
    font-weight: 600;
    color: var(--lp-paper);
}
.lp-hero__sub {
    margin: 0 0 36px;
    font-size: clamp(16px, 1.8vw, 19px);
    line-height: 1.55;
    color: rgba(255, 255, 255, 0.85);
    max-width: 720px;
}
.lp-hero__cta {
    display: flex;
    gap: 14px;
    flex-wrap: wrap;
}

/* ── Buttons ─────────────────────────────────────────────────── */

.lp-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 11px 22px;
    border-radius: 999px;
    border: 1px solid transparent;
    font-family: var(--lp-sans);
    font-size: 15px;
    font-weight: 600;
    text-decoration: none !important;
    cursor: pointer;
    transition: transform 120ms, background 120ms, border-color 120ms;
    line-height: 1;
}
.lp-button--large { padding: 14px 28px; font-size: 16px; }
.lp-button--primary {
    background: var(--lp-paper);
    color: var(--lp-ink) !important;
    border-color: var(--lp-paper);
}
.lp-button--primary:hover { transform: translateY(-1px); background: var(--lp-bg); border-color: var(--lp-bg); }
.lp-button--ghost {
    background: transparent;
    color: rgba(255, 255, 255, 0.95) !important;
    border-color: rgba(255, 255, 255, 0.35);
}
.lp-button--ghost:hover { border-color: rgba(255, 255, 255, 0.7); transform: translateY(-1px); }
/* Body-area primary (on cream bg) — used inside the contact form. */
.lp-main .lp-button--primary,
.lp-footer .lp-button--primary {
    background: var(--lp-ink);
    color: var(--lp-paper) !important;
    border-color: var(--lp-ink);
}
.lp-main .lp-button--primary:hover,
.lp-footer .lp-button--primary:hover {
    background: var(--lp-accent);
    border-color: var(--lp-accent);
}
.lp-footer .lp-button--ghost {
    color: var(--lp-ink) !important;
    border-color: var(--lp-line);
}

/* ── Section frame ───────────────────────────────────────────── */

.lp-main { display: block; }

.lp-block {
    max-width: 1120px;
    margin: 0 auto;
    padding: clamp(56px, 9vw, 96px) var(--lp-pad-x);
}
.lp-block + .lp-block { padding-top: 0; }
.lp-block__head {
    max-width: 760px;
    margin: 0 0 38px;
}
.lp-block__title {
    margin: 0 0 12px;
    font-family: var(--lp-display);
    font-size: clamp(26px, 3vw, 36px);
    line-height: 1.18;
    letter-spacing: -0.015em;
    font-weight: 600;
    color: var(--lp-ink);
}
.lp-block__sub {
    margin: 0;
    font-size: 17px;
    color: var(--lp-ink-soft);
    line-height: 1.55;
    max-width: 640px;
}

/* ── Grid ────────────────────────────────────────────────────── */

.lp-grid { display: grid; gap: 22px; }
.lp-grid--2 { grid-template-columns: repeat(2, 1fr); }
.lp-grid--3 { grid-template-columns: repeat(3, 1fr); }
.lp-grid--4 { grid-template-columns: repeat(4, 1fr); }
.lp-grid--tight { gap: 18px; }
@media (max-width: 920px) {
    .lp-grid--4 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 720px) {
    .lp-grid--2,
    .lp-grid--3,
    .lp-grid--4 { grid-template-columns: 1fr; }
}

/* ── Card / feature ──────────────────────────────────────────── */

.lp-card,
.lp-feature {
    background: var(--lp-paper);
    border: 1px solid var(--lp-line);
    border-radius: var(--lp-radius);
    padding: 26px;
    box-shadow: var(--lp-shadow);
}
.lp-card__title,
.lp-feature__title {
    margin: 0 0 10px;
    font-family: var(--lp-display);
    font-size: 21px;
    line-height: 1.25;
    letter-spacing: -0.01em;
    font-weight: 600;
    color: var(--lp-ink);
}
.lp-card__body,
.lp-feature__body {
    margin: 0;
    color: var(--lp-ink-soft);
    line-height: 1.55;
    font-size: 15.5px;
}
.lp-feature--accent {
    background: var(--lp-soft);
    border-color: transparent;
}

/* ── Steps (ordered) ─────────────────────────────────────────── */

.lp-steps {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 22px;
    counter-reset: lp-step;
}
@media (max-width: 920px) {
    .lp-steps { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 520px) {
    .lp-steps { grid-template-columns: 1fr; }
}
.lp-step {
    background: var(--lp-paper);
    border: 1px solid var(--lp-line);
    border-radius: var(--lp-radius);
    padding: 24px;
    box-shadow: var(--lp-shadow);
    position: relative;
}
.lp-step__index {
    display: block;
    font-family: var(--lp-display);
    font-size: 28px;
    color: var(--lp-accent);
    margin-bottom: 14px;
    letter-spacing: 0.02em;
}
.lp-step__title {
    margin: 0 0 8px;
    font-family: var(--lp-display);
    font-size: 19px;
    font-weight: 600;
    line-height: 1.2;
    color: var(--lp-ink);
}
.lp-step__body {
    margin: 0;
    color: var(--lp-ink-soft);
    font-size: 14.5px;
    line-height: 1.55;
}

/* ── Flow (guest 5-step) ─────────────────────────────────────── */

.lp-flow {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 14px;
    counter-reset: lp-flow-counter;
}
@media (max-width: 920px) {
    .lp-flow { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 520px) {
    .lp-flow { grid-template-columns: 1fr; }
}
.lp-flow__step {
    background: var(--lp-paper);
    border: 1px solid var(--lp-line);
    border-radius: var(--lp-radius-sm);
    padding: 20px 18px;
    counter-increment: lp-flow-counter;
    position: relative;
}
.lp-flow__step::before {
    content: counter(lp-flow-counter, decimal-leading-zero);
    font-family: var(--lp-display);
    font-size: 14px;
    color: var(--lp-accent-2);
    display: block;
    margin-bottom: 8px;
    letter-spacing: 0.06em;
}
.lp-flow__title {
    margin: 0 0 6px;
    font-family: var(--lp-display);
    font-size: 17px;
    font-weight: 600;
    line-height: 1.2;
    color: var(--lp-ink);
}
.lp-flow__body {
    margin: 0;
    color: var(--lp-ink-soft);
    font-size: 13.5px;
    line-height: 1.5;
}

/* ── Differentiator list ─────────────────────────────────────── */

.lp-diff {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 14px 28px;
}
@media (max-width: 720px) {
    .lp-diff { grid-template-columns: 1fr; }
}
.lp-diff__item {
    padding: 14px 0;
    border-top: 1px solid var(--lp-line);
    line-height: 1.55;
    color: var(--lp-ink-soft);
    font-size: 15.5px;
}
.lp-diff__item:first-child,
.lp-diff__item:nth-child(2) { border-top-color: transparent; padding-top: 0; }
.lp-diff__item strong {
    display: block;
    margin-bottom: 4px;
    color: var(--lp-ink);
    font-family: var(--lp-display);
    font-weight: 600;
    font-size: 16.5px;
}

/* ── Prose (about) ───────────────────────────────────────────── */

.lp-prose {
    max-width: 760px;
    color: var(--lp-ink-soft);
    line-height: 1.65;
    font-size: 17px;
}
.lp-prose p { margin: 0 0 16px; }
.lp-prose p:last-child { margin-bottom: 0; }

/* ── Principles (about) ──────────────────────────────────────── */

.lp-principles {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 22px;
}
@media (max-width: 720px) {
    .lp-principles { grid-template-columns: 1fr; }
}
.lp-principles__item {
    background: var(--lp-paper);
    border: 1px solid var(--lp-line);
    border-radius: var(--lp-radius-sm);
    padding: 22px;
}
.lp-principles__title {
    margin: 0 0 8px;
    font-family: var(--lp-display);
    font-size: 19px;
    font-weight: 600;
    line-height: 1.25;
    color: var(--lp-ink);
}
.lp-principles__body {
    margin: 0;
    color: var(--lp-ink-soft);
    font-size: 15px;
    line-height: 1.6;
}

/* ── Compete table ───────────────────────────────────────────── */

.lp-compete {
    list-style: none;
    margin: 0;
    padding: 0;
    background: var(--lp-paper);
    border: 1px solid var(--lp-line);
    border-radius: var(--lp-radius);
    overflow: hidden;
}
.lp-compete__row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 18px;
    padding: 16px 22px;
    border-top: 1px solid var(--lp-line);
    font-size: 15.5px;
}
.lp-compete__row:first-child { border-top: none; }
.lp-compete__name { color: var(--lp-ink); font-weight: 500; }
.lp-compete__verdict {
    color: var(--lp-accent);
    font-weight: 600;
    font-size: 14.5px;
}

/* ── Tariffs ─────────────────────────────────────────────────── */

.lp-tariff {
    background: var(--lp-paper);
    border: 1px solid var(--lp-line);
    border-radius: var(--lp-radius);
    padding: 24px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.lp-tariff__name {
    margin: 0;
    font-family: var(--lp-display);
    font-size: 22px;
    font-weight: 600;
    color: var(--lp-ink);
}
.lp-tariff__pitch {
    margin: 0;
    color: var(--lp-ink-soft);
    font-size: 14.5px;
    line-height: 1.55;
}
.lp-tariff--feat { background: var(--lp-soft); border-color: transparent; }
.lp-tariff--pro  { background: var(--lp-warn); border-color: transparent; }
.lp-tariff--pro .lp-tariff__name { color: var(--lp-accent-2); }
.lp-tariff--hospitality { background: var(--lp-good); border-color: transparent; }

/* ── Footer + contact form ──────────────────────────────────── */

.lp-footer {
    background: var(--lp-paper);
    border-top: 1px solid var(--lp-line);
    margin-top: clamp(56px, 9vw, 96px);
}
.lp-footer__inner {
    max-width: 1120px;
    margin: 0 auto;
    padding: clamp(48px, 7vw, 80px) var(--lp-pad-x) 32px;
}
.lp-contact {
    max-width: 760px;
    margin: 0 auto 48px;
}
.lp-contact__head { margin-bottom: 28px; text-align: center; }
.lp-contact__title {
    margin: 0 0 10px;
    font-family: var(--lp-display);
    font-size: clamp(24px, 3vw, 32px);
    line-height: 1.2;
    letter-spacing: -0.015em;
    color: var(--lp-ink);
}
.lp-contact__lede {
    margin: 0;
    color: var(--lp-ink-soft);
    font-size: 16px;
    line-height: 1.55;
}
.lp-contact__form {
    display: flex;
    flex-direction: column;
    gap: 14px;
}
/* `display: flex` above outranks the browser-default `display: none`
   on `[hidden]`, so JS hiding the form after a successful submit
   would otherwise leave it visible next to the "Thank you" block. */
.lp-contact__form[hidden],
.lp-contact__success[hidden] { display: none; }
.lp-field { display: flex; flex-direction: column; gap: 6px; }
.lp-field__label {
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.02em;
    color: var(--lp-ink);
}
.lp-field__input {
    padding: 12px 14px;
    border: 1px solid var(--lp-line);
    border-radius: 10px;
    background: var(--lp-bg);
    font-family: var(--lp-sans);
    font-size: 15.5px;
    color: var(--lp-ink);
    transition: border-color 120ms, background 120ms;
}
.lp-field__input:focus {
    outline: none;
    border-color: var(--lp-accent);
    background: var(--lp-paper);
}
.lp-field__input--text { resize: vertical; min-height: 110px; }
.lp-field-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
}
@media (max-width: 520px) {
    .lp-field-row { grid-template-columns: 1fr; }
}
.lp-field-error {
    margin: 0;
    color: #b91c1c;
    font-size: 13.5px;
    font-weight: 500;
}
.lp-contact__form .lp-button {
    align-self: flex-start;
    margin-top: 4px;
}

.lp-contact__success {
    background: var(--lp-good);
    border: 1px solid #c8e6cd;
    border-radius: var(--lp-radius);
    padding: 32px 28px;
    text-align: center;
}
.lp-contact__success-title {
    margin: 0 0 8px;
    font-family: var(--lp-display);
    font-size: 24px;
    color: var(--lp-ink);
}
.lp-contact__success-body {
    margin: 0 0 22px;
    color: var(--lp-ink-soft);
    font-size: 15.5px;
    line-height: 1.55;
}

.lp-footer__meta {
    border-top: 1px solid var(--lp-line);
    padding-top: 22px;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 12px;
    font-size: 14px;
    color: var(--lp-ink-soft);
}
.lp-footer__brand {
    font-family: var(--lp-display);
    font-weight: 700;
    color: var(--lp-ink);
}
.lp-footer__sep { color: var(--lp-line); }
.lp-footer__link {
    color: var(--lp-ink-soft) !important;
    text-decoration: none !important;
}
.lp-footer__link:hover { color: var(--lp-ink) !important; }