/*
 * Landing page stylesheet.
 *
 * WHY THIS IS A SEPARATE FILE
 *
 * These rules first lived in a <style> block inside views/layouts/landing.php.
 * They rendered correctly in testing and applied nothing at all on the live
 * server - twice - which left the page as unstyled text and no way to tell why
 * from the outside.
 *
 * A real file removes every unknown. It can be opened directly in a browser to
 * prove it uploaded, it is cached like any other stylesheet, and it raises no
 * question about inline styles or Content-Security-Policy.
 *
 *     https://yourdomain.com/assets/css/landing.css
 *
 * If that address shows this text, the file is there. If it shows a "not found"
 * page, it never uploaded, and that alone explains an unstyled landing page.
 *
 * WHY NOT app.min.css
 *
 * app.min.css is compiled from a Tailwind config that is not in the delivery
 * ZIP, so it cannot be rebuilt. It was built for the application screens and
 * has no wide container, no large section padding and no display sized type -
 * none of which a dashboard ever needed.
 *
 * Every class here is prefixed lp- so it can never collide with a Tailwind
 * class, now or after a future rebuild.
 *
 * Plain, old CSS on purpose. No logical properties, no custom property
 * fallbacks doing real work, no grid. Only rules that have behaved identically
 * in every browser for fifteen years.
 */

/* -----------------------------------------------------------------------
 | Layout
 | --------------------------------------------------------------------- */
.lp-wrap {
    max-width: 720px;
    margin-left: auto;
    margin-right: auto;
    padding-left: 20px;
    padding-right: 20px;
}

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

.lp-band {
    background-color: #ffffff;
    border-top: 1px solid #e7e5e4;
    border-bottom: 1px solid #e7e5e4;
}

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

.lp-header {
    background-color: #ffffff;
    border-bottom: 1px solid #e7e5e4;
}

.lp-footer {
    background-color: #ffffff;
    border-top: 1px solid #e7e5e4;
}

/* -----------------------------------------------------------------------
 | Type
 |
 | Sizes are set here rather than borrowed from Tailwind, because the
 | application never needed anything above 24px and a landing page headline
 | that is the same size as a form label reads as an unfinished page.
 | --------------------------------------------------------------------- */
.lp-eyebrow {
    margin: 0;
    font-size: 12px;
    line-height: 1.4;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: #a8a29e;
}

.lp-h1 {
    margin: 14px 0 0;
    font-size: 30px;
    line-height: 1.22;
    letter-spacing: -0.01em;
    color: #1c1917;
}

.lp-h2 {
    margin: 0;
    font-size: 22px;
    line-height: 1.3;
    color: #1c1917;
}

.lp-h3 {
    margin: 0;
    font-size: 17px;
    line-height: 1.4;
    color: #1c1917;
}

.lp-lead {
    margin: 18px 0 0;
    font-size: 17px;
    line-height: 1.65;
    color: #57534e;
}

.lp-text {
    margin: 8px 0 0;
    font-size: 15px;
    line-height: 1.65;
    color: #57534e;
}

.lp-note {
    margin: 14px 0 0;
    font-size: 13px;
    line-height: 1.5;
    color: #a8a29e;
}

/* -----------------------------------------------------------------------
 | Blocks
 | --------------------------------------------------------------------- */

/* Real air between one idea and the next. Without this the page reads as
   one unbroken wall of sentences. */
.lp-stack {
    margin-top: 34px;
}

.lp-stack > * + * {
    margin-top: 30px;
}

.lp-list {
    margin: 20px 0 0;
    padding: 0;
    list-style: none;
}

.lp-list li {
    position: relative;
    padding-left: 18px;
    font-size: 15px;
    line-height: 1.65;
    color: #57534e;
}

.lp-list li + li {
    margin-top: 9px;
}

.lp-list li:before {
    content: "";
    position: absolute;
    left: 0;
    top: 10px;
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background-color: #b08d57;
}

.lp-card {
    margin-top: 26px;
    padding: 26px;
    background-color: #ffffff;
    border: 1px solid #e7e5e4;
    border-radius: 14px;
}

.lp-band .lp-card {
    background-color: #faf9f7;
}

.lp-price-row {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
}

.lp-price-name {
    margin: 0;
    font-size: 18px;
    line-height: 1.3;
    color: #1c1917;
}

.lp-price {
    margin: 0;
    padding-left: 16px;
    font-size: 30px;
    line-height: 1;
    white-space: nowrap;
    color: #1c1917;
}

.lp-highlight {
    margin: 20px 0 0;
    padding: 13px 15px;
    border: 1px solid #b08d57;
    border-radius: 10px;
    background-color: #f6f1eb;
    font-size: 14px;
    line-height: 1.55;
    color: #57534e;
}

.lp-video {
    margin-top: 26px;
    overflow: hidden;
    border: 1px solid #e7e5e4;
    border-radius: 14px;
    background-color: #1c1917;
}

.lp-video video {
    display: block;
    width: 100%;
}

/* -----------------------------------------------------------------------
 | Buttons
 |
 | Full width and stacked on a phone, side by side from 640px. The button
 | styling itself still comes from app.min.css - only the arrangement is
 | here.
 | --------------------------------------------------------------------- */
.lp-actions {
    margin-top: 28px;
}

.lp-actions > a {
    display: block;
    text-align: center;
}

.lp-actions > a + a {
    margin-top: 12px;
}

/* -----------------------------------------------------------------------
 | From tablet up
 | --------------------------------------------------------------------- */
@media (min-width: 640px) {
    .lp-section { padding-top: 60px; padding-bottom: 60px; }

    .lp-h1    { font-size: 40px; }
    .lp-h2    { font-size: 26px; }
    .lp-h3    { font-size: 18px; }
    .lp-lead  { font-size: 18px; }
    .lp-price { font-size: 34px; }

    .lp-actions         { display: flex; gap: 12px; }
    .lp-actions > a     { display: inline-block; width: auto; }
    .lp-actions > a + a { margin-top: 0; }
}