/* =============================================================================
   RumiNest360 — public website (marketing phase W2)

   The application's palette and typeface (see RumiNest360.Web/wwwroot/css/
   tokens.css), without Bootstrap: the site is a dozen components, and a small
   hand-written sheet keeps the first paint fast. No inline styles anywhere —
   the content policy does not allow them.
   ========================================================================== */

@font-face {
    font-family: "Public Sans Variable";
    font-style: normal;
    font-display: swap;
    font-weight: 100 900;
    src: url("../fonts/public-sans-latin-variable-normal.woff2") format("woff2-variations");
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
        U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191,
        U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
    font-family: "Public Sans Variable";
    font-style: normal;
    font-display: swap;
    font-weight: 100 900;
    src: url("../fonts/public-sans-latin-ext-variable-normal.woff2") format("woff2-variations");
    unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF,
        U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

:root {
    /* #2b8e92 is the brand for fills that carry no text; text and text-bearing fills use
       #267c81 (4.9:1 on white), as in the application. */
    --brand: #2b8e92;
    --brand-600: #267c81;
    --brand-700: #1e676b;
    --brand-tint: #eef6f6;
    --brand-tint-2: #ddedee;
    --brand-gradient: linear-gradient(135deg, #267c81 0%, #1e676b 100%); /* white text on it: 4.9:1 at worst */

    --ink: #2f2b3d;
    --ink-2: #444050;
    --muted: #6d6b77;
    --line: #e6e6e8;
    --surface: #ffffff;
    --tint: #f8f7fa;
    --success: #1f9d57;
    --warning: #b25e09;

    --radius: 10px;
    --radius-lg: 16px;
    --shadow: 0 4px 18px rgba(47, 43, 61, 0.08);
    --shadow-lg: 0 18px 50px rgba(47, 43, 61, 0.14);

    --font: "Public Sans Variable", "Public Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    --container: 1180px;
    --gutter: 20px;
}

*,
*::before,
*::after {
    box-sizing: border-box;
}

html {
    -webkit-text-size-adjust: 100%;
    scroll-behavior: smooth;
}

body {
    margin: 0;
    font-family: var(--font);
    font-size: 1.0625rem;
    line-height: 1.65;
    color: var(--ink-2);
    background: var(--surface);
    -webkit-font-smoothing: antialiased;
}

img,
svg {
    max-width: 100%;
}

img {
    height: auto;
    display: block;
}

h1,
h2,
h3,
h4,
.h1 {
    color: var(--ink);
    line-height: 1.2;
    margin: 0 0 0.6em;
    font-weight: 700;
    letter-spacing: -0.01em;
}

h1,
.h1 {
    font-size: clamp(2rem, 4.2vw, 3.1rem);
    letter-spacing: -0.02em;
}

h2 {
    font-size: clamp(1.55rem, 2.8vw, 2.2rem);
}

h3 {
    font-size: 1.2rem;
}

p {
    margin: 0 0 1em;
}

a {
    color: var(--brand-600);
    text-decoration-thickness: 1px;
    text-underline-offset: 3px;
}

a:hover {
    color: var(--brand-700);
}

:focus-visible {
    outline: 3px solid rgba(43, 142, 146, 0.55);
    outline-offset: 2px;
    border-radius: 4px;
}

.container {
    width: 100%;
    max-width: var(--container);
    margin: 0 auto;
    padding: 0 var(--gutter);
}

.narrow {
    max-width: 800px;
}

.center {
    text-align: center;
}

.muted {
    color: var(--muted);
}

.lede {
    font-size: 1.18rem;
    color: var(--muted);
}

.eyebrow {
    display: inline-block;
    margin-bottom: 0.75rem;
    font-size: 0.82rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--brand-600);
}

.skip-link {
    position: absolute;
    left: -999px;
    top: 8px;
    z-index: 100;
    padding: 8px 14px;
    background: var(--ink);
    color: #fff;
    border-radius: 6px;
}

.skip-link:focus {
    left: 8px;
}

.icon {
    width: 1.25em;
    height: 1.25em;
    flex: none;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
    vertical-align: -0.25em;
}

/* ------------------------------------------------------------------ buttons */

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5em;
    padding: 0.62em 1.2em;
    border: 1px solid transparent;
    border-radius: 8px;
    font: inherit;
    font-size: 0.98rem;
    font-weight: 600;
    line-height: 1.3;
    text-decoration: none;
    cursor: pointer;
    transition: background-color 0.15s, color 0.15s, border-color 0.15s, box-shadow 0.15s, transform 0.15s;
}

.btn-lg {
    padding: 0.8em 1.5em;
    font-size: 1.05rem;
}

.btn-block {
    width: 100%;
}

.btn-primary {
    background: var(--brand-600);
    color: #fff;
    box-shadow: 0 4px 14px rgba(38, 124, 129, 0.35);
}

.btn-primary:hover {
    background: var(--brand-700);
    color: #fff;
    transform: translateY(-1px);
}

.btn-outline {
    border-color: var(--brand-600);
    color: var(--brand-600);
    background: transparent;
}

.btn-outline:hover {
    background: var(--brand-tint);
}

.btn-ghost {
    color: var(--ink);
    background: transparent;
}

.btn-ghost:hover {
    background: var(--tint);
    color: var(--ink);
}

.btn-light {
    background: #fff;
    color: var(--brand-700);
}

.btn-light:hover {
    color: var(--brand-700);
    transform: translateY(-1px);
}

.btn-outline-light {
    border-color: rgba(255, 255, 255, 0.7);
    color: #fff;
}

.btn-outline-light:hover {
    background: rgba(255, 255, 255, 0.12);
    color: #fff;
}

.link-arrow {
    display: inline-flex;
    align-items: center;
    gap: 0.25em;
    font-weight: 600;
    text-decoration: none;
}

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

.site-header {
    position: sticky;
    top: 0;
    z-index: 50;
    background: rgba(255, 255, 255, 0.92);
    backdrop-filter: saturate(160%) blur(10px);
    border-bottom: 1px solid var(--line);
}

.header-row {
    display: flex;
    align-items: center;
    gap: 28px;
    min-height: 70px;
}

.brand {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    color: var(--ink);
    text-decoration: none;
    font-weight: 800;
    font-size: 1.3rem;
    letter-spacing: -0.02em;
}

.brand:hover {
    color: var(--ink);
}

.brand-logo {
    max-height: 36px;
    width: auto;
}

.main-nav {
    display: flex;
    gap: 4px;
    flex: 1;
}

.main-nav a {
    padding: 8px 12px;
    border-radius: 6px;
    color: var(--ink-2);
    font-weight: 500;
    font-size: 0.98rem;
    text-decoration: none;
}

.main-nav a:hover {
    background: var(--tint);
    color: var(--ink);
}

.header-actions {
    display: flex;
    gap: 8px;
}

.mobile-nav {
    display: none;
    margin-left: auto;
}

.mobile-nav summary {
    list-style: none;
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    border-radius: 8px;
    color: var(--ink);
    cursor: pointer;
}

.mobile-nav summary::-webkit-details-marker {
    display: none;
}

.mobile-nav summary .icon {
    width: 26px;
    height: 26px;
}

.mobile-nav-panel {
    position: absolute;
    left: 0;
    right: 0;
    top: 70px;
    display: grid;
    gap: 4px;
    padding: 12px var(--gutter) 20px;
    background: #fff;
    border-bottom: 1px solid var(--line);
    box-shadow: var(--shadow);
}

.mobile-nav-panel a {
    padding: 12px 8px;
    color: var(--ink);
    font-weight: 500;
    text-decoration: none;
}

.mobile-nav-panel .btn {
    margin-top: 8px;
    color: #fff;
}

@media (max-width: 960px) {
    .main-nav,
    .header-actions {
        display: none;
    }

    .mobile-nav {
        display: block;
    }
}

/* ------------------------------------------------------------------ sections */

.section {
    padding: 88px 0;
}

.section-tint {
    background: var(--tint);
}

.section-flush-top {
    padding-top: 0;
}

.section-head {
    max-width: 760px;
    margin: 0 auto 48px;
}

.section-more {
    margin-top: 36px;
}

.page-hero {
    padding: 80px 0 56px;
    background:
        radial-gradient(900px 340px at 50% -80px, var(--brand-tint-2), transparent 70%),
        var(--surface);
}

.page-hero-compact {
    padding: 64px 0 28px;
}

@media (max-width: 720px) {
    .section {
        padding: 60px 0;
    }

    .page-hero {
        padding: 56px 0 36px;
    }
}

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

.hero {
    position: relative;
    padding: 72px 0 64px;
    overflow: hidden;
    background:
        radial-gradient(800px 420px at 85% 10%, rgba(43, 142, 146, 0.16), transparent 70%),
        radial-gradient(600px 300px at 0% 100%, rgba(47, 128, 237, 0.08), transparent 70%),
        var(--surface);
}

.hero-slide {
    display: none;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
    align-items: center;
    gap: 56px;
}

.hero-slide.is-active {
    display: grid;
    animation: hero-in 0.5s ease both;
}

@keyframes hero-in {
    from {
        opacity: 0;
        transform: translateY(8px);
    }

    to {
        opacity: 1;
        transform: none;
    }
}

.hero-copy .lede {
    max-width: 560px;
}

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

.hero-image {
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg);
}

.hero-dots {
    display: flex;
    gap: 10px;
    margin-top: 36px;
}

.hero-dot {
    width: 34px;
    height: 6px;
    padding: 0;
    border: 0;
    border-radius: 3px;
    background: var(--brand-tint-2);
    cursor: pointer;
}

.hero-dot.is-active {
    background: var(--brand-600);
}

@media (max-width: 960px) {
    .hero {
        padding: 48px 0;
    }

    .hero-slide,
    .hero-slide.is-active {
        grid-template-columns: 1fr;
        gap: 36px;
    }
}

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

    .hero-slide.is-active {
        animation: none;
    }

    .btn {
        transition: none;
    }
}

/* ------------------------------------------------------------------ product screenshots */

.product-shot {
    margin: 0;
    overflow: hidden;
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    background: #fff;
    box-shadow: var(--shadow-lg);
}

.product-shot-bar {
    display: flex;
    gap: 6px;
    padding: 10px 14px;
    background: var(--tint);
    border-bottom: 1px solid var(--line);
}

.product-shot-bar span {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: #d9d8de;
}

.product-shot figcaption {
    padding: 10px 14px;
    font-size: 0.9rem;
    color: var(--muted);
}

.product-shot-phone {
    max-width: 260px;
    border-radius: 28px;
    border-width: 8px;
    border-color: var(--ink);
}

.product-shot-phone .product-shot-bar {
    display: none;
}

.shots-row {
    display: grid;
    grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
    gap: 56px;
    align-items: center;
}

.shots-row-reverse .shots-copy {
    order: 2;
}

.shots-pair {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: end;
    gap: 24px;
}

.shots-pair .product-shot-phone {
    width: 200px;
    margin-bottom: -24px;
}

@media (max-width: 960px) {
    .shots-row {
        grid-template-columns: 1fr;
        gap: 36px;
    }

    .shots-row-reverse .shots-copy {
        order: 0;
    }

    .shots-pair {
        grid-template-columns: 1fr;
    }

    .shots-pair .product-shot-phone {
        display: none;
    }

    .product-shot-phone {
        margin: 0 auto;
    }
}

/* ------------------------------------------------------------------ pains, features, steps */

.pain-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 24px;
    max-width: 960px;
    margin: 0 auto;
}

.pain {
    display: flex;
    gap: 16px;
    padding: 28px;
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
}

.pain > .icon {
    width: 28px;
    height: 28px;
    color: var(--warning);
}

.pain-after {
    border-color: var(--brand-tint-2);
    background: var(--brand-tint);
}

.pain-after > .icon {
    color: var(--success);
}

.pain p {
    margin: 0;
}

.feature-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 24px;
}

.feature-card {
    padding: 28px;
    background: #fff;
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    transition: box-shadow 0.2s, transform 0.2s;
}

.feature-card:hover {
    box-shadow: var(--shadow);
    transform: translateY(-2px);
}

/* Card titles are h2 where the grid sits directly under the page title; they look like h3 either way. */
.feature-card h2 {
    font-size: 1.2rem;
}

.feature-card p {
    margin: 0;
    color: var(--muted);
}

.feature-icon {
    display: inline-grid;
    place-items: center;
    width: 48px;
    height: 48px;
    margin-bottom: 18px;
    border-radius: 12px;
    background: var(--brand-tint-2);
    color: var(--brand-600);
}

.feature-icon .icon {
    width: 26px;
    height: 26px;
}

.steps {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 24px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.steps li {
    padding: 28px;
    border-radius: var(--radius-lg);
    background: var(--tint);
}

.steps p {
    margin: 0;
    color: var(--muted);
}

.step-number {
    display: inline-grid;
    place-items: center;
    width: 40px;
    height: 40px;
    margin-bottom: 16px;
    border-radius: 50%;
    background: var(--brand-gradient);
    color: #fff;
    font-weight: 700;
}

.audience-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 24px;
}

.audience-card {
    padding: 32px;
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
}

.audience-card h2 {
    font-size: 1.4rem;
}

@media (max-width: 960px) {
    .feature-grid,
    .steps,
    .audience-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 640px) {
    .feature-grid,
    .steps,
    .audience-grid,
    .pain-grid {
        grid-template-columns: 1fr;
    }
}

.checks {
    margin: 0 0 1em;
    padding: 0;
    list-style: none;
}

.checks li {
    display: flex;
    gap: 10px;
    padding: 5px 0;
}

.checks .icon {
    margin-top: 0.3em;
    width: 1.1em;
    height: 1.1em;
    color: var(--success);
}

/* ------------------------------------------------------------------ security strip */

.security-strip {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    gap: 28px;
    align-items: center;
    padding-top: 40px;
    padding-bottom: 40px;
}

.security-strip h2 {
    font-size: 1.5rem;
    margin-bottom: 0.3em;
}

.security-strip p {
    margin: 0;
    color: var(--muted);
}

.security-icon {
    display: grid;
    place-items: center;
    width: 64px;
    height: 64px;
    border-radius: 16px;
    background: var(--brand-gradient);
    color: #fff;
}

.security-icon .icon {
    width: 32px;
    height: 32px;
}

@media (max-width: 720px) {
    .security-strip {
        grid-template-columns: 1fr;
    }
}

/* ------------------------------------------------------------------ pricing */

.pricing-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(270px, 340px));
    justify-content: center;
    gap: 24px;
}

.price-card {
    position: relative;
    display: flex;
    flex-direction: column;
    padding: 32px;
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    background: #fff;
}

.price-card .checks {
    flex: 1;
}

.price-card-featured {
    border: 2px solid var(--brand);
    box-shadow: var(--shadow-lg);
}

.price-ribbon {
    position: absolute;
    top: -14px;
    left: 32px;
    padding: 4px 12px;
    border-radius: 999px;
    background: var(--brand-600);
    color: #fff;
    font-size: 0.8rem;
    font-weight: 700;
}

.price {
    margin: 12px 0 20px;
}

.price-amount {
    display: block;
    color: var(--ink);
    font-size: 2.6rem;
    font-weight: 800;
    letter-spacing: -0.02em;
    line-height: 1.1;
}

.price-unit {
    color: var(--muted);
    font-size: 0.95rem;
}

.pricing-empty {
    max-width: 620px;
    margin: 0 auto;
    padding: 40px;
    text-align: center;
    border: 1px dashed var(--brand-tint-2);
    border-radius: var(--radius-lg);
    background: var(--brand-tint);
}

.pricing-note {
    max-width: 640px;
    margin: 28px auto 0;
    font-size: 0.95rem;
}

/* ------------------------------------------------------------------ FAQ */

.faq-list {
    display: grid;
    gap: 12px;
}

.faq-item {
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: #fff;
}

.faq-item summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 18px 22px;
    color: var(--ink);
    font-weight: 600;
    cursor: pointer;
    list-style: none;
}

.faq-item summary::-webkit-details-marker {
    display: none;
}

.faq-chevron {
    transition: transform 0.2s;
}

.faq-item[open] .faq-chevron {
    transform: rotate(180deg);
}

.faq-item p {
    margin: 0;
    padding: 0 22px 20px;
    color: var(--muted);
}

/* ------------------------------------------------------------------ testimonials */

.testimonial-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 24px;
}

.testimonial {
    margin: 0;
    padding: 28px;
    border-radius: var(--radius-lg);
    background: #fff;
    box-shadow: var(--shadow);
}

.testimonial blockquote {
    margin: 0 0 20px;
    color: var(--ink);
    font-size: 1.05rem;
}

.testimonial figcaption {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 0.95rem;
}

.testimonial figcaption img {
    border-radius: 50%;
}

.testimonial figcaption > span {
    display: grid;
}

/* ------------------------------------------------------------------ call to action */

.cta-band {
    padding: 64px 0;
    background: var(--brand-gradient);
    color: #fff;
}

.cta-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 32px;
}

.cta-band h2 {
    color: #fff;
    margin-bottom: 0.3em;
}

.cta-band p {
    margin: 0;
    color: rgba(255, 255, 255, 0.88);
}

.cta-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    flex: none;
}

@media (max-width: 860px) {
    .cta-row {
        flex-direction: column;
        align-items: flex-start;
    }
}

/* ------------------------------------------------------------------ contact */

.contact-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.4fr) minmax(0, 0.8fr);
    gap: 48px;
    align-items: start;
}

.contact-grid > :only-child {
    grid-column: 1 / -1;
    max-width: 640px;
    margin: 0 auto;
    width: 100%;
}

.contact-details {
    padding: 32px;
    border-radius: var(--radius-lg);
    background: var(--tint);
}

.contact-details h2 {
    font-size: 1.3rem;
}

.contact-list {
    display: grid;
    gap: 14px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.contact-list li {
    display: flex;
    gap: 12px;
    align-items: flex-start;
}

.contact-list .icon {
    margin-top: 0.25em;
    color: var(--brand-600);
}

@media (max-width: 860px) {
    .contact-grid {
        grid-template-columns: 1fr;
    }
}

.form-card {
    padding: 36px;
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    background: #fff;
    box-shadow: var(--shadow);
}

.form-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px 20px;
}

.form-field {
    display: grid;
    gap: 6px;
}

.form-field-wide {
    grid-column: 1 / -1;
}

.form-field label {
    color: var(--ink);
    font-size: 0.95rem;
    font-weight: 600;
}

.form-field .optional {
    color: var(--muted);
    font-weight: 400;
}

.form-field input,
.form-field select,
.form-field textarea {
    width: 100%;
    padding: 11px 14px;
    border: 1px solid #cfced5;
    border-radius: 8px;
    background: #fff;
    color: var(--ink);
    font: inherit;
    font-size: 1rem;
}

.form-field input:focus,
.form-field select:focus,
.form-field textarea:focus {
    border-color: var(--brand);
    outline: 3px solid rgba(43, 142, 146, 0.2);
    outline-offset: 0;
}

.form-field textarea {
    min-height: 120px;
    resize: vertical;
}

.form-consent {
    display: flex;
    gap: 10px;
    align-items: flex-start;
    font-size: 0.95rem;
}

.form-consent input {
    width: 18px;
    height: 18px;
    margin-top: 0.25em;
    flex: none;
}

.validation-message,
.field-error {
    color: #b42318;
    font-size: 0.9rem;
}

.form-alert {
    padding: 16px 20px;
    border-radius: var(--radius);
    margin-bottom: 20px;
}

.form-alert-error {
    background: #fdecea;
    color: #8a1c13;
}

.form-success {
    padding: 40px;
    text-align: center;
    border-radius: var(--radius-lg);
    background: var(--brand-tint);
}

.form-success .icon {
    width: 48px;
    height: 48px;
    color: var(--success);
    margin-bottom: 12px;
}

/* The honeypot: off-screen for people, still in the form for a script that fills every field. */
.form-trap {
    position: absolute;
    left: -10000px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

@media (max-width: 640px) {
    .form-grid {
        grid-template-columns: 1fr;
    }

    .form-card {
        padding: 24px;
    }
}

/* ------------------------------------------------------------------ text pages */

.prose {
    color: var(--ink-2);
}

.prose h2 {
    margin-top: 1.8em;
    font-size: 1.45rem;
}

.prose h3 {
    margin-top: 1.5em;
}

.prose ul,
.prose ol {
    padding-left: 1.4em;
}

.prose li {
    margin: 0.35em 0;
}

.prose blockquote {
    margin: 0 0 1.5em;
    padding: 16px 20px;
    border-left: 4px solid var(--brand);
    border-radius: 0 var(--radius) var(--radius) 0;
    background: var(--brand-tint);
}

.prose blockquote p {
    margin: 0;
}

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

.site-footer {
    padding-top: 64px;
    background: #0c2c2e; /* a deep shade of the teal brand; white text on it is 14:1 */
    color: rgba(255, 255, 255, 0.72);
    font-size: 0.95rem;
}

.footer-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.6fr) repeat(3, minmax(0, 1fr));
    gap: 36px;
    padding-bottom: 40px;
}

.footer-name {
    color: #fff;
    font-size: 1.25rem;
    font-weight: 800;
    margin-bottom: 0.4em;
}

.footer-tagline {
    color: rgba(255, 255, 255, 0.9);
}

.footer-heading {
    margin-bottom: 0.8em;
    color: #fff;
    font-weight: 700;
}

.footer-links {
    display: grid;
    gap: 8px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.site-footer a {
    color: rgba(255, 255, 255, 0.78);
    text-decoration: none;
}

.site-footer a:hover {
    color: #fff;
    text-decoration: underline;
}

.footer-base {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 6px 24px;
    padding-top: 20px;
    padding-bottom: 28px;
    border-top: 1px solid rgba(255, 255, 255, 0.12);
}

.footer-base p {
    margin: 0;
    font-size: 0.88rem;
}

@media (max-width: 860px) {
    .footer-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .footer-brand {
        grid-column: 1 / -1;
    }
}

/* ------------------------------------------------------------------ unavailable */

.unavailable {
    display: grid;
    place-items: center;
    min-height: 70vh;
    text-align: center;
}

/* The pricing page's cards sit directly under its h1, so they are h2s drawn at card size. */
.price-card h2,
.pricing-empty h2 {
    font-size: 1.3rem;
}