/*
 * Checker landing — one stylesheet, no framework (AGENTS §5).
 * Mobile-first: base rules target the phone, the @media blocks at the end add the desktop layout.
 * Palette tokens live in `tokens.css` (shared with the admin panel, loaded before this file).
 */

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

html {
    scroll-behavior: smooth;
    scroll-padding-top: 88px;
    -webkit-text-size-adjust: 100%;
}

body {
    margin: 0;
    font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    font-size: 16px;
    line-height: 1.55;
    color: var(--ink);
    background: #fff;
    -webkit-font-smoothing: antialiased;
}

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

h1,
h2,
h3,
p,
ul,
ol {
    margin: 0;
}

ul,
ol {
    padding: 0;
    list-style: none;
}

a {
    color: var(--brand-dark);
    text-decoration: none;
}

a:hover {
    text-decoration: underline;
    text-underline-offset: 3px;
}

:where(a, button, summary, input, select, textarea):focus-visible {
    outline: 3px solid #34d399;
    outline-offset: 3px;
    border-radius: 6px;
}

.wrap {
    width: 100%;
    max-width: var(--max);
    margin: 0 auto;
    padding: 0 20px;
}

.skip-link {
    position: absolute;
    left: -9999px;
    top: 0;
    z-index: 100;
    padding: 10px 16px;
    background: #fff;
    color: var(--ink);
    border-radius: 0 0 10px 0;
}

.skip-link:focus {
    left: 0;
}

/* Buttons */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .5rem;
    padding: .72rem 1.25rem;
    border: 1px solid transparent;
    border-radius: 12px;
    font: inherit;
    font-size: .95rem;
    font-weight: 600;
    line-height: 1.2;
    text-align: center;
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
    transition: transform .15s ease, box-shadow .15s ease, background-color .15s ease, border-color .15s ease;
}

.btn:hover {
    text-decoration: none;
    transform: translateY(-1px);
}

.btn-primary {
    /* #0a7d56 with white text is 5.1:1 — #0e9f6e would be 3.4:1 and fail AA on a 15px label. */
    background: var(--brand-dark);
    color: #fff;
    box-shadow: 0 12px 24px -14px rgba(14, 159, 110, .9);
}

.btn-primary:hover {
    background: var(--brand-darker);
    color: #fff;
}

.btn-ghost {
    background: #fff;
    color: var(--ink);
    border-color: #d8e2ea;
}

.btn-ghost:hover {
    border-color: #bfd0dc;
    color: var(--ink);
}

.btn-lg {
    padding: .95rem 1.6rem;
    font-size: 1rem;
}

.btn-sm {
    padding: .55rem 1rem;
    font-size: .88rem;
}

.btn-block {
    width: 100%;
}

/* Header */
.nav {
    position: sticky;
    top: 0;
    z-index: 50;
    background: rgba(255, 255, 255, .92);
    backdrop-filter: blur(12px);
    border-bottom: 1px solid var(--line);
}

.nav-inner {
    display: flex;
    align-items: center;
    gap: 24px;
    min-height: 74px;
}

.brand {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    color: var(--ink);
    text-decoration: none;
}

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

.brand-mark {
    display: grid;
    place-items: center;
    flex: none;
    width: 40px;
    height: 40px;
    border-radius: 12px;
    background: var(--brand-gradient);
    box-shadow: 0 8px 16px -10px rgba(14, 159, 110, .9);
}

.brand-text {
    display: flex;
    flex-direction: column;
    line-height: 1.15;
}

.brand-name {
    font-size: 1.08rem;
    font-weight: 700;
    letter-spacing: -.01em;
}

.brand-tag {
    font-size: .72rem;
    color: var(--muted);
}

.nav-links {
    display: flex;
    gap: 24px;
    margin-left: auto;
}

.nav-links a {
    font-size: .9rem;
    font-weight: 500;
    color: var(--ink-soft);
}

.nav-links a:hover {
    color: var(--brand-dark);
    text-decoration: none;
}

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

.nav-more {
    display: none;
    position: relative;
    margin-left: auto;
}

.nav-toggle {
    display: grid;
    gap: 4px;
    /* 44×44 tap target (3 bars of 2px + 2 gaps of 4px, plus the padding). */
    padding: 15px 12px;
    list-style: none;
    border: 1px solid var(--line);
    border-radius: 10px;
    cursor: pointer;
}

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

.nav-toggle span {
    display: block;
    width: 20px;
    height: 2px;
    border-radius: 2px;
    background: var(--ink);
}

.nav-panel {
    position: absolute;
    right: 0;
    top: calc(100% + 12px);
    z-index: 60;
    display: grid;
    gap: 4px;
    width: min(320px, calc(100vw - 40px));
    /* A landscape phone is ~375px tall: the panel must scroll instead of running off-screen. */
    max-height: calc(100vh - 96px);
    max-height: calc(100dvh - 96px);
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: 14px;
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 16px;
    box-shadow: var(--shadow);
}

/* Nav links only — a button in the panel keeps its own colours and padding. */
.nav-panel a:not(.btn) {
    padding: 10px 12px;
    border-radius: 10px;
    font-weight: 500;
    color: var(--ink-soft);
}

.nav-panel a:not(.btn):hover {
    background: var(--bg-soft);
    text-decoration: none;
}

.nav-panel .btn {
    margin-top: 6px;
}

/* Hero */
.hero {
    position: relative;
    overflow: hidden;
    padding: clamp(40px, 7vw, 76px) 0 clamp(30px, 5vw, 48px);
    background:
        radial-gradient(900px 480px at 88% -12%, #d8f3e7 0%, transparent 62%),
        radial-gradient(600px 380px at 0% 100%, #fbf1e4 0%, transparent 60%),
        linear-gradient(180deg, #fcfefd 0%, #f4f8f7 100%);
}

.hero-grid {
    display: grid;
    gap: clamp(28px, 5vw, 52px);
    align-items: center;
}

.eyebrow {
    display: inline-flex;
    /* A wrapped label must keep its dot on the first line (same rule as .hero-note). */
    align-items: flex-start;
    gap: 8px;
    padding: 6px 12px;
    background: #fff;
    border: 1px solid #d7e8e0;
    border-radius: 999px;
    font-size: .76rem;
    font-weight: 600;
    color: var(--brand-dark);
}

.eyebrow .dot {
    margin-top: 6px;
}

.dot {
    display: inline-block;
    flex: none;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--muted);
}

.dot--brand {
    background: var(--brand);
    box-shadow: 0 0 0 3px rgba(14, 159, 110, .16);
}

h1 {
    margin: 18px 0 16px;
    font-size: clamp(2rem, 5.4vw, 3.35rem);
    font-weight: 800;
    line-height: 1.06;
    letter-spacing: -.035em;
}

/* On a 320–340px screen 32px breaks the headline into four short lines (an orphan "Каждый"). */
@media (max-width: 359.98px) {
    h1 {
        font-size: 1.75rem;
    }
}

.lead {
    max-width: 34rem;
    font-size: clamp(1rem, 1.6vw, 1.14rem);
    line-height: 1.6;
    color: var(--ink-soft);
}

.bullets {
    display: grid;
    gap: 10px;
    margin-top: 22px;
}

.bullets li {
    display: flex;
    align-items: flex-start;
    gap: 9px;
    font-size: .95rem;
    font-weight: 500;
}

.i-check {
    flex: none;
    margin-top: 2px;
    color: var(--brand);
}

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

.hero-note {
    display: flex;
    /* Wrapped copy must keep the dot on the first line, not float it to the middle. */
    align-items: flex-start;
    gap: 8px;
    margin-top: 18px;
    font-size: .84rem;
    color: var(--muted);
}

.hero-note .dot {
    margin-top: 7px;
}

/* Cashier screen mock (decorative, described by aria-label on .screen) */
.screen {
    overflow: hidden;
    border-radius: 22px;
    background: #0b1c26;
    color: #e8f1f5;
    box-shadow: 0 30px 60px -30px rgba(8, 32, 43, .55), 0 0 0 1px rgba(255, 255, 255, .06) inset;
}

.screen-bar {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 12px 16px;
    background: #0f2733;
    border-bottom: 1px solid rgba(255, 255, 255, .07);
    font-size: .78rem;
    color: #9db4c0;
}

.screen-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #33505e;
}

.screen-title {
    margin-left: 8px;
    font-weight: 600;
    color: #d6e5ec;
}

.screen-live {
    margin-left: auto;
    padding: 3px 8px;
    border-radius: 999px;
    background: rgba(16, 185, 129, .16);
    color: #7ee2b8;
    font-size: .7rem;
    font-weight: 600;
}

.screen-body {
    display: grid;
}

.tray {
    position: relative;
    padding: 14px;
    background: #0e2530;
}

.tray-art {
    display: block;
    width: 100%;
    height: auto;
    border-radius: 12px;
}

.tag {
    position: absolute;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 9px;
    border-radius: 999px;
    background: rgba(255, 255, 255, .96);
    color: var(--ink);
    font-size: .68rem;
    font-weight: 600;
    box-shadow: 0 8px 18px -12px rgba(4, 18, 26, .9);
    white-space: nowrap;
}

.tag b {
    color: var(--brand-dark);
    font-size: .66rem;
}

.tag-1 {
    top: 16%;
    left: 6%;
}

.tag-2 {
    top: 58%;
    right: 4%;
}

.tag-3 {
    top: 8%;
    right: 5%;
}

.order {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 16px;
    background: #0b1c26;
    border-top: 1px solid rgba(255, 255, 255, .07);
}

.order-title {
    font-size: .68rem;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: #8aa4b2;
}

.order-list {
    display: grid;
    gap: 8px;
    font-size: .8rem;
}

.order-list li {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    color: #dbe8ee;
}

.order-list .ok {
    color: #7ee2b8;
    font-weight: 700;
}

.order-list .miss {
    color: #ffd08a;
}

.order-list .miss span {
    color: #ffc978;
    font-weight: 700;
}

.order-total {
    margin-top: auto;
    font-size: .72rem;
    color: #8aa4b2;
}

.screen-foot {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    padding: 12px 16px;
    background: #0f2733;
    border-top: 1px solid rgba(255, 255, 255, .07);
}

.pill {
    display: inline-flex;
    align-items: center;
    padding: 4px 9px;
    border-radius: 999px;
    font-size: .7rem;
    font-weight: 600;
}

.pill-ok {
    background: rgba(16, 185, 129, .16);
    color: #7ee2b8;
}

.pill-warn {
    background: rgba(245, 158, 11, .16);
    color: #ffc978;
}

/* Trust bar */
.trust {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px 20px;
    margin-top: clamp(28px, 5vw, 44px);
    padding-top: 24px;
    border-top: 1px solid var(--line);
}

.trust li {
    display: flex;
    align-items: flex-start;
    gap: 9px;
    font-size: .86rem;
    font-weight: 600;
    color: var(--ink-soft);
}

.trust li::before {
    content: "";
    flex: none;
    width: 8px;
    height: 8px;
    margin-top: 7px;
    border-radius: 50%;
    background: var(--brand);
}

/* Sections */
.section {
    padding: clamp(52px, 8vw, 92px) 0;
}

.section--soft {
    background: var(--bg-soft);
    border-top: 1px solid var(--line);
    border-bottom: 1px solid var(--line);
}

.section--tight {
    padding: clamp(32px, 5vw, 52px) 0;
}

.head {
    max-width: 44rem;
    margin: 0 auto clamp(28px, 5vw, 44px);
    text-align: center;
}

.kicker {
    margin-bottom: 10px;
    font-size: .76rem;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--brand-dark);
}

.head h2,
.demo-copy h2,
.pos-copy h2 {
    margin-bottom: 12px;
    font-size: clamp(1.5rem, 3.2vw, 2.15rem);
    font-weight: 800;
    line-height: 1.15;
    letter-spacing: -.025em;
}

.head p {
    color: var(--muted);
    font-size: 1rem;
}

.cards {
    display: grid;
    gap: 16px;
}

.card {
    padding: 22px;
    background: #fff;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    box-shadow: 0 1px 2px rgba(13, 31, 45, .04);
    transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}

.card:hover {
    transform: translateY(-3px);
    border-color: #cfdded;
    box-shadow: var(--shadow);
}

.card-icon {
    display: grid;
    place-items: center;
    width: 42px;
    height: 42px;
    margin-bottom: 14px;
    border-radius: 12px;
    background: var(--brand-soft);
    color: var(--brand-dark);
}

.card h3 {
    margin-bottom: 8px;
    font-size: 1.04rem;
    font-weight: 700;
    letter-spacing: -.01em;
}

.card p {
    color: var(--muted);
    font-size: .93rem;
    line-height: 1.6;
}

.card .fix {
    margin-top: 12px;
    padding-left: 12px;
    border-left: 3px solid var(--brand);
    color: var(--ink-soft);
    font-weight: 500;
}

/* What the cashier sees */
.split {
    display: grid;
    gap: clamp(22px, 4vw, 40px);
    align-items: center;
}

.check-card {
    overflow: hidden;
    background: #fff;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
}

.check-head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 16px 18px;
    border-bottom: 1px solid var(--line);
    font-size: .88rem;
    font-weight: 600;
}

.badge {
    display: inline-flex;
    padding: 3px 9px;
    border-radius: 999px;
    font-size: .72rem;
    font-weight: 600;
}

.badge-warn {
    background: #fff4e0;
    color: #a35b00;
}

.check-list {
    padding: 6px 18px;
}

.check-list li {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 11px 0;
    border-bottom: 1px dashed var(--line);
    font-size: .9rem;
}

.check-list li:last-child {
    border-bottom: 0;
}

.check-list li span {
    font-size: .8rem;
    color: var(--muted);
}

.check-list li.ok span {
    color: var(--brand-dark);
    font-weight: 600;
}

.check-list li.bad {
    color: #8a4b00;
    font-weight: 600;
}

.check-list li.bad span {
    color: #a35b00;
}

.check-foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 14px 18px;
    background: var(--bg-soft);
    border-top: 1px solid var(--line);
    font-size: .8rem;
    color: var(--muted);
}

.thumb {
    flex: none;
    width: 56px;
    height: 38px;
    overflow: hidden;
    border-radius: 8px;
    border: 1px solid #cbd9e2;
    background: #eef3f6;
}

.thumb svg {
    display: block;
    width: 100%;
    height: 100%;
}

.steps {
    display: grid;
    gap: 14px;
}

.step {
    display: grid;
    grid-template-columns: 40px minmax(0, 1fr);
    gap: 14px;
    padding: 18px;
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 16px;
}

.step-num {
    display: grid;
    place-items: center;
    width: 36px;
    height: 36px;
    border-radius: 10px;
    background: var(--ink);
    color: #fff;
    font-size: .9rem;
    font-weight: 700;
}

.step h3 {
    margin-bottom: 5px;
    font-size: .98rem;
    font-weight: 700;
}

.step p {
    color: var(--muted);
    font-size: .9rem;
    line-height: 1.55;
}

/* Launch */
.launch {
    display: grid;
    gap: 20px;
    align-items: start;
}

.timeline {
    display: grid;
    gap: 12px;
}

.timeline li {
    display: grid;
    grid-template-columns: 40px minmax(0, 1fr);
    gap: 14px;
    padding: 18px;
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 16px;
}

.timeline h3 {
    margin-bottom: 5px;
    font-size: .98rem;
    font-weight: 700;
}

.timeline p {
    color: var(--muted);
    font-size: .9rem;
    line-height: 1.55;
}

.aside {
    padding: 22px;
    background: #fff;
    border: 1px solid var(--line);
    border-radius: var(--radius);
}

.aside h3 {
    margin-bottom: 10px;
    font-size: .95rem;
    font-weight: 700;
}

.aside h3 + .need {
    margin-bottom: 20px;
}

.need {
    display: grid;
    gap: 8px;
    font-size: .9rem;
}

.need li {
    display: flex;
    align-items: flex-start;
    gap: 9px;
}

.mark {
    display: grid;
    place-items: center;
    flex: none;
    width: 20px;
    height: 20px;
    margin-top: 1px;
    border-radius: 50%;
    background: var(--brand-soft);
    color: var(--brand-dark);
    font-size: .74rem;
    font-weight: 800;
}

.need--no .mark {
    background: #f1f4f7;
    color: #7d8f9e;
}

.need--no li {
    color: var(--muted);
}

.aside-foot {
    padding-top: 16px;
    border-top: 1px solid var(--line);
    font-size: .84rem;
    color: var(--muted);
}

/* POS integration band */
.pos {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 22px;
    padding: clamp(20px, 3vw, 28px);
    background: #fff;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    box-shadow: 0 1px 2px rgba(13, 31, 45, .04);
}

.pos-copy {
    flex: 1 1 30rem;
    max-width: 36rem;
}

.pos-copy p {
    color: var(--muted);
    font-size: .95rem;
}

.pos-side {
    display: flex;
    flex: 0 1 22rem;
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
    min-width: 0;
}

.pos-badge {
    display: inline-flex;
    align-items: center;
    padding: 10px 18px;
    border-radius: 12px;
    background: #f1f5f9;
    border: 1px solid #dde6ee;
    font-size: 1.15rem;
    font-weight: 800;
    letter-spacing: -.02em;
}

.pos-note {
    font-size: .78rem;
    color: var(--muted);
}

.pos-roadmap {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.pos-badge--soon {
    padding: 6px 12px;
    border-style: dashed;
    border-color: #cbd5e1;
    background: #fff;
    color: var(--muted);
    font-size: .95rem;
    font-weight: 700;
}

.pos-link {
    font-size: .82rem;
    font-weight: 600;
    color: var(--brand-dark);
}

.pos-link:hover {
    text-decoration: underline;
}

/* Audience */
.tags {
    display: grid;
    gap: 12px;
}

.tag-item {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 16px;
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 14px;
    font-weight: 600;
}

.tag-dot {
    flex: none;
    width: 10px;
    height: 10px;
    margin-top: 6px;
    border-radius: 50%;
    background: var(--brand);
    box-shadow: 0 0 0 4px var(--brand-soft);
}

.notfit {
    margin-top: 22px;
    padding: 18px 20px;
    background: #fffbf3;
    border: 1px solid #f3e3c8;
    border-left: 4px solid #f59e0b;
    border-radius: 14px;
}

.notfit h3 {
    margin-bottom: 10px;
    font-size: .95rem;
    font-weight: 700;
}

.notfit ul {
    display: grid;
    gap: 6px;
    font-size: .9rem;
    color: var(--ink-soft);
}

.notfit li {
    display: flex;
    gap: 8px;
}

.notfit li::before {
    content: "—";
    color: #a35b00;
}

/* FAQ */
.faq {
    display: grid;
    gap: 12px;
    align-items: start;
}

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

.faq summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    padding: 17px 20px;
    list-style: none;
    font-size: .95rem;
    font-weight: 600;
    cursor: pointer;
}

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

.faq-icon {
    position: relative;
    flex: none;
    width: 18px;
    height: 18px;
    transition: transform .2s ease;
}

.faq-icon::before,
.faq-icon::after {
    content: "";
    position: absolute;
    border-radius: 2px;
    background: var(--ink-soft);
}

.faq-icon::before {
    left: 8px;
    top: 2px;
    width: 2px;
    height: 14px;
}

.faq-icon::after {
    top: 8px;
    left: 2px;
    width: 14px;
    height: 2px;
}

.faq details[open] .faq-icon {
    transform: rotate(45deg);
}

.faq-body {
    padding: 0 20px 18px;
    color: var(--ink-soft);
    font-size: .92rem;
    line-height: 1.6;
}

/* Demo + lead form */
.demo {
    display: grid;
    gap: 28px;
    align-items: start;
}

.demo-copy .lead {
    margin-top: 2px;
}

.contact-line {
    margin-top: 18px;
    font-size: .92rem;
    color: var(--muted);
}

.lead-card {
    padding: clamp(20px, 3vw, 30px);
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 20px;
    box-shadow: var(--shadow);
}

.lead-form {
    display: grid;
    gap: 14px;
}

.lead-form .mb-3 {
    margin-bottom: 0 !important;
}

.lead-form .form-label {
    display: block;
    margin-bottom: 6px;
    font-size: .82rem;
    font-weight: 600;
}

.field-row {
    display: grid;
    gap: 14px;
}

.form-control,
.form-select {
    display: block;
    width: 100%;
    padding: 11px 13px;
    border: 1px solid #d5e0e9;
    border-radius: 10px;
    background: #fff;
    color: var(--ink);
    font: inherit;
    font-size: 16px;
    line-height: 1.4;
}

.form-control:focus,
.form-select:focus {
    outline: 0;
    border-color: var(--brand);
    box-shadow: 0 0 0 3px rgba(14, 159, 110, .16);
}

textarea.form-control {
    min-height: 104px;
    resize: vertical;
}

/* Lead-form shells: the phone holds the whole `+7 (999) 123-45-67` (the mask keeps the dial code
   inside the value, so nothing is duplicated outside the input), the city grows an offline
   suggestion listbox underneath itself. */
.input-shell {
    position: relative;
}

.field-phone .form-control {
    height: 50px;
    padding-right: 42px;
    font-size: 17px;
    font-variant-numeric: tabular-nums;
    letter-spacing: .02em;
}

.form-control::placeholder {
    color: #9aa9b6;
}

.input-shell-check {
    position: absolute;
    top: 50%;
    right: 12px;
    display: grid;
    place-items: center;
    width: 20px;
    height: 20px;
    margin-top: -10px;
    border-radius: 50%;
    background: var(--brand);
    color: #fff;
    opacity: 0;
    transform: scale(.6);
    transition: opacity .16s ease, transform .16s ease;
    pointer-events: none;
}

.input-shell.is-complete .input-shell-check {
    opacity: 1;
    transform: scale(1);
}

.input-shell.is-complete .form-control {
    border-color: rgba(14, 159, 110, .55);
}

.city-suggest {
    position: absolute;
    z-index: 30;
    top: calc(100% + 6px);
    right: 0;
    left: 0;
    max-height: 258px;
    padding: 6px;
    overflow-y: auto;
    overscroll-behavior: contain;
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 12px;
    box-shadow: 0 18px 40px -18px rgba(13, 31, 45, .35);
}

.city-suggest[hidden] {
    display: none;
}

.city-suggest-option {
    padding: 9px 11px;
    border-radius: 8px;
    font-size: .95rem;
    line-height: 1.3;
    cursor: pointer;
}

.city-suggest-option.is-active {
    background: var(--brand-soft);
    color: var(--brand-darker);
}

.is-invalid {
    border-color: #d64550 !important;
}

.invalid-feedback {
    display: block;
    margin-top: 5px;
    font-size: .8rem;
    color: #b02a37;
}

.lead-form .form-text {
    font-size: .78rem;
    color: var(--muted);
}

.hp {
    position: absolute;
    left: -9999px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

.consent {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    font-size: .82rem;
    line-height: 1.5;
    color: var(--muted);
}

.consent .form-check {
    display: flex;
    flex: none;
    align-items: flex-start;
    margin: 0;
    padding: 0;
    min-height: 0;
}

.consent .form-check-input {
    flex: none;
    width: 18px;
    height: 18px;
    margin: 2px 0 0;
    accent-color: var(--brand);
}

.consent-text {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.consent-text label {
    cursor: pointer;
}

.form-note {
    font-size: .78rem;
    color: var(--muted);
}

.alert {
    margin-bottom: 14px;
    padding: 12px 14px;
    border-radius: 12px;
    font-size: .88rem;
    line-height: 1.5;
}

.alert-success {
    background: #e9f9f1;
    border: 1px solid #b7ecd7;
    color: #065f46;
}

.alert-danger {
    background: #fdecee;
    border: 1px solid #f5c2c7;
    color: #842029;
}

/* One-time server flash (e.g. "you have been logged out") — the landing has no other alerts. */
.flash-wrap {
    padding-top: 18px;
}

.flash-wrap .alert {
    margin-bottom: 0;
}

/* Invisible SmartCaptcha: one shared widget, the challenge is rendered by Yandex on demand. */
.smartcaptcha {
    min-height: 0;
}

.captcha-error {
    margin: 0;
    color: #b02a37;
    font-size: .82rem;
    line-height: 1.5;
}

/* Login modal (server-rendered open at /?login=1, JS-enhanced otherwise). */
[hidden] {
    display: none !important;
}

body.login-open {
    overflow: hidden;
}

.login-modal {
    position: fixed;
    inset: 0;
    z-index: 120;
    display: grid;
    place-items: center;
    padding: 20px;
    overflow-y: auto;
    background: rgba(8, 31, 42, .62);
    backdrop-filter: blur(6px);
}

.login-modal__panel {
    position: relative;
    width: min(440px, 100%);
    max-height: calc(100vh - 40px);
    /* dvh keeps the dialog inside the visible area while a mobile URL bar is expanded. */
    max-height: calc(100dvh - 40px);
    margin: auto;
    padding: clamp(22px, 4vw, 32px);
    overflow-y: auto;
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 22px;
    box-shadow: 0 30px 70px -30px rgba(8, 31, 42, .55);
}

.login-modal__close {
    position: absolute;
    top: 12px;
    right: 12px;
    display: grid;
    place-items: center;
    width: 36px;
    height: 36px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: var(--bg-soft);
    color: var(--ink-soft);
    line-height: 0;
    text-decoration: none;
    cursor: pointer;
}

.login-modal__close svg {
    display: block;
    width: 18px;
    height: 18px;
}

.login-modal__close:hover {
    background: #e6edf3;
    text-decoration: none;
}

.login-head {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 20px;
    padding-right: 36px;
}

.login-head h2 {
    font-size: 1.25rem;
    line-height: 1.25;
    letter-spacing: -.01em;
}

.login-head p {
    margin-top: 3px;
    font-size: .82rem;
    color: var(--muted);
}

.login-form {
    display: grid;
    gap: 14px;
}

.login-form .form-label {
    display: block;
    margin-bottom: 6px;
    font-size: .82rem;
    font-weight: 600;
}

.login-form .btn {
    margin-top: 2px;
}

.login-modal__back {
    display: inline-block;
    margin-top: 16px;
    font-size: .84rem;
    color: var(--muted);
}

.login-modal__back:hover {
    color: var(--brand-dark);
}

body.login-open .mobile-cta {
    display: none;
}

/* Footer */
.footer {
    background: #081f2a;
    color: #9db4c0;
}

.foot-inner {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    padding-top: 34px;
    padding-bottom: 34px;
}

.footer .brand,
.footer .brand-name {
    color: #fff;
}

.footer .brand-tag {
    color: #7f9aaa;
}

.foot-links {
    display: flex;
    flex-wrap: wrap;
    gap: 18px;
    font-size: .86rem;
}

.foot-links a {
    color: #c2d8e1;
}

.foot-links a:hover {
    color: #fff;
}

.foot-copy {
    width: 100%;
    font-size: .8rem;
    color: #7f9aaa;
}

.mobile-cta {
    display: none;
}

/* Tablet */
@media (min-width: 768px) {
    .trust {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }

    .cards-3 {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

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

    .field-row {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    }

    .screen-body {
        grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr);
    }

    .order {
        border-top: 0;
        border-left: 1px solid rgba(255, 255, 255, .07);
    }

    /* The hero CTA is the page's only action: on tablet/desktop it carries the weight instead of
       sitting as a small pill next to a second choice that no longer exists. The phone keeps the
       full-width button (`@media (max-width: 767.98px) .hero-actions .btn { flex: 1 1 auto }`),
       and only the hero is affected — the lead form and the login modal keep `.btn-lg` as is. */
    .hero-actions .btn {
        min-width: 280px;
        padding: 1.1rem 2.2rem;
        font-size: 1.06rem;
        border-radius: 14px;
    }
}

/* Desktop */
@media (min-width: 992px) {
    .hero-grid {
        grid-template-columns: minmax(0, 1.02fr) minmax(0, .98fr);
    }

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

    .split,
    .launch,
    .demo,
    .faq {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    }

    .launch {
        grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr);
    }

    .demo {
        grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr);
    }
}

@media (max-width: 991.98px) {
    .nav-links,
    .nav-actions {
        display: none;
    }

    .nav-more {
        display: block;
    }

    .screen {
        max-width: 560px;
        margin: 0 auto;
    }
}

@media (max-width: 767.98px) {
    /* The sticky bar covers the last strip of the page, so the dark footer — not the body —
       grows to sit under it: a body padding-bottom paints the body's white background and left
       a white band under the footer whenever the bar was hidden (it is hidden at the top of the
       page, where the hero holds the same CTA). Same rule as the bar itself: reserve only while
       it is on screen (`body.cta-visible`, `body.demo-in-view` steps it aside). */
    body.cta-visible:not(.demo-in-view) .footer {
        padding-bottom: calc(64px + env(safe-area-inset-bottom));
    }

    .nav-inner {
        gap: 12px;
        min-height: 64px;
    }

    .brand-tag {
        display: none;
    }

    /* The footer tagline is the page description, not header noise: keep it on a phone. */
    .footer .brand-tag {
        display: block;
    }

    .hero-actions .btn {
        flex: 1 1 auto;
    }

    /* The hero holds the same CTA, so the bar stays down until the hero actions have scrolled
       off (body.cta-visible, set by public/js/home.js) and slides away again with them. */
    .mobile-cta {
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 40;
        display: block;
        padding: 10px 16px calc(10px + env(safe-area-inset-bottom));
        background: rgba(255, 255, 255, .96);
        backdrop-filter: blur(10px);
        border-top: 1px solid var(--line);
        visibility: hidden;
        transform: translateY(120%);
        transition: transform .22s ease, visibility 0s linear .22s;
    }

    body.cta-visible .mobile-cta {
        visibility: visible;
        transform: translateY(0);
        transition: transform .22s ease;
    }

    .mobile-cta .btn {
        width: 100%;
    }

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

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

    *,
    *::before,
    *::after {
        transition: none !important;
        animation: none !important;
    }
}

/* Enhanced by public/js/home.js: the form itself is on screen, the sticky CTA would cover it. */
body.demo-in-view .mobile-cta {
    display: none;
}