:root {
    --gold: #de9b02;
    --gold-light: #fff3d3;
    --gold-pale: #fffaf0;
    --gold-deep: #ad7500;
    --dark: #151b23;
    --dark-soft: #202936;
    --ink: #1c2430;
    --muted: #667085;
    --surface: #ffffff;
    --surface-soft: #f7f8fa;
    --line: #e6e8ec;
    --success: #1d9b65;
    --whatsapp: #25d366;
    --shadow-sm: 0 10px 30px rgba(21, 27, 35, 0.08);
    --shadow-lg: 0 28px 80px rgba(21, 27, 35, 0.15);
    --radius-sm: 14px;
    --radius-md: 22px;
    --radius-lg: 32px;
    --container: 1180px;
}

/* Guest moments and value-first pricing */
.guest-moments {
    background: linear-gradient(180deg, #fffaf0 0%, #ffffff 100%);
}

.guest-moments-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 18px;
    margin-top: 36px;
}

.moment-card {
    min-height: 245px;
    padding: 26px;
    border: 1px solid var(--line);
    border-radius: var(--radius-md);
    background: #fff;
    box-shadow: var(--shadow-sm);
}

.moment-card-featured {
    color: #fff;
    border-color: var(--dark);
    background: linear-gradient(145deg, var(--dark), #253142);
}

.moment-card h3 { margin: 0 0 10px; font-size: 1.12rem; }
.moment-card p { margin: 0; color: var(--muted); line-height: 1.9; }
.moment-card-featured p { color: #d8dee7; }

.owner-outcomes {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 10px;
    margin-top: 24px;
    padding: 18px;
    border: 1px solid #f2d18b;
    border-radius: 18px;
    background: #fff8e8;
}

.owner-outcomes strong { color: var(--dark); margin-inline-end: 6px; }
.owner-outcomes span { padding: 7px 12px; color: #725000; background: #fff; border-radius: 999px; font-weight: 800; }

.all-plan-prices {
    margin-top: 28px;
    overflow: hidden;
    border: 1px solid #e4a300;
    border-radius: 20px;
    background: #fff;
    box-shadow: var(--shadow-sm);
}

.all-plan-prices > summary {
    display: flex;
    min-height: 62px;
    padding: 16px 22px;
    align-items: center;
    justify-content: center;
    gap: 12px;
    color: #171207;
    background: var(--gold);
    cursor: pointer;
    font-size: 1.05rem;
    font-weight: 900;
    list-style: none;
}

.all-plan-prices > summary::-webkit-details-marker { display: none; }
.all-plan-prices[open] .prices-chevron { transform: rotate(180deg); }
.all-prices-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; padding: 28px; }
.price-plan-group h3 { margin: 0 0 14px; }
.pricing-disclosure { margin: 0 28px 28px; padding: 14px; color: var(--muted); background: var(--surface-soft); border-radius: 12px; text-align: center; }
.quote-only-price { padding: 28px; text-align: center; }

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

@media (max-width: 620px) {
    .guest-moments-grid,
    .all-prices-grid { grid-template-columns: 1fr; }
    .moment-card { min-height: 0; }
}

/* Public seven-day trial onboarding */
.trial-page {
    min-height: 100vh;
    background:
        radial-gradient(circle at 15% 10%, rgba(229, 164, 0, .18), transparent 30rem),
        #f5f7fa;
}

.trial-signup-shell {
    width: min(1120px, calc(100% - 32px));
    margin: 0 auto;
    padding: 32px 0 56px;
}

.trial-back {
    display: inline-flex;
    margin-bottom: 18px;
    color: #17202c;
    font-weight: 800;
    text-decoration: none;
}

.trial-signup-card {
    display: grid;
    grid-template-columns: minmax(280px, .8fr) minmax(0, 1.4fr);
    overflow: hidden;
    border: 1px solid #e2e6eb;
    border-radius: 28px;
    background: #fff;
    box-shadow: 0 26px 70px rgba(21, 27, 35, .13);
}

.trial-signup-intro {
    padding: clamp(32px, 5vw, 64px);
    color: #fff;
    background:
        linear-gradient(150deg, rgba(229, 164, 0, .1), transparent 45%),
        #151b23;
}

.trial-signup-intro .brand-symbol {
    margin-bottom: 42px;
}

.trial-signup-intro h1 {
    margin: 12px 0 18px;
    font-size: clamp(2rem, 4vw, 3.5rem);
    line-height: 1.15;
}

.trial-signup-intro p:not(.section-kicker) {
    color: #d9dee5;
    line-height: 1.9;
}

.trial-signup-intro strong {
    display: block;
    margin-top: 26px;
    color: #f4bd26;
}

.trial-signup-form {
    padding: clamp(28px, 5vw, 58px);
}

.trial-signup-form fieldset {
    margin: 0 0 28px;
    padding: 0;
    border: 0;
}

.trial-signup-form legend {
    width: 100%;
    margin-bottom: 18px;
    padding-bottom: 10px;
    border-bottom: 1px solid #e5e8ec;
    color: #17202c;
    font-size: 1.15rem;
    font-weight: 900;
}

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

.trial-signup-form label:not(.trial-terms) {
    display: grid;
    gap: 8px;
    color: #263241;
    font-weight: 800;
}

.trial-signup-form input,
.trial-signup-form select {
    width: 100%;
    min-height: 48px;
    padding: 11px 13px;
    border: 1px solid #cdd4dc;
    border-radius: 12px;
    background: #fff;
    color: #17202c;
    font: inherit;
}

.trial-signup-form input:focus,
.trial-signup-form select:focus {
    border-color: #e5a400;
    outline: 3px solid rgba(229, 164, 0, .18);
}

.trial-signup-form label small {
    color: #697483;
    font-weight: 500;
}

.trial-signup-form .field-error,
.form-alert {
    color: #a32121;
    font-weight: 800;
}

.form-alert {
    margin: 0 0 20px;
    padding: 12px 14px;
    border: 1px solid #f0b4b4;
    border-radius: 12px;
    background: #fff3f3;
}

.trial-terms {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin: 4px 0 22px;
    color: #374151;
    font-weight: 700;
}

.trial-terms input {
    width: 20px;
    min-height: 20px;
    margin-top: 2px;
}

@media (max-width: 800px) {
    .trial-signup-card,
    .trial-form-grid {
        grid-template-columns: 1fr;
    }

    .trial-signup-intro .brand-symbol {
        margin-bottom: 24px;
    }
}

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

html {
    scroll-behavior: smooth;
    scroll-padding-top: 88px;
}

body {
    margin: 0;
    color: var(--ink);
    background: var(--surface);
    font-family: Tahoma, Arial, "Segoe UI", sans-serif;
    line-height: 1.7;
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
    overflow-x: hidden;
}

body,
button,
a,
input,
select {
    font-family: inherit;
}

img,
svg {
    display: block;
}

img {
    max-width: 100%;
}

a {
    color: inherit;
    text-decoration: none;
}

button,
a {
    -webkit-tap-highlight-color: transparent;
}

:focus-visible {
    outline: 3px solid rgba(222, 155, 2, 0.48);
    outline-offset: 4px;
}

.container {
    width: min(calc(100% - 40px), var(--container));
    margin-inline: auto;
}

.skip-link {
    position: fixed;
    top: 12px;
    right: 12px;
    z-index: 1000;
    padding: 10px 16px;
    color: var(--dark);
    background: var(--gold);
    border-radius: 10px;
    transform: translateY(-150%);
    transition: transform 0.2s ease;
}

.skip-link:focus {
    transform: translateY(0);
}

.site-header {
    position: sticky;
    top: 0;
    z-index: 100;
    min-height: 78px;
    color: #ffffff;
    background: rgba(21, 27, 35, 0.97);
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    backdrop-filter: blur(16px);
}

.header-inner {
    display: grid;
    grid-template-columns: 164px 1fr auto;
    align-items: center;
    gap: 30px;
    min-height: 78px;
}

.brand {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    width: fit-content;
    direction: ltr;
}

.brand-symbol {
    display: grid;
    place-items: center;
    flex: 0 0 38px;
    width: 38px;
    height: 38px;
    color: var(--dark);
    background: var(--gold);
    border-radius: 12px;
    font-family: Arial, sans-serif;
    font-size: 1.15rem;
    font-weight: 900;
    line-height: 1;
}

.brand-name {
    color: #ffffff;
    font-family: Arial, "Segoe UI", sans-serif;
    font-size: 1.08rem;
    font-weight: 900;
    letter-spacing: -0.02em;
    white-space: nowrap;
}

.site-nav {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 22px;
}

.site-nav > a {
    position: relative;
    padding: 8px 0;
    color: rgba(255, 255, 255, 0.76);
    font-size: 0.88rem;
    font-weight: 700;
    white-space: nowrap;
    transition: color 0.2s ease;
}

.site-nav > a::after {
    content: "";
    position: absolute;
    right: 0;
    bottom: 2px;
    width: 0;
    height: 2px;
    background: var(--gold);
    transition: width 0.2s ease;
}

.site-nav > a:hover {
    color: #ffffff;
}

.site-nav > a:hover::after {
    width: 100%;
}

.site-nav .mobile-nav-cta {
    display: none;
}

.header-actions {
    display: flex;
    align-items: center;
    gap: 14px;
}

.header-login {
    color: rgba(255, 255, 255, 0.82);
    font-size: 0.88rem;
    font-weight: 700;
    white-space: nowrap;
}

.header-login:hover {
    color: var(--gold);
}

.menu-toggle {
    display: none;
    width: 44px;
    height: 44px;
    padding: 10px;
    color: #ffffff;
    background: transparent;
    border: 1px solid rgba(255, 255, 255, 0.16);
    border-radius: 12px;
    cursor: pointer;
}

.menu-toggle span {
    display: block;
    width: 100%;
    height: 2px;
    margin: 4px 0;
    background: currentColor;
    border-radius: 999px;
    transition: transform 0.2s ease, opacity 0.2s ease;
}

.button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    min-height: 52px;
    padding: 12px 23px;
    border: 1px solid transparent;
    border-radius: 14px;
    font-size: 0.95rem;
    font-weight: 800;
    line-height: 1.2;
    cursor: pointer;
    transition:
        transform 0.2s ease,
        box-shadow 0.2s ease,
        color 0.2s ease,
        background 0.2s ease,
        border-color 0.2s ease;
}

.button:hover {
    transform: translateY(-2px);
}

.button svg,
.text-link svg {
    width: 18px;
    height: 18px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

[dir="rtl"] .button svg,
[dir="rtl"] .text-link svg {
    transform: rotate(180deg);
}

.button-gold {
    color: var(--dark);
    background: var(--gold);
    box-shadow: 0 12px 30px rgba(222, 155, 2, 0.25);
}

.button-gold:hover {
    background: #eda900;
    box-shadow: 0 16px 36px rgba(222, 155, 2, 0.32);
}

.button-small {
    min-height: 42px;
    padding: 10px 16px;
    border-radius: 11px;
    font-size: 0.82rem;
}

.button-ghost {
    color: #ffffff;
    background: rgba(255, 255, 255, 0.06);
    border-color: rgba(255, 255, 255, 0.2);
}

.button-ghost:hover {
    background: rgba(255, 255, 255, 0.12);
    border-color: rgba(255, 255, 255, 0.34);
}

.button-dark {
    color: #ffffff;
    background: var(--dark);
}

.button-dark:hover {
    background: var(--dark-soft);
    box-shadow: var(--shadow-sm);
}

.button-block {
    width: 100%;
}

.hero {
    position: relative;
    padding: 88px 0 92px;
    color: #ffffff;
    isolation: isolate;
    overflow: hidden;
}

.hero-glow {
    position: absolute;
    z-index: -1;
    border-radius: 50%;
    filter: blur(6px);
    pointer-events: none;
}

.hero-glow-one {
    top: -180px;
    right: -180px;
    width: 520px;
    height: 520px;
    background: rgba(222, 155, 2, 0.16);
}

.hero-glow-two {
    bottom: -260px;
    left: -160px;
    width: 620px;
    height: 620px;
    background: rgba(222, 155, 2, 0.11);
}

.hero-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.05fr) minmax(380px, 0.95fr);
    align-items: center;
    gap: 76px;
}

.hero-content {
    position: relative;
    z-index: 2;
}

.eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 18px;
    padding: 7px 13px;
    color: #ffd878;
    background: rgba(222, 155, 2, 0.1);
    border: 1px solid rgba(222, 155, 2, 0.3);
    border-radius: 999px;
    font-size: 0.82rem;
    font-weight: 800;
}

.eyebrow-dot {
    width: 8px;
    height: 8px;
    background: var(--gold);
    border-radius: 50%;
    box-shadow: 0 0 0 5px rgba(222, 155, 2, 0.12);
}

.hero h1 {
    max-width: 680px;
    margin: 0;
    font-size: clamp(2.4rem, 5vw, 4.25rem);
    line-height: 1.22;
    letter-spacing: -0.045em;
}

.hero h1 span {
    display: block;
    color: var(--gold);
}

.hero-copy {
    max-width: 650px;
    margin: 24px 0 0;
    color: rgba(255, 255, 255, 0.72);
    font-size: 1.08rem;
    line-height: 1.95;
}

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

.hero-points {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    margin-top: 30px;
}

.hero-points span {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    color: rgba(255, 255, 255, 0.74);
    font-size: 0.84rem;
    font-weight: 700;
}

.hero-points svg {
    width: 17px;
    height: 17px;
    fill: none;
    stroke: var(--gold);
    stroke-width: 2.5;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.hero-visual {
    position: relative;
    min-height: 535px;
}

.phone-shell {
    position: absolute;
    top: 0;
    left: 52px;
    width: 286px;
    padding: 11px;
    color: var(--ink);
    background: #0f141b;
    border: 1px solid rgba(255, 255, 255, 0.16);
    border-radius: 38px;
    box-shadow: var(--shadow-lg);
    transform: rotate(-2.5deg);
}

.phone-top {
    position: absolute;
    top: 17px;
    left: 50%;
    z-index: 3;
    width: 86px;
    height: 23px;
    background: #0f141b;
    border-radius: 0 0 14px 14px;
    transform: translateX(-50%);
}

.phone-top span {
    position: absolute;
    top: 6px;
    left: 50%;
    width: 30px;
    height: 4px;
    background: #272f3b;
    border-radius: 99px;
    transform: translateX(-50%);
}

.phone-screen {
    min-height: 500px;
    padding: 42px 19px 24px;
    background:
        radial-gradient(circle at 80% 8%, rgba(222, 155, 2, 0.19), transparent 24%),
        #ffffff;
    border-radius: 29px;
    overflow: hidden;
}

.phone-screen h2 {
    margin: 14px 0 3px;
    color: var(--dark);
    font-size: 1.45rem;
    text-align: center;
}

.phone-screen > p {
    margin: 0 0 23px;
    color: var(--muted);
    font-size: 0.78rem;
    text-align: center;
}

.request-notice {
    position: absolute;
    top: 105px;
    right: -18px;
    z-index: 5;
    display: grid;
    grid-template-columns: 48px 1fr auto;
    align-items: center;
    gap: 11px;
    width: 276px;
    padding: 14px;
    color: var(--ink);
    background: rgba(255, 255, 255, 0.98);
    border: 1px solid rgba(255, 255, 255, 0.8);
    border-radius: 18px;
    box-shadow: 0 22px 60px rgba(5, 10, 16, 0.3);
}

.notice-icon {
    display: grid;
    place-items: center;
    width: 48px;
    height: 48px;
    color: var(--dark);
    background: var(--gold);
    border-radius: 14px;
}

.notice-icon svg {
    width: 24px;
    height: 24px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.9;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.request-notice span,
.request-notice strong {
    display: block;
}

.request-notice div > span {
    color: var(--muted);
    font-size: 0.7rem;
}

.request-notice div > strong {
    font-size: 0.93rem;
}

.notice-status {
    color: var(--success);
    font-size: 0.67rem;
    font-weight: 800;
}

.complete-card {
    position: absolute;
    right: 12px;
    bottom: 38px;
    z-index: 4;
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 11px 15px;
    color: #ffffff;
    background: rgba(32, 41, 54, 0.96);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 14px;
    box-shadow: 0 16px 44px rgba(5, 10, 16, 0.24);
    font-size: 0.78rem;
    font-weight: 800;
}

.complete-check {
    display: grid;
    place-items: center;
    width: 26px;
    height: 26px;
    color: var(--dark);
    background: var(--gold);
    border-radius: 8px;
}

.complete-check svg {
    width: 16px;
    height: 16px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2.4;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.section {
    padding: 104px 0;
}

.section-heading {
    max-width: 680px;
    margin-bottom: 45px;
}

.section-heading.centered {
    margin-inline: auto;
    text-align: center;
}

.section-kicker {
    display: inline-block;
    margin-bottom: 9px;
    color: var(--gold-deep);
    font-size: 0.78rem;
    font-weight: 900;
    letter-spacing: 0.04em;
}

.section-heading h2,
.management-content h2,
.trial-intro h2,
.faq-intro h2,
.final-cta h2 {
    margin: 0;
    color: var(--dark);
    font-size: clamp(1.85rem, 3.5vw, 3rem);
    line-height: 1.35;
    letter-spacing: -0.035em;
}

.section-heading p,
.management-content > p,
.trial-intro > p,
.faq-intro > p,
.final-cta p {
    margin: 14px 0 0;
    color: var(--muted);
    font-size: 0.98rem;
    line-height: 1.9;
}

.step-icon,
.feature-icon {
    display: grid;
    place-items: center;
    width: 58px;
    height: 58px;
    color: var(--dark);
    background: var(--gold-light);
    border-radius: 17px;
}

.step-icon svg,
.feature-icon svg {
    width: 29px;
    height: 29px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.7;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.management-section {
    color: #ffffff;
    background:
        radial-gradient(circle at 15% 15%, rgba(222, 155, 2, 0.12), transparent 26%),
        var(--dark);
}

.management-grid {
    display: grid;
    grid-template-columns: minmax(0, 0.85fr) minmax(500px, 1.15fr);
    align-items: center;
    gap: 78px;
}

.management-content h2 {
    color: #ffffff;
}

.management-content > p {
    color: rgba(255, 255, 255, 0.67);
}

.check-list,
.plan-features,
.custom-questions {
    margin: 28px 0 0;
    padding: 0;
    list-style: none;
}

.check-list li,
.plan-features li {
    position: relative;
    padding: 9px 31px 9px 0;
}

.check-list li::before,
.plan-features li::before {
    content: "✓";
    position: absolute;
    top: 9px;
    right: 0;
    display: grid;
    place-items: center;
    width: 21px;
    height: 21px;
    color: var(--dark);
    background: var(--gold);
    border-radius: 50%;
    font-size: 0.68rem;
    font-weight: 900;
}

.pricing-section {
    background: var(--surface-soft);
}

.pricing-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    align-items: start;
    gap: 20px;
}

.pricing-card {
    position: relative;
    padding: 31px;
    background: #ffffff;
    border: 1px solid var(--line);
    border-radius: var(--radius-md);
    box-shadow: 0 12px 36px rgba(21, 27, 35, 0.06);
    overflow: hidden;
}

.pricing-card-featured {
    border: 2px solid var(--gold);
    box-shadow: 0 22px 54px rgba(222, 155, 2, 0.14);
}

.featured-ribbon {
    position: absolute;
    top: 0;
    left: 0;
    padding: 7px 15px;
    color: var(--dark);
    background: var(--gold);
    border-radius: 0 0 13px 0;
    font-size: 0.69rem;
    font-weight: 900;
}

.plan-label {
    color: var(--gold-deep);
    font-size: 0.72rem;
    font-weight: 900;
}

.plan-heading h3 {
    margin: 5px 0 7px;
    color: var(--dark);
    font-size: 1.55rem;
}

.plan-heading p {
    min-height: 52px;
    margin: 0;
    color: var(--muted);
    font-size: 0.82rem;
}

.plan-features {
    min-height: 250px;
    padding-top: 21px;
    border-top: 1px solid var(--line);
}

.plan-features li {
    color: #4d5665;
    font-size: 0.8rem;
}

.plan-features li::before {
    top: 10px;
    width: 18px;
    height: 18px;
    font-size: 0.59rem;
}

.price-options {
    display: grid;
    gap: 12px;
    margin-top: 24px;
}

.price-options > a {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 8px 12px;
    padding: 16px;
    color: var(--dark);
    background: var(--surface-soft);
    border: 1px solid var(--line);
    border-radius: 12px;
    text-align: start;
    transition: border-color 0.2s, box-shadow 0.2s;
}

.price-options > a:hover,
.price-options > a:focus-visible {
    border-color: var(--gold-deep);
    box-shadow: 0 0 0 2px rgba(222, 155, 2, 0.18);
}

.price-options > a:focus-visible {
    outline: 2px solid var(--gold-deep);
    outline-offset: 3px;
}

.price-options > a > span {
    min-width: 0;
    font-size: 0.9rem;
    font-weight: 800;
}

.price-options b {
    display: block;
    margin-top: 4px;
    color: var(--gold-deep);
    font-size: 0.72rem;
    line-height: 1.6;
}

.price-options strong {
    font-size: 1.4rem;
    font-weight: 900;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}

.price-options strong small {
    font-size: 0.7rem;
    font-weight: 700;
}

.price-options em {
    grid-column: 1 / -1;
    padding-top: 8px;
    border-top: 1px solid var(--line);
    color: var(--muted);
    font-size: 0.75rem;
    font-style: normal;
    line-height: 1.6;
}

.price-options > .best-price {
    background: #fff8e7;
    border-color: var(--gold);
}

@media (max-width: 380px) {
    .price-options > a {
        grid-template-columns: minmax(0, 1fr);
        padding: 12px;
    }
}

.custom-plan {
    color: #ffffff;
    background:
        radial-gradient(circle at 15% 15%, rgba(222, 155, 2, 0.16), transparent 28%),
        var(--dark);
    border-color: var(--dark);
}

.custom-plan-mark {
    display: grid;
    place-items: center;
    width: 54px;
    height: 54px;
    margin-bottom: 25px;
    color: var(--dark);
    background: var(--gold);
    border-radius: 17px;
}

.custom-plan-mark svg {
    width: 26px;
    height: 26px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.4;
    stroke-linecap: round;
}

.custom-plan .plan-heading h3 {
    color: #ffffff;
}

.custom-plan .plan-heading p {
    min-height: auto;
    color: rgba(255, 255, 255, 0.65);
}

.custom-questions {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
    margin: 34px 0;
}

.custom-questions li {
    padding: 10px;
    color: rgba(255, 255, 255, 0.8);
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 11px;
    font-size: 0.72rem;
    text-align: center;
}

.custom-plan .button-dark {
    color: var(--dark);
    background: var(--gold);
}

.custom-plan .button-dark:hover {
    background: #eda900;
}

.comparison-wrap {
    margin-top: 65px;
    padding: 32px;
    background: #ffffff;
    border: 1px solid var(--line);
    border-radius: var(--radius-md);
}

.comparison-heading {
    margin-bottom: 24px;
}

.comparison-heading h3 {
    margin: 0;
    color: var(--dark);
    font-size: 1.3rem;
}

.comparison-heading p {
    margin: 5px 0 0;
    color: var(--muted);
    font-size: 0.78rem;
}

.comparison-scroll {
    overflow-x: auto;
}

.comparison-wrap table {
    width: 100%;
    min-width: 720px;
    border-spacing: 0;
    border-collapse: separate;
    color: var(--ink);
    font-size: 0.8rem;
}

.comparison-wrap th,
.comparison-wrap td {
    padding: 15px 14px;
    border-bottom: 1px solid var(--line);
    text-align: center;
}

.comparison-wrap th:first-child {
    text-align: right;
}

.comparison-wrap thead th {
    color: var(--dark);
    background: var(--surface-soft);
    font-weight: 900;
}

.comparison-wrap thead th:first-child {
    border-radius: 0 12px 12px 0;
}

.comparison-wrap thead th:last-child {
    border-radius: 12px 0 0 12px;
}

.comparison-wrap tbody tr:last-child th,
.comparison-wrap tbody tr:last-child td {
    border-bottom: 0;
}

.comparison-wrap tbody th {
    color: #4b5563;
    font-weight: 700;
}

.table-check {
    display: inline-grid;
    place-items: center;
    width: 25px;
    height: 25px;
    color: var(--dark);
    background: var(--gold);
    border-radius: 50%;
    font-size: 0.75rem;
    font-weight: 900;
}

.table-dash {
    color: #b7bdc6;
    font-size: 1.25rem;
}

.trial-section {
    position: relative;
    color: #ffffff;
    background:
        radial-gradient(circle at 8% 12%, rgba(222, 155, 2, 0.19), transparent 28%),
        radial-gradient(circle at 90% 90%, rgba(222, 155, 2, 0.1), transparent 24%),
        var(--dark);
    overflow: hidden;
}

.trial-section::before {
    content: "";
    position: absolute;
    inset: 0;
    opacity: 0.08;
    background-image:
        linear-gradient(rgba(255, 255, 255, 0.08) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, 0.08) 1px, transparent 1px);
    background-size: 64px 64px;
    pointer-events: none;
}

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

.form-field > span {
    color: #3b4553;
    font-size: 0.78rem;
    font-weight: 800;
}

.form-field > span b {
    color: #bd2c2c;
}

.form-field input,
.form-field select {
    width: 100%;
    min-height: 52px;
    padding: 11px 14px;
    color: var(--dark);
    background: #fbfcfd;
    border: 1px solid #dfe3e8;
    border-radius: 13px;
    font-size: 0.84rem;
    outline: 0;
    transition:
        border-color 0.2s ease,
        box-shadow 0.2s ease,
        background 0.2s ease;
}

.form-field input::placeholder {
    color: #9aa2ad;
}

.form-field input:focus,
.form-field select:focus {
    background: #ffffff;
    border-color: var(--gold);
    box-shadow: 0 0 0 4px rgba(222, 155, 2, 0.12);
}

.form-field input:invalid:not(:placeholder-shown) {
    border-color: #d95c5c;
}

.faq-section {
    background: #ffffff;
}

.faq-grid {
    display: grid;
    grid-template-columns: minmax(260px, 0.65fr) minmax(0, 1.35fr);
    align-items: start;
    gap: 80px;
}

.faq-intro {
    position: sticky;
    top: 110px;
}

.text-link {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    margin-top: 22px;
    color: var(--gold-deep);
    font-size: 0.85rem;
    font-weight: 900;
}

.faq-list {
    border-top: 1px solid var(--line);
}

.faq-list details {
    border-bottom: 1px solid var(--line);
}

.faq-list summary {
    position: relative;
    padding: 22px 0 22px 48px;
    color: var(--dark);
    font-size: 0.95rem;
    font-weight: 800;
    list-style: none;
    cursor: pointer;
}

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

.faq-list summary::before,
.faq-list summary::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 8px;
    width: 14px;
    height: 2px;
    background: var(--gold-deep);
    border-radius: 99px;
    transition: transform 0.2s ease;
}

.faq-list summary::after {
    transform: rotate(90deg);
}

.faq-list details[open] summary::after {
    transform: rotate(0);
}

.faq-list details p {
    margin: -6px 0 22px;
    padding-left: 45px;
    color: var(--muted);
    font-size: 0.85rem;
    line-height: 1.9;
}

.final-cta {
    padding: 70px 0;
    background: var(--gold-pale);
    border-top: 1px solid rgba(222, 155, 2, 0.15);
}

.final-cta-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 50px;
}

.final-cta-inner > div {
    max-width: 780px;
}

.site-footer {
    color: rgba(255, 255, 255, 0.74);
    background: var(--dark);
}

.footer-main {
    display: grid;
    grid-template-columns: 1.2fr 0.7fr 0.9fr 0.65fr;
    gap: 50px;
    padding-top: 58px;
    padding-bottom: 48px;
}

.footer-wordmark {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    direction: ltr;
}

.footer-brand p,
.footer-contact p {
    margin: 15px 0 0;
    color: rgba(255, 255, 255, 0.58);
    font-size: 0.78rem;
}

.footer-links,
.footer-contact {
    display: grid;
    align-content: start;
    gap: 9px;
}

.footer-links strong,
.footer-contact strong {
    margin-bottom: 5px;
    color: #ffffff;
    font-size: 0.87rem;
}

.footer-links a,
.footer-contact a {
    width: fit-content;
    font-size: 0.75rem;
}

.footer-links a:hover,
.footer-contact a:hover {
    color: var(--gold);
}

.footer-bottom {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-top: 17px;
    padding-bottom: 20px;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    font-size: 0.69rem;
}

.footer-bottom a:hover {
    color: var(--gold);
}

.whatsapp-float {
    position: fixed;
    left: 22px;
    bottom: 22px;
    z-index: 90;
    display: grid;
    place-items: center;
    width: 56px;
    height: 56px;
    color: #ffffff;
    background: var(--whatsapp);
    border: 3px solid #ffffff;
    border-radius: 50%;
    box-shadow: 0 14px 36px rgba(20, 143, 82, 0.3);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.whatsapp-float:hover {
    transform: translateY(-3px) scale(1.03);
    box-shadow: 0 18px 42px rgba(20, 143, 82, 0.38);
}

.whatsapp-float svg {
    width: 31px;
    height: 31px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}

@media (max-width: 1080px) {
    .header-inner {
        grid-template-columns: 145px 1fr auto;
        gap: 18px;
    }

    .brand-name {
        font-size: 1rem;
    }

    .site-nav {
        gap: 15px;
    }

    .site-nav > a {
        font-size: 0.76rem;
    }

    .header-actions .button {
        display: none;
    }

    .hero-grid {
        gap: 38px;
    }

    .hero h1 {
        font-size: clamp(2.35rem, 5vw, 3.55rem);
    }

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

    .custom-plan {
        grid-column: 1 / -1;
    }

    .custom-plan .plan-heading,
    .custom-plan .custom-questions,
    .custom-plan .button {
        max-width: 680px;
        margin-inline: auto;
    }

    .footer-main {
        grid-template-columns: 1.1fr 0.75fr 0.9fr;
    }
}

@media (max-width: 900px) {
    .site-header,
    .header-inner {
        min-height: 70px;
    }

    .header-inner {
        display: flex;
        justify-content: space-between;
    }

    .brand-symbol {
        flex-basis: 35px;
        width: 35px;
        height: 35px;
    }

    .brand-name {
        font-size: 0.98rem;
    }

    .menu-toggle {
        display: block;
        order: 3;
    }

    .site-nav {
        position: absolute;
        top: calc(100% + 1px);
        right: 20px;
        left: 20px;
        display: grid;
        align-items: stretch;
        gap: 0;
        padding: 13px;
        background: var(--dark-soft);
        border: 1px solid rgba(255, 255, 255, 0.1);
        border-radius: 16px;
        box-shadow: var(--shadow-lg);
        opacity: 0;
        visibility: hidden;
        transform: translateY(-10px);
        transition: opacity 0.2s ease, visibility 0.2s ease, transform 0.2s ease;
    }

    .site-header.nav-open .site-nav {
        opacity: 1;
        visibility: visible;
        transform: translateY(0);
    }

    .site-nav > a {
        padding: 11px 13px;
        border-bottom: 1px solid rgba(255, 255, 255, 0.06);
        font-size: 0.84rem;
    }

    .site-nav > a::after {
        display: none;
    }

    .site-nav > a:last-child {
        border-bottom: 0;
    }

    .site-nav .mobile-nav-cta {
        display: block;
        margin-top: 7px;
        color: var(--dark);
        background: var(--gold);
        border-radius: 10px;
        text-align: center;
    }

    .header-actions {
        margin-right: auto;
    }

    .header-login {
        font-size: 0.78rem;
    }

    .hero {
        padding-top: 70px;
    }

    .hero-grid {
        grid-template-columns: 1fr;
        gap: 56px;
    }

    .hero-content {
        max-width: 720px;
    }

    .hero-visual {
        width: min(100%, 520px);
        margin-inline: auto;
    }

    .management-grid {
        grid-template-columns: 1fr;
        gap: 48px;
    }

    .faq-grid {
        grid-template-columns: 1fr;
        gap: 45px;
    }

    .faq-intro {
        position: static;
        max-width: 650px;
    }

    .final-cta-inner {
        align-items: flex-start;
        flex-direction: column;
    }
}

@media (max-width: 680px) {
    .container {
        width: min(calc(100% - 28px), var(--container));
    }

    .section {
        padding: 78px 0;
    }

    .hero {
        min-height: auto;
        padding: 58px 0 72px;
    }

    .hero h1 {
        font-size: clamp(2.15rem, 11vw, 3.1rem);
    }

    .hero-copy {
        font-size: 0.96rem;
    }

    .hero-actions {
        display: grid;
        grid-template-columns: 1fr;
    }

    .hero-actions .button {
        width: 100%;
    }

    .hero-points {
        display: grid;
        grid-template-columns: 1fr;
        gap: 10px;
    }

    .hero-visual {
        min-height: 500px;
    }

    .phone-shell {
        left: 50%;
        width: 270px;
        transform: translateX(-50%) rotate(-1.5deg);
    }

    .phone-screen {
        min-height: 470px;
    }

    .request-notice {
        top: 112px;
        right: -3px;
        width: 250px;
    }

    .complete-card {
        right: 2px;
        bottom: 22px;
    }

    .steps-grid,
    .features-grid,
    .pricing-grid {
        grid-template-columns: 1fr;
    }

    .custom-plan {
        grid-column: auto;
    }

    .plan-features {
        min-height: auto;
    }

    .pricing-card,
    .comparison-wrap {
        padding: 24px 20px;
    }

    .final-cta .button {
        width: 100%;
    }

    .faq-list summary {
        padding-left: 38px;
        font-size: 0.87rem;
    }

    .faq-list details p {
        padding-left: 0;
    }

    .footer-main {
        grid-template-columns: 1fr;
        gap: 32px;
    }

    .whatsapp-float {
        left: 14px;
        bottom: 14px;
        width: 52px;
        height: 52px;
    }
}

@media (max-width: 430px) {
    .header-actions {
        display: none;
    }

    .phone-shell {
        width: 250px;
    }

    .phone-screen {
        min-height: 455px;
        padding-inline: 15px;
    }

    .request-notice {
        right: 0;
        width: 226px;
        grid-template-columns: 42px 1fr auto;
        padding: 11px;
    }

    .notice-icon {
        width: 42px;
        height: 42px;
    }

    .complete-card {
        right: 0;
    }

    .custom-questions {
        grid-template-columns: 1fr;
    }

    .final-cta {
        padding: 58px 0;
    }
}

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

    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}

.prices-chevron {
    flex: 0 0 9px;
    width: 9px;
    height: 9px;
    margin-inline-end: 3px;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transform: rotate(45deg);
    transition: transform 0.2s;
}

.footer-rights {
    flex: 1;
    min-width: 0;
}

.footer-rights p {
    margin: 0;
    line-height: 1.9;
}

.footer-bottom {
    gap: 20px;
    align-items: flex-start;
}

@media (max-width: 760px) {
    .footer-bottom {
        flex-direction: column;
        align-items: stretch;
    }
}

@media (prefers-reduced-motion: reduce) {
    .prices-chevron {
        transition: none;
    }
}

html {
    scroll-padding-top: 145px;
}

[dir="ltr"] body {
    font-family: "Segoe UI", Arial, sans-serif;
}

[dir="ltr"] .hero h1 {
    font-size: clamp(2.2rem, 4vw, 4rem);
    line-height: 1.18;
}

[dir="ltr"] .site-nav > a::after {
    right: auto;
    left: 0;
}

[dir="ltr"] .check-list li,
[dir="ltr"] .plan-features li {
    padding-right: 0;
    padding-left: 31px;
}

[dir="ltr"] .check-list li::before,
[dir="ltr"] .plan-features li::before {
    right: auto;
    left: 0;
}

[dir="ltr"] .comparison-wrap th:first-child {
    text-align: left;
}

[dir="ltr"] .faq-list summary {
    padding-left: 0;
    padding-right: 45px;
}

[dir="ltr"] .faq-list summary::before,
[dir="ltr"] .faq-list summary::after {
    left: auto;
    right: 8px;
}

[dir="ltr"] .faq-list details p {
    padding-left: 0;
    padding-right: 45px;
}

@media (min-width: 901px) {
}

@media (max-width: 900px) {
    [dir="ltr"] .header-actions {
        margin-right: 0;
        margin-left: auto;
    }
}

@media (max-width: 540px) {
    [dir="ltr"] .faq-list details p {
        padding-right: 0;
    }
}

/* Photographic landing story: the artwork stays decorative; all copy remains HTML. */
.hero {
    min-height: 620px;
    background: linear-gradient(90deg, rgba(8, 25, 35, .1) 0%, rgba(8, 25, 35, .2) 37%, rgba(8, 25, 35, .95) 80%), url('../landing/restaurant-hero.webp') center / cover no-repeat, #0b1e29;
}
.hero h1 { text-shadow: 0 3px 18px rgba(0, 0, 0, .34); }
.hero-copy { color: #f2f1ee; }
.hero-grid { gap: 32px; }
.hero-visual { filter: drop-shadow(0 18px 26px rgba(0,0,0,.45)); }
.hero .phone-shell {
    transform: rotate(-5deg);
    background: #15212a;
    border: 2px solid #edc158;
    box-shadow: 0 0 0 5px #fff7df52, 0 28px 55px #000a;
}
.guest-moments { background: #fffcf5; }
.guest-moments-grid { gap: 15px; }
.moment-card,
.moment-card-featured { min-height: 0; padding: 0 0 22px; background: #fff; color: var(--ink); border: 0; box-shadow: 0 8px 28px rgba(30, 26, 16, .09); overflow: hidden; }
.moment-card .moment-photo { display: block; width: 100%; height: 220px; margin: 0 0 17px; object-fit: cover; object-position: center 42%; }
.moment-card-featured .moment-photo { object-position: center 32%; }
.moment-card h3 { padding: 0 18px; margin: 0 0 7px; font-size: 1.04rem; line-height: 1.5; }
.moment-card p,
.moment-card-featured p { padding: 0 18px; color: #565d64; font-size: .86rem; line-height: 1.75; }
.owner-outcomes { max-width: 850px; margin: 25px auto 0; padding: 16px 28px; background: #fff3d9; color: #794f00; border: 0; border-radius: 999px; }
.owner-outcomes strong { color: #794f00; text-align: center; font-size: 1.06rem; }
.landing-showcase { color: #fff; background: linear-gradient(90deg, #081c28e8, #081c28f2), url('../landing/restaurant-hero.webp') center / cover no-repeat; }
.showcase-grid { display: grid; grid-template-columns: 1fr 330px; gap: 60px; align-items: start; }
.showcase-content h2, .requests-copy h2, .reviews-copy h2 { margin: 5px 0 6px; font-size: clamp(2rem, 3.4vw, 3.5rem); line-height: 1.3; }
.showcase-content p, .requests-copy p, .reviews-copy p { max-width: 660px; font-size: 1.07rem; line-height: 1.85; }
.showcase-points { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 25px; }
.showcase-points span { padding: 11px 15px; border: 1px solid #e3ae39; border-radius: 999px; font-size: .85rem; font-weight: 800; }
.showcase-device { max-width: 330px; padding: 22px 14px 35px; color: #18232a; background: #fff; border: 9px solid #171c20; border-radius: 35px; box-shadow: 0 25px 50px #0007; }
.showcase-device-top { padding: 8px 12px 17px; text-align: center; font-weight: 900; }
.showcase-item { display: flex; align-items: center; gap: 10px; padding: 12px 8px; border-top: 1px solid #eee9e0; }
.showcase-item > span { display: grid; place-items: center; width: 52px; height: 52px; background: #fff8e8; border-radius: 12px; font-size: 1.6rem; }
.showcase-item > div { flex: 1; }
.showcase-item strong, .showcase-item small { display: block; }
.showcase-item small { color: #667085; font-size: .73rem; }
.showcase-item b { display: grid; place-items: center; width: 27px; height: 27px; color: #17212a; background: var(--gold); border-radius: 8px; }
.requests-showcase-grid, .reviews-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 54px; align-items: center; }
.requests-copy h2, .reviews-copy h2 { color: #0d2738; }
.reviews-showcase { background: #fff; }
.reviews-copy .showcase-points span { color: #805600; }
.pricing-section { background: #fff9ef; }
@media (max-width: 900px) {
    .hero { background-position: 36% center; }
    .showcase-grid, .requests-showcase-grid, .reviews-grid { grid-template-columns: 1fr; gap: 30px; }
    .showcase-device { margin-inline: auto; }
}
@media (max-width: 620px) {
    .hero { background: linear-gradient(180deg, rgba(8,25,35,.88), rgba(8,25,35,.78)), url('../landing/restaurant-hero.webp') 27% / cover no-repeat; }
    .hero .phone-shell { transform: none; }
    .moment-card .moment-photo { height: 225px; }
    .owner-outcomes { border-radius: 18px; }
    .showcase-points span { font-size: .76rem; }
}

/* B2B story and compact iPhone 11 layout (414 CSS px). */
.showcase-grid { grid-template-columns: minmax(0, 1fr) minmax(360px, .9fr); }
.showcase-art {
    position: relative; min-height: 390px; overflow: hidden;
    background: linear-gradient(90deg, #09202c 0%, transparent 35%), url('../landing/menu-food.webp') center / cover no-repeat;
    border-radius: 26px; box-shadow: 0 24px 60px #0006;
}
.showcase-art .showcase-device {
    position: absolute; inset-block-start: 22px; inset-inline-start: 18px;
    width: 220px; padding: 15px 9px 19px; border-width: 7px; border-radius: 28px;
    box-shadow: 0 14px 35px #0008;
}
.showcase-art .showcase-item { padding: 8px 5px; }
.showcase-art .showcase-item > span { width: 35px; height: 35px; font-size: 1.1rem; }
.showcase-art .showcase-item > span {
    background-image: url('../landing/menu-food.webp');
    background-size: 340% auto; font-size: 0;
}
.showcase-art .showcase-item:nth-child(2) > span { background-position: 55% 68%; }
.showcase-art .showcase-item:nth-child(3) > span { background-position: 5% 56%; }
.showcase-art .showcase-item:nth-child(4) > span { background-position: 95% 34%; }
.showcase-art .showcase-item strong { font-size: .72rem; }
.showcase-art .showcase-item small { font-size: .62rem; }
.showcase-art .showcase-device-top { padding: 3px 8px 9px; font-size: .82rem; }
@media (max-width: 900px) {
    .showcase-grid { grid-template-columns: 1fr; }
    .showcase-art { width: 100%; }
}
@media (max-width: 620px) {
    .site-header, .header-inner { min-height: 62px; }
    .header-inner { gap: 8px; }
    .brand-name { font-size: .82rem; }
    .brand-symbol { flex-basis: 32px; width: 32px; height: 32px; font-size: .95rem; border-radius: 9px; }
    .header-actions { display: flex; margin-inline-start: auto; margin-inline-end: 0; }
    .header-actions .header-login { display: none; }
    .header-actions .button { display: inline-flex; min-height: 37px; padding: 8px 12px; border-radius: 999px; font-size: .73rem; }
    .menu-toggle { width: 38px; height: 38px; padding: 8px; order: 3; }
    .hero {
        padding: 30px 0 32px; min-height: 0;
        background: linear-gradient(180deg, rgba(8,25,35,.72), rgba(8,25,35,.42) 58%, rgba(8,25,35,.18)),
            url('../landing/restaurant-hero.webp') 27% center / cover no-repeat;
    }
    .hero-grid { gap: 22px; }
    .hero .eyebrow { display: none; }
    .hero h1 { font-size: clamp(1.8rem, 7.8vw, 2.1rem); line-height: 1.32; letter-spacing: -.02em; }
    .hero-copy { margin-top: 10px; font-size: .92rem; line-height: 1.7; }
    .hero-actions { margin-top: 18px; }
    .hero-actions .button { min-height: 46px; border-radius: 999px; }
    .hero-actions .button-ghost, .hero-points { display: none; }
    .hero-visual { min-height: 315px; width: 100%; margin: 0; }
    .hero .phone-shell { left: 35%; top: 0; width: 179px; padding: 7px; border-radius: 26px; transform: translateX(-50%) rotate(-5deg); }
    .hero .phone-screen { min-height: 280px; padding: 27px 10px 12px; border-radius: 19px; }
    .hero .phone-top { top: 9px; width: 58px; height: 13px; border-radius: 0 0 9px 9px; }
    .hero .phone-top span { top: 4px; width: 20px; height: 2px; }
    .hero .phone-screen h2 { margin: 8px 0 1px; font-size: 1rem; }
    .hero .phone-screen > p { margin-bottom: 10px; font-size: .62rem; }
    .hero .request-notice { top: 68px; right: 0; width: 172px; padding: 8px; gap: 5px; grid-template-columns: 30px 1fr; border-radius: 12px; }
    .hero .notice-icon { width: 30px; height: 30px; border-radius: 8px; }
    .hero .notice-icon svg { width: 17px; height: 17px; }
    .hero .request-notice div > span { font-size: .57rem; }
    .hero .request-notice div > strong { font-size: .65rem; }
    .hero .notice-status { display: none; }
    .hero .complete-card { right: 2px; bottom: 19px; padding: 7px 9px; font-size: .64rem; }
    .hero .complete-check { width: 20px; height: 20px; }
    .section { padding: 58px 0; }
    .section-heading { margin-bottom: 20px; }
    .section-heading h2, .management-content h2 { font-size: 1.65rem; line-height: 1.35; }
    .section-heading p { margin-top: 7px; font-size: .86rem; line-height: 1.6; }
    .guest-moments-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin-top: 17px; }
    .moment-card { border-radius: 13px; padding-bottom: 10px; }
    .moment-card .moment-photo { height: 136px; margin-bottom: 8px; }
    .moment-card h3 { padding: 0 8px; margin: 0; font-size: .82rem; line-height: 1.45; text-align: center; }
    .moment-card p { display: none; }
    .owner-outcomes { margin-top: 16px; padding: 12px 15px; }
    .owner-outcomes strong { font-size: .87rem; line-height: 1.5; }
    .showcase-content h2, .requests-copy h2, .reviews-copy h2 { font-size: 1.9rem; }
    .showcase-content p, .requests-copy p, .reviews-copy p { font-size: .9rem; line-height: 1.7; }
    .landing-showcase { padding-top: 28px; }
    .showcase-points { gap: 7px; margin-top: 17px; }
    .showcase-points span { padding: 6px 9px; }
    .showcase-art { min-height: 274px; background-position: 58% center; }
    .showcase-art .showcase-device { width: 158px; top: 12px; inset-inline-start: 10px; padding: 10px 6px 14px; border-width: 5px; border-radius: 20px; }
    .showcase-art .showcase-item { gap: 4px; padding: 6px 2px; }
    .showcase-art .showcase-item > span { width: 25px; height: 25px; font-size: .85rem; }
    .showcase-art .showcase-item strong { font-size: .55rem; }
    .showcase-art .showcase-item small { font-size: .48rem; }
    .showcase-art .showcase-item b { width: 18px; height: 18px; font-size: .7rem; }
}

/* Landing refinement: owner focused story and iPhone 11 layout. */
.brand-logo, .mini-brand-logo {
    display: block;
    flex: none;
    width: 38px;
    height: 38px;
    object-fit: contain;
    border-radius: 9px;
}
.mini-brand-logo { width: 25px; height: 25px; margin-inline-end: 6px; border-radius: 6px; }
.hero h1 .hero-no-wave { color: #fff; }
.hero h1 .hero-cross {
    display: inline-grid;
    place-items: center;
    width: .93em;
    height: .93em;
    margin-inline-start: .06em;
    color: #101c23;
    background: var(--gold);
    border-radius: .25em;
    font: 900 .62em/1 Arial, sans-serif;
    text-shadow: none;
    vertical-align: .12em;
    transform: rotate(-8deg);
    box-shadow: 0 5px 20px #0006;
}
.moments-kicker {
    display: inline-flex;
    padding: 7px 16px;
    color: #754900;
    background: #fff0c1;
    border: 1px solid #f2ca62;
    border-radius: 999px;
    box-shadow: 0 5px 18px #cc9d2430;
    font-weight: 900;
}
.personalization-showcase { background: #fff9ed; }
.personalization-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(320px, .85fr); align-items: center; gap: clamp(28px, 6vw, 90px); }
.personalization-copy h2 { margin: 7px 0 13px; color: #102333; font-size: clamp(2rem, 3.5vw, 3.3rem); line-height: 1.3; }
.personalization-copy p { max-width: 590px; color: #4e5864; font-size: 1.05rem; line-height: 1.85; }
.personalization-points { display: flex; flex-wrap: wrap; gap: 9px; margin-top: 21px; }
.personalization-points span { padding: 8px 12px; color: #775000; background: #fff; border: 1px solid #ecdcb8; border-radius: 99px; font-size: .82rem; font-weight: 800; }
.personalization-visual {
    position: relative;
    width: min(100%, 390px);
    margin-inline: auto;
    padding: 0 17px 42px;
    overflow: hidden;
    color: #1d2430;
    background: #fffdf8;
    border: 7px solid #172027;
    border-radius: 34px;
    box-shadow: 0 28px 65px #27190a38;
    text-align: center;
}
.personalization-cover {
    display: grid;
    place-items: center;
    height: 195px;
    margin: 0 -17px;
    background: linear-gradient(#0b19244a, #0b192454), url('../landing/restaurant-hero.webp') center / cover no-repeat;
    clip-path: ellipse(90% 100% at 50% 0%);
}
.personalization-cover img { width: 72px; height: 72px; object-fit: contain; border: 3px solid #e5b54c; border-radius: 16px; box-shadow: 0 9px 25px #0008; }
.personalization-location { width: fit-content; margin: -16px auto 22px; padding: 8px 18px; position: relative; color: #5c450f; background: #fff9e8; border: 1px solid #e9c984; border-radius: 99px; box-shadow: 0 6px 18px #0002; font-weight: 900; direction: ltr; }
.personalization-action { display: flex; align-items: center; justify-content: space-between; padding: 15px 20px; margin-top: 10px; color: #fff; background: #272923; border: 1px solid #c39a3b; border-radius: 14px; font-weight: 900; }
.personalization-action span { color: #e3af29; font-size: 1.2rem; }
.personalization-action-light { color: #23303b; background: #fffaf1; border-color: #ecd9af; }
.personalization-swatches { display: flex; justify-content: center; gap: 7px; padding-top: 24px; }
.personalization-swatches i { width: 16px; height: 16px; border-radius: 50%; background: #292823; }
.personalization-swatches i:nth-child(2) { background: #daa52d; }
.personalization-swatches i:nth-child(3) { background: #eee2ca; }
.management-story { grid-template-columns: minmax(0, 1fr) minmax(310px, .85fr); gap: clamp(24px, 5vw, 72px); align-items: center; }
.management-story .management-content h2 { margin: 7px 0 13px; font-size: clamp(2rem, 3.4vw, 3.2rem); line-height: 1.3; }
.management-story .management-content > p { max-width: 600px; line-height: 1.8; }
.management-benefits { display: grid; gap: 16px; margin: 28px 0 0; padding: 0; list-style: none; }
.management-benefits li { position: relative; padding-inline-start: 28px; color: #d1d9dc; line-height: 1.55; }
.management-benefits li::before { content: "✓"; position: absolute; inset-inline-start: 0; top: 1px; color: #f6c04f; font-weight: 900; }
.management-benefits strong, .management-benefits span { display: block; }
.management-benefits strong { color: #ffce62; font-size: .98rem; }
.management-benefits span { margin-top: 3px; font-size: .86rem; }
.owner-dashboard { padding: 20px; color: #19252c; background: #fffdf8; border: 1px solid #e3d8c2; border-radius: 23px; box-shadow: 0 20px 55px #0004; }
.owner-dashboard-head { display: flex; align-items: center; gap: 9px; padding-bottom: 16px; border-bottom: 1px solid #ece3d1; }
.owner-dashboard-head > span { display: grid; place-items: center; width: 35px; height: 35px; flex: none; color: #161f24; background: #e5ac18; border-radius: 10px; font: 900 1.2rem/1 Arial,sans-serif; }
.owner-dashboard-head strong { flex: 1; font-size: 1rem; }
.owner-dashboard-head small { color: #805e22; font-size: .7rem; }
.owner-dashboard-request { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin: 18px 0; padding: 13px; background: #fff5df; border: 1px solid #eacb87; border-radius: 13px; }
.owner-dashboard-request small, .owner-dashboard-request strong { display: block; }
.owner-dashboard-request small { color: #765e31; font-size: .68rem; }
.owner-dashboard-request strong { margin-top: 4px; font-size: .86rem; }
.owner-dashboard-request em { padding: 5px 8px; color: #1c2d35; background: #eab529; border-radius: 99px; font-size: .67rem; font-style: normal; font-weight: 900; }
.owner-dashboard-tools { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.owner-dashboard-tools > div { min-width: 0; min-height: 98px; padding: 13px; background: #f7f8f8; border: 1px solid #e3e7e7; border-radius: 13px; }
.owner-dashboard-tools span { display: grid; place-items: center; width: 26px; height: 26px; margin-bottom: 6px; color: #8a5a00; background: #ffedbe; border-radius: 8px; font-size: .9rem; font-weight: 900; }
.owner-dashboard-tools strong, .owner-dashboard-tools small { display: block; }
.owner-dashboard-tools strong { font-size: .81rem; }
.owner-dashboard-tools small { margin-top: 2px; color: #687481; font-size: .67rem; line-height: 1.4; }
.retention-showcase { background: #fff9ed; }
.retention-benefits { display: grid; gap: 10px; margin-top: 21px; }
.retention-benefits > div { display: flex; align-items: center; gap: 12px; }
.retention-benefits img { width: 26px; height: 32px; object-fit: contain; }
.retention-benefits strong, .retention-benefits small { display: block; }
.retention-benefits small { color: #68717b; font-size: .79rem; }
.retention-star { display: grid; place-items: center; width: 30px; height: 30px; color: #a06900; background: #ffedb7; border-radius: 50%; }
.retention-visual { display: grid; align-content: center; gap: 13px; min-height: 305px; padding: clamp(18px, 4vw, 40px); border-radius: 27px; background: linear-gradient(#14212bcc, #14212bdd), url('../landing/restaurant-hero.webp') center / cover no-repeat; box-shadow: var(--shadow-lg); }
.retention-review, .retention-reward { display: flex; align-items: center; gap: 12px; padding: 16px; background: #fff; border-radius: 17px; box-shadow: 0 10px 24px #0003; }
.retention-review img { flex: none; width: 27px; height: 34px; object-fit: contain; }
.retention-review span { flex: 1; }
.retention-review b, .retention-review small, .retention-reward b, .retention-reward small { display: block; }
.retention-review small, .retention-reward small { color: #67717a; font-size: .75rem; }
.retention-review > strong { color: #dc9d05; letter-spacing: 1px; white-space: nowrap; }
.retention-reward { margin-inline-start: 27px; }
.retention-reward > span { display: grid; place-items: center; flex: none; width: 38px; height: 38px; color: #f3c653; background: #252315; border-radius: 11px; }
.footer-main { grid-template-columns: minmax(0, 1.15fr) minmax(0, .65fr) minmax(0, 1fr); gap: 34px; padding-block: 42px 34px; }
.footer-brand, .footer-links, .footer-contact { min-width: 0; }
.footer-brand p { max-width: 33ch; line-height: 1.8; }
.footer-contact p { max-width: 31ch; line-height: 1.7; }
.footer-links a, .footer-contact a { line-height: 1.6; }
.footer-bottom { justify-content: center; text-align: center; }
.final-cta { padding: 48px 0; }
@media (max-width: 900px) {
    .personalization-grid, .management-story, .retention-showcase .reviews-grid { grid-template-columns: 1fr; gap: 28px; }
    .owner-dashboard, .personalization-visual { max-width: 440px; width: 100%; margin-inline: auto; }
}
@media (max-width: 620px) {
    .brand-logo { width: 32px; height: 32px; }
    .hero .mini-brand-logo { width: 18px; height: 18px; }
    .hero { overflow: hidden; }
    .hero-visual { min-height: 375px; }
    .hero .phone-screen { min-height: 334px; padding-bottom: 11px; }
    .hero .request-notice { top: 87px; right: 1px; }
    .hero .complete-card { bottom: 13px; }
    .moments-kicker { font-size: .78rem; }
    .personalization-copy h2, .management-story .management-content h2, .retention-showcase h2 { font-size: 1.8rem; }
    .personalization-copy p, .retention-showcase p { font-size: .9rem; line-height: 1.7; }
    .personalization-points span { font-size: .73rem; }
    .personalization-visual { max-width: 335px; border-width: 6px; }
    .personalization-cover { height: 155px; }
    .owner-dashboard { padding: 15px; }
    .owner-dashboard-tools > div { padding: 10px; }
    .retention-visual { min-height: 230px; }
    .retention-review, .retention-reward { padding: 11px; }
    .retention-review > strong { font-size: .8rem; letter-spacing: 0; }
    .retention-reward { margin-inline-start: 16px; }
    .final-cta { padding: 34px 0; }
    .final-cta-inner { gap: 16px; }
    .footer-bottom { padding: 14px 0 20px; }
}
@media (max-width: 900px) {
    .footer-main { grid-template-columns: 1fr; gap: 0; padding-block: 30px 22px; }
    .footer-main > div { padding-block: 22px; border-bottom: 1px solid #ffffff1e; }
    .footer-main > div:first-child { padding-top: 0; }
    .footer-main > div:last-child { padding-bottom: 0; border-bottom: 0; }
    .footer-brand p, .footer-contact p { margin-top: 10px; }
    .footer-links { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 16px; }
    .footer-links strong { grid-column: 1 / -1; margin-bottom: 4px; }
    .footer-contact { gap: 9px; }
    .footer-contact .footer-email { width: auto; overflow-wrap: normal; word-break: break-word; }
}

/* Refinement after the owner review: use the real guest-page layout in the hero. */
.hero h1 .hero-cross {
    color: #fff;
    background: #ed462c;
    outline: 3px solid #ffe8ad;
    box-shadow: 0 0 0 7px #ed462c45, 0 0 28px #f36a2baa;
    transform: rotate(-10deg);
}
.hero .phone-screen {
    position: relative;
    padding: 29px 12px 15px;
    color: #1d2a32;
    background: #f2ecdf;
    text-align: center;
}
.phone-brand-photo {
    display: grid;
    place-items: center;
    height: 115px;
    margin: -29px -12px 0;
    background: linear-gradient(#0004,#0005), url('../landing/restaurant-hero.webp') center / cover no-repeat;
    clip-path: ellipse(91% 100% at 50% 0%);
}
.phone-brand-photo .mini-brand-logo {
    width: 49px;
    height: 49px;
    margin: 0;
    border: 2px solid #d5a52b;
    border-radius: 12px;
    box-shadow: 0 5px 20px #0009;
}
.phone-table-badge {
    position: relative;
    width: fit-content;
    margin: -11px auto 13px;
    padding: 5px 10px;
    color: #38290c;
    background: #fff9ec;
    border: 1px solid #d8b561;
    border-radius: 999px;
    box-shadow: 0 5px 12px #0005;
    font-size: .65rem;
    font-weight: 900;
    direction: ltr;
}
.hero .phone-screen .phone-intro {
    margin: 0 0 8px;
    color: #35434b;
    font-size: .68rem;
    line-height: 1.4;
}
.phone-request-note { margin-bottom: 8px; color: #37434a; font-size: .59rem; font-weight: 800; }
.phone-request-note span { display: block; margin-top: 3px; padding: 7px 5px; color: #8f918d; background: #fffdf9; border-radius: 6px; font-size: .52rem; font-weight: 500; }
.phone-action {
    display: flex;
    align-items: center;
    gap: 8px;
    min-height: 44px;
    margin-top: 6px;
    padding: 5px 7px;
    color: #221d12;
    background: #fffaf0;
    border: 1px solid #e7cf9a;
    border-radius: 9px;
    text-align: start;
}
.phone-action > span { display: grid; place-items: center; width: 21px; flex: none; color: #a37200; font-size: 1rem; font-weight: 900; }
.phone-action > span svg { display: block; width: 18px; height: 18px; }
.phone-action strong { flex: 1; font-size: .65rem; line-height: 1.15; }
.phone-action small { display: block; margin-top: 2px; font-size: .48rem; font-weight: 700; direction: ltr; }
.phone-action i { font-size: 1rem; font-style: normal; }
.phone-action-primary { color: #261e0b; background: linear-gradient(120deg, #f1d16f, #c99819); border-color: #f1d16f; }
.phone-action-primary > span { color: #332811; }
.phone-action-loyalty { color: #fff8e9; background: #3a2f12; border-color: #a98529; }
.phone-action-loyalty > span { color: #f0bf39; }
.moments-kicker {
    gap: 11px;
    padding: 9px 18px 9px 10px;
    color: #281d0c;
    background: #ffe7a5;
    border: 2px solid #dfaa25;
    font-size: clamp(1.05rem, 2.1vw, 1.45rem);
    letter-spacing: 0;
    box-shadow: 0 8px 25px #a7711840;
}
.moments-bang {
    display: grid;
    place-items: center;
    width: 30px;
    height: 30px;
    color: #fff;
    background: #e04d24;
    border-radius: 50%;
    font: 900 1.3rem/1 Arial,sans-serif;
    box-shadow: 0 0 0 4px #fff9e9;
}
.landing-showcase .showcase-content h2 {
    margin: 0 0 18px;
    padding-inline-start: 16px;
    border-inline-start: 4px solid #e9b128;
    color: #fff;
    font-size: clamp(2.15rem, 4vw, 3.4rem);
    line-height: 1.25;
}
.landing-showcase .showcase-points span { background: #f1b7391a; }
.retention-kicker { padding: 7px 12px; background: #fff0c7; border-radius: 99px; }
.retention-showcase .reviews-copy h2 { max-width: 650px; line-height: 1.3; }
.retention-showcase .reviews-copy h2 em { display: block; color: #a46b00; font-style: normal; }
.retention-showcase .reviews-copy > p { max-width: 570px; }
.retention-benefits { gap: 12px; }
.retention-benefits > div { padding: 13px 15px; background: #fff; border: 1px solid #ead9b1; border-radius: 15px; box-shadow: 0 8px 22px #3a2b1012; }
.retention-benefits strong { color: #182a34; }
.retention-visual { position: relative; min-height: 330px; border: 1px solid #cda53d; }
.retention-review { transform: rotate(1deg); }
.retention-review > strong { font-size: .86rem; }
.retention-connection { display: flex; justify-content: center; align-items: center; gap: 10px; color: #f7c54a; }
.retention-connection span { width: 45px; height: 1px; background: #dfb851; }
.retention-connection b { display: grid; place-items: center; width: 29px; height: 29px; background: #e1aa23; color: #231a09; border-radius: 50%; }
.retention-reward { margin-inline-start: 0; background: #292a23; color: #fff9e9; border: 1px solid #cba34e; transform: rotate(-1deg); }
.retention-reward small { color: #efdcb4; }
.retention-reward > span { color: #302003; background: #f4c64e; }
.pricing-section { background: linear-gradient(180deg, #fff7e7 0%, #fffdf8 100%); }
.pricing-section .section-heading h2 { color: #142734; }
.pricing-section .section-heading h2::after { content: ""; display: block; width: 64px; height: 4px; margin: 13px auto 0; background: #d99d0a; border-radius: 99px; }
.pricing-grid { gap: 17px; align-items: stretch; }
.pricing-card {
    display: flex;
    flex-direction: column;
    padding: 34px 26px 25px;
    border: 1px solid #eadaba;
    border-top: 5px solid #d7b765;
    border-radius: 22px;
    box-shadow: 0 15px 39px #5f46151a;
}
.pricing-card-featured {
    border: 2px solid #c18a07;
    border-top: 6px solid #e5aa13;
    background: linear-gradient(#fff7df 0, #fff 165px);
    box-shadow: 0 18px 48px #af781c3d;
    transform: translateY(-7px);
}
.pricing-card .plan-heading { padding-bottom: 18px; }
.pricing-card .plan-heading h3 { font-size: 1.75rem; }
.pricing-card-featured .plan-heading h3 { color: #805300; }
.pricing-card .plan-features { flex: 1; min-height: 0; margin: 0 0 18px; padding-top: 12px; }
.pricing-card .plan-features li { padding-block: 8px; border-bottom: 1px solid #f0eadf; font-size: .85rem; line-height: 1.5; }
.pricing-card .button { margin-top: auto; border-radius: 12px; }
.pricing-card-featured .button { color: #171b20; background: #e7ac17; border-color: #e7ac17; box-shadow: 0 8px 20px #d5992842; }
.pricing-card.custom-plan { color: #fff; background: linear-gradient(145deg, #18303a, #111c26); border-color: #30434a; border-top-color: #d5a735; }
.custom-plan .plan-heading h3, .custom-plan .plan-heading p, .custom-plan .plan-label, .custom-plan .custom-questions li { color: #fff; }
.custom-plan .custom-plan-mark { color: #e8b12a; }
.custom-plan .button { color: #1a2027; background: #e6ab1b; border-color: #e6ab1b; }
.featured-ribbon { left: auto; right: 0; border-radius: 0 0 0 13px; font-size: .75rem; }
.footer-rights p { color: #dfdfdc; }
@media (max-width: 900px) {
    .pricing-card-featured { transform: none; }
}
@media (max-width: 620px) {
    .hero .hero-cross { outline-width: 2px; box-shadow: 0 0 0 5px #ed462c55, 0 0 18px #f36a2baa; }
    .hero-visual { min-height: 486px; }
    .hero .phone-shell { width: 205px; left: 36%; }
    .hero .phone-screen { min-height: 445px; padding: 27px 8px 12px; }
    .hero .phone-brand-photo { height: 92px; margin: -27px -8px 0; }
    .hero .phone-brand-photo .mini-brand-logo { width: 42px; height: 42px; }
    .hero .phone-table-badge { margin-bottom: 9px; font-size: .58rem; }
    .hero .phone-screen .phone-intro { font-size: .58rem; }
    .hero .phone-request-note { font-size: .53rem; }
    .hero .phone-request-note span { font-size: .47rem; }
    .hero .phone-action { min-height: 43px; margin-top: 6px; }
    .hero .phone-action strong { font-size: .62rem; }
    .hero .phone-action small { font-size: .47rem; }
    .hero .request-notice { top: 113px; width: 145px; }
    .hero .complete-card { bottom: 32px; }
    .moments-kicker { font-size: 1.05rem; }
    .moments-bang { width: 27px; height: 27px; }
    .moment-card .moment-photo { object-position: 62% center; }
    .moment-card-featured .moment-photo { object-position: center 32%; }
    .retention-showcase .reviews-copy h2 { font-size: 1.95rem; }
    .retention-visual { min-height: 255px; }
    .retention-review { flex-wrap: wrap; }
    .retention-review > strong { width: 100%; text-align: center; }
    .pricing-card { padding: 26px 22px 22px; }
    .pricing-card .plan-heading p { min-height: 0; }
}

.moment-photo-wrap { position: relative; margin-bottom: 17px; overflow: hidden; }
.moment-card .moment-photo-wrap .moment-photo { margin-bottom: 0; }
.moment-callout {
    position: absolute;
    inset-inline-start: 14px;
    bottom: 14px;
    z-index: 1;
    padding: 8px 14px;
    color: #1b2329;
    background: #fff9e9;
    border: 2px solid #e1a528;
    border-radius: 999px;
    box-shadow: 0 5px 17px #0006;
    font-size: .94rem;
    font-weight: 900;
    line-height: 1.25;
    white-space: nowrap;
}
@media (max-width: 620px) {
    .moment-photo-wrap { margin-bottom: 8px; }
    .moment-card .moment-photo-wrap .moment-photo { height: 136px; margin-bottom: 0; }
    .moment-callout { inset-inline-start: 7px; bottom: 8px; padding: 5px 8px; font-size: .7rem; border-width: 1px; }
}

/* Let the approved dark mark lift softly from dark surfaces. */
.site-header .brand-logo,
.site-footer .brand-logo {
    padding: 0;
    border: 0;
    background: transparent;
    box-shadow: 0 0 15px #efbb3b66, 0 7px 18px #0005;
}
.footer-contact .footer-email {
    color: #f6d98b;
    font-size: .83rem;
    font-weight: 700;
    overflow-wrap: anywhere;
}
.footer-contact .footer-email:hover { color: #fff; }
.footer-contact-methods {
    display: grid;
    justify-items: start;
    gap: 9px;
    min-width: 0;
    direction: rtl;
}
.footer-contact-methods a { max-width: 100%; }
.footer-contact-line { display: block; width: 100%; text-align: start; }
.footer-contact-line a { display: inline-block; vertical-align: top; }
.site-footer .footer-wordmark .brand-name { font-size: 1.18rem; }
.footer-brand p { font-size: .72rem; line-height: 1.7; }

/* Keep plan prices available in the markup for later reactivation. */
.all-plan-prices[hidden],
.footer-contact[hidden] { display: none !important; }
.whatsapp-float {
    left: max(16px, env(safe-area-inset-left));
    bottom: max(18px, env(safe-area-inset-bottom));
    width: 58px;
    height: 58px;
    border-width: 2px;
    background: #25d366;
    box-shadow: 0 8px 25px #0d7c3d65, 0 0 0 1px #188b49;
}
.whatsapp-float svg { width: 33px; height: 33px; stroke-width: 2.2; }
@media (max-width: 620px) {
    .whatsapp-float {
        left: max(14px, env(safe-area-inset-left));
        bottom: max(14px, env(safe-area-inset-bottom));
        width: 54px;
        height: 54px;
    }
    .whatsapp-float svg { width: 31px; height: 31px; }
}

/* Landing pricing: clear calls to action and readable branch requirements. */
.pricing-card .basic-plan-button {
    color: #fff;
    background: #172b35;
    border: 2px solid #172b35;
    box-shadow: 0 8px 20px #172b3533;
    font-weight: 900;
}
.pricing-card .basic-plan-button:hover,
.pricing-card .basic-plan-button:focus-visible {
    color: #172b35;
    background: #f4c64e;
    border-color: #c99009;
}
.custom-plan .custom-questions {
    gap: 12px;
    margin-block: 28px;
}
.custom-plan .custom-questions li {
    display: grid;
    place-items: center;
    min-height: 72px;
    padding: 13px;
    background: #ffffff17;
    border: 1px solid #ffffff42;
    border-radius: 14px;
    font-size: .92rem;
    font-weight: 800;
    line-height: 1.4;
}
@media (max-width: 620px) {
    .custom-plan .custom-questions { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 360px) {
    .custom-plan .custom-questions { grid-template-columns: 1fr; }
}

/* Two clear packages, shared capabilities, and a separate branch offer. */
.pricing-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
.pricing-card { min-width: 0; }
.pricing-grid .pricing-card { padding: 28px; }
.pricing-card .plan-heading { min-height: 105px; }
.pricing-card .plan-heading p { min-height: 0; }
.pricing-card .plan-features { display: grid; gap: 8px; padding-top: 18px; }
.pricing-card .plan-features li {
    padding: 13px 42px 13px 14px;
    color: #152d3b;
    background: #f4f8f9;
    border: 0;
    border-radius: 12px;
    font-size: .94rem;
    font-weight: 650;
}
.pricing-card-featured .plan-features li { background: #fff8e9; }
.pricing-card .plan-features li::before { top: 50%; right: 12px; transform: translateY(-50%); width: 22px; height: 22px; }
.pricing-shared {
    margin-top: 24px;
    padding: 23px 28px;
    background: #fff;
    border: 1px solid #d8e2e6;
    border-radius: 20px;
}
.pricing-shared h3 { margin: 0 0 3px; color: #152d3b; font-size: 1.35rem; }
.pricing-shared p { margin: 0; color: #607382; font-size: .82rem; }
.pricing-shared ul { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin: 18px 0 0; padding: 0; list-style: none; }
.pricing-shared li { padding: 12px; color: #15303e; background: #eef4f5; border-radius: 11px; text-align: center; font-size: .85rem; font-weight: 750; }
.pricing-branch { margin-top: 22px; }
.pricing-branch .custom-plan {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 24px;
    padding: 24px 28px;
    border-top: 1px solid #d5a735;
}
.pricing-branch .custom-plan-mark, .pricing-branch .custom-questions { display: none; }
.pricing-branch .plan-heading { flex: 1; min-width: 0; padding: 0; }
.pricing-branch .plan-heading h3 { margin-top: 3px; }
.pricing-branch .plan-heading p { margin: 0; }
.pricing-branch .button { flex: 0 0 auto; width: auto; margin: 0; }
@media (max-width: 700px) {
    .pricing-grid { grid-template-columns: 1fr; gap: 17px; }
    .pricing-card-featured { transform: none; }
    .pricing-shared ul { grid-template-columns: 1fr; }
    .pricing-branch .custom-plan { flex-wrap: wrap; }
    .pricing-branch .plan-heading { flex-basis: 100%; }
    .pricing-branch .button { width: 100%; }
}
@media (max-width: 620px) {
    .site-footer .footer-wordmark .brand-logo { width: 42px; height: 42px; }
    .site-footer .footer-wordmark .brand-name { font-size: 1.08rem; }
    .footer-brand p { max-width: 38ch; font-size: .69rem; line-height: 1.65; }
    .footer-contact-methods { display: block; }
    .footer-contact-line + .footer-contact-line { margin-top: 9px; }
    .footer-contact-line .footer-email { font-size: .76rem; overflow-wrap: anywhere; }
}

/* Native disclosure keeps the comparison out of the way until requested. */
.comparison-wrap {
    margin-top: 22px;
    padding: 0;
    overflow: hidden;
    border-color: #dfc893;
    box-shadow: 0 10px 28px #59421815;
}
.comparison-toggle {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    min-height: 62px;
    padding: 15px 22px;
    color: #172b35;
    background: #fff9e9;
    cursor: pointer;
    font-size: 1rem;
    font-weight: 900;
    list-style: none;
}
.comparison-toggle::-webkit-details-marker { display: none; }
.comparison-toggle:hover,
.comparison-toggle:focus-visible { background: #ffefc8; }
.comparison-chevron {
    flex: none;
    width: 10px;
    height: 10px;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transform: rotate(45deg);
    transition: transform .2s ease;
}
.comparison-wrap[open] .comparison-chevron { transform: rotate(225deg); }
.comparison-content { padding: 25px 28px 28px; border-top: 1px solid #eedfbe; }
@media (max-width: 620px) {
    .comparison-toggle { min-height: 58px; padding: 13px 17px; }
    .comparison-content { padding: 17px 12px 18px; }
}

/* One balanced WhatsApp mark, with a solid handset inside the outline. */
.whatsapp-float {
    box-sizing: border-box;
    width: 56px;
    height: 56px;
    border: 3px solid #fff;
    border-radius: 50%;
    background: #25d366;
    box-shadow: 0 9px 24px #0d7c3d55;
}
.whatsapp-float svg { width: 32px; height: 32px; stroke: none; }
.whatsapp-outline { fill: none; stroke: #fff; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.whatsapp-handset { fill: #fff; }
@media (max-width: 620px) {
    .whatsapp-float { width: 54px; height: 54px; }
    .whatsapp-float svg { width: 31px; height: 31px; }
}

.trial-whatsapp-note {
    margin: 13px 0 0;
    color: #4b5864;
    font-size: .83rem;
    line-height: 1.7;
    text-align: center;
}