/* ============================================================
   Marketing site (landing, pricing, legal).
   ============================================================ */

.page-marketing { display: flex; flex-direction: column; min-height: 100vh; }
.page-marketing main { flex: 1; }

/* ---- Header ---- */
/* The bar reads the page through frosted glass, and that is the expensive part:
   a backdrop-filter has to re-sample everything painted beneath it on every
   frame in which that content moves. The landing page moves a lot (the hero
   phone floats, the calendar demo drags, 50 loops in all), so the bar is given
   its own compositor layer and its own stacking context. Without them the
   browser promotes and drops the layer as animations start and stop under it,
   and the bar visibly flickers halfway down the page.
   translateZ(0) rather than will-change alone: will-change is a hint the
   browser may ignore once it has many layers, and this one must hold. */
.mk-header {
    position: sticky;
    top: 0;
    /* Above the phone CTA bar, which also frosts its backdrop. */
    z-index: calc(var(--z-sticky) + 1);
    isolation: isolate;
    transform: translateZ(0);
    backface-visibility: hidden;
    background: rgba(249, 249, 251, 0.85);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-bottom: 1px solid var(--c-border);
}

.mk-header__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 64px;
}

.mk-nav { display: flex; align-items: center; gap: var(--sp-3); }

/* ---- Hero ---- */

/* ---- Feature cards ---- */

/* ---- Footer ---- */
.mk-footer {
    border-top: 1px solid var(--c-border);
    padding: var(--sp-6) 0;
    color: var(--c-text-faint);
    font-size: var(--fs-sm);
}

.mk-footer__langs { display: flex; gap: var(--sp-3); }
.mk-footer__langs a {
    color: var(--c-text-faint);
    font-family: var(--font-mono);
    font-size: var(--fs-label);
}
.mk-footer__langs a.is-active { color: var(--c-action); font-weight: 600; }

/* ============================================================
   M9: full landing sections
   ============================================================ */

/* Stats */

/* SMS advantage */

/* Features */
/* padding-block, NOT `padding: x 0`: this element is also a .container, and the
   shorthand would reset its padding-inline to 0, leaving the cards flush to the
   screen edge on any viewport narrower than --container-max. */

/* How it works */

/* Pricing */

/* FAQ */

/* Final CTA */
.mk-cta { padding: var(--sp-9) 0; }
.mk-cta__inner { background: var(--grad-ink); border-radius: var(--r-xl); padding: var(--sp-9) var(--sp-6); text-align: center; color: #fff; }
.mk-cta__inner h2 { color: #fff; font-size: var(--fs-h1); margin-bottom: var(--sp-3); }
.mk-cta__inner p { color: rgba(255,255,255,0.7); font-size: var(--fs-body-lg); margin-bottom: var(--sp-5); }

/* ---- Waiting list (closed beta) ----
   Lives inside .mk-cta__inner, so everything here sits on the dark ink
   gradient - inputs get a translucent light surface rather than the default
   white-on-white card treatment. */
/* 720px, not the 620 the copy blocks want: the row below has to fit two
   inputs plus the button on one line, and Lithuanian labels are long. */
.mk-wl { max-width: 720px; margin-inline: auto; }
.mk-wl__icon {
    width: 60px; height: 60px;
    margin: 0 auto var(--sp-4);
    display: grid; place-items: center;
    border-radius: var(--r-lg);
    background: var(--grad-primary);
    color: #fff;
    box-shadow: var(--shadow-btn);
    animation: pop-in var(--t-slow) var(--ease-out) backwards;
}
.mk-wl__count {
    display: inline-flex; align-items: center; gap: 8px;
    font-size: var(--fs-sm);
    color: rgba(255,255,255,0.75) !important;
    margin-bottom: var(--sp-5) !important;
}
.mk-wl__count-dot {
    width: 7px; height: 7px; border-radius: 50%;
    background: var(--c-success);
    box-shadow: 0 0 0 0 rgba(34, 197, 94, 0.6);
    animation: wl-pulse 2s var(--ease-out) infinite;
}

.mk-wl__form { margin-top: var(--sp-5); }
.mk-wl__row { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr) auto; gap: var(--sp-3); align-items: start; }
@media (max-width: 720px) { .mk-wl__row { grid-template-columns: minmax(0, 1fr); } }
.mk-wl__row .field { margin-bottom: 0; }

.mk-wl .input {
    background: rgba(255,255,255,0.08);
    border-color: rgba(255,255,255,0.18);
    color: #fff;
    transition: background var(--t-fast) var(--ease-out), border-color var(--t-fast) var(--ease-out);
}
.mk-wl .input::placeholder { color: rgba(255,255,255,0.5); }
.mk-wl .input:hover { background: rgba(255,255,255,0.12); }
.mk-wl .input:focus {
    background: rgba(255,255,255,0.14);
    border-color: rgba(255,255,255,0.5);
    box-shadow: 0 0 0 4px rgba(255,255,255,0.12);
}
.mk-wl__submit { display: inline-flex; align-items: center; justify-content: center; gap: 8px; white-space: nowrap; }
.mk-wl__submit svg { transition: transform var(--t-fast) var(--ease-out); }
.mk-wl__submit:hover svg { transform: translateX(3px); }

.mk-wl__note { font-size: var(--fs-sm); color: rgba(255,255,255,0.55) !important; margin: var(--sp-4) 0 0 !important; }

/* Honeypot: off-screen rather than display:none - some bots skip hidden
   fields, and screen readers skip it via aria-hidden on the wrapper. */

/* Flash alerts render on the dark panel here, so soften the light tints. */

/* Beta badge in the hero */
.chip--beta {
    background: var(--grad-primary-soft);
    color: var(--c-primary);
    border: 1px solid rgba(99, 91, 255, 0.25);
    display: inline-flex; align-items: center; gap: 7px;
}
.mk-beta-dot {
    width: 6px; height: 6px; border-radius: 50%;
    background: var(--c-primary);
    animation: wl-pulse 2s var(--ease-out) infinite;
}

@keyframes wl-pulse {
    0%   { box-shadow: 0 0 0 0 rgba(99, 91, 255, 0.5); opacity: 1; }
    70%  { box-shadow: 0 0 0 7px rgba(99, 91, 255, 0); opacity: 0.75; }
    100% { box-shadow: 0 0 0 0 rgba(99, 91, 255, 0); opacity: 1; }
}

/* Footer expanded */
.mk-footer__top { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 2fr); gap: var(--sp-6); padding-bottom: var(--sp-6); }
@media (max-width: 640px) { .mk-footer__top { grid-template-columns: minmax(0, 1fr); } }
.mk-footer__brand .mk-logo { margin-bottom: var(--sp-3); }
.mk-footer__brand p { font-size: var(--fs-sm); max-width: 280px; }
.mk-footer__cols { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--sp-5); }
.mk-footer__col h4 { font-size: var(--fs-sm); color: var(--c-ink); margin-bottom: var(--sp-3); }
.mk-footer__col a { display: block; color: var(--c-text-soft); font-size: var(--fs-sm); padding: 4px 0; }
.mk-footer__bottom { display: flex; justify-content: space-between; align-items: center; gap: var(--sp-4); padding-top: var(--sp-5); border-top: 1px solid var(--c-border); flex-wrap: wrap; }

/* Legal pages */
.mk-legal { max-width: 760px; padding-block: var(--sp-8); }
.mk-legal h1 { font-size: var(--fs-h1); margin-bottom: var(--sp-2); }
.mk-legal__updated { color: var(--c-text-faint); font-size: var(--fs-sm); margin-bottom: var(--sp-6); }
.mk-legal h2 { font-size: var(--fs-h3); margin: var(--sp-6) 0 var(--sp-3); }
.mk-legal p, .mk-legal li { color: var(--c-text-soft); line-height: 1.7; margin-bottom: var(--sp-3); }
.mk-legal ul { padding-left: var(--sp-5); }
.mk-legal a { color: var(--c-action); }
.mk-legal code { font-size: 0.9em; background: var(--c-surface-low); padding: 1px 5px; border-radius: var(--r-sm); }
.mk-legal hr { border: 0; border-top: 1px solid var(--c-border); margin: var(--sp-6) 0; }

/* Callout used for the Beta notice / template instructions at the top of a doc. */
.mk-legal__box {
    background: var(--c-primary-tint);
    border: 1px solid var(--c-border);
    border-radius: var(--r-md);
    padding: var(--sp-4) var(--sp-5);
    margin: var(--sp-5) 0;
}
.mk-legal__box p { color: var(--c-ink); margin-bottom: 0; }

/* Legal documents: the Terms, the Privacy Policy and the DPA
   (marketing/legal-document.php). The key box is the device that specifically
   brings unusual terms to the reader's attention, so it is never collapsed
   and always prints. Clause numbers are links to their own anchor, so a
   clause can be quoted by URL (/taisykles#p2-1). */
.mk-doc__meta { display: flex; flex-wrap: wrap; gap: var(--sp-1) var(--sp-4); margin-bottom: var(--sp-2); }
.mk-doc time { white-space: nowrap; }
.mk-doc__prev { font-size: var(--fs-sm); color: var(--c-text-faint); margin-bottom: var(--sp-2); }
.mk-doc__tools { margin-bottom: var(--sp-4); }
.mk-doc__key { border-left: 4px solid var(--c-action); }
.mk-doc__key h2 { margin-top: 0; }
.mk-doc__key li { color: var(--c-ink); }
.mk-doc__key ul { margin-bottom: 0; }
.mk-doc__toc { margin: var(--sp-6) 0; padding: var(--sp-4) var(--sp-5); border: 1px solid var(--c-border); border-radius: var(--r-md); }
.mk-doc__toc h2 { margin-top: 0; }
.mk-doc__toc ol { list-style: none; padding-left: 0; margin: 0; }
.mk-doc__toc li { margin-bottom: var(--sp-1); }
.mk-doc section { scroll-margin-top: var(--sp-8); }
.mk-doc__clause { scroll-margin-top: var(--sp-8); }
.mk-doc__clause:target { background: var(--c-primary-tint); border-radius: var(--r-sm); }
.mk-doc__num { font-weight: 600; margin-right: var(--sp-1); font-variant-numeric: tabular-nums; }
.mk-legal .mk-doc__num { color: var(--c-ink); text-decoration: none; }
.mk-doc__party { font-style: normal; margin-top: var(--sp-8); padding-top: var(--sp-5); border-top: 1px solid var(--c-border); color: var(--c-text-soft); line-height: 1.7; }
.mk-legal__ref { text-decoration: underline; text-underline-offset: 2px; }
.mk-doc__archive { padding-bottom: 0; }
.mk-doc__archive + .mk-legal { padding-top: 0; }

/* Print: the Terms and the DPA are a contract, and a contract has to be
   storable and reproducible. Only the document itself goes on paper. */
@media print {
    .mk-header, .mk-footer, .mk-sticky, .ck, .mk-doc__toc, .mk-doc__tools { display: none !important; }
    .mk-legal { max-width: none; padding: 0; }
    .mk-legal p, .mk-legal li { color: #000; }
    .mk-legal a { color: #000; }
    /* A labelled reference prints its address; a bare address already shows it. */
    .mk-legal a.mk-legal__ref[href^="http"]::after { content: " (" attr(href) ")"; font-size: 0.85em; }
    .mk-doc h2 { break-after: avoid; }
    .mk-doc__clause, .mk-doc__key { break-inside: avoid; }
    .mk-doc__key { background: none; border: 1px solid #000; }
}

.mk-nav__link { color: var(--c-text-soft); font-size: var(--fs-sm); font-weight: 500; }
.mk-nav__link:hover { color: var(--c-ink); text-decoration: none; }
@media (max-width: 640px) { .mk-nav__link { display: none; } }

/* ── Business categories (self-identification) ───────────────────────────── */

/* ── Automation band ─────────────────────────────────────────────────────── */

/* ============================================================
   2026 landing redesign. Conversion-first, visual-first: a live product
   demo (animated drag-and-drop calendar), a realistic phone mockup, honest
   social proof and a problem->solution infographic. Everything below is
   self-contained (no external assets) and respects reduced-motion.
   ============================================================ */

/* ---- Scroll reveal + section utilities ---- */
/* Gated on html.js: if JS is off or fails, .reveal content stays fully visible.
   The page is never allowed to depend on JS to be readable. */
.js .reveal { opacity: 0; transform: translateY(18px); transition: opacity .7s var(--ease-out), transform .7s var(--ease-out); }
.js .reveal.is-in { opacity: 1; transform: none; }
/* No will-change here on purpose: the home page has 80 .reveal elements, and
   hinting all of them at once asks the compositor for 80 layers before the
   visitor has scrolled at all. The transition promotes what it needs, when it
   needs it. */

/* Off-screen sections stop animating. marketing.js marks a section idle once it
   leaves the viewport; nothing visible changes, but the compositor stops
   repainting a dozen loops the visitor cannot see, and the frosted header stops
   re-sampling them. The !important is unavoidable: every loop is declared with
   the `animation` shorthand, which resets play-state to running. */
.anim-idle,
.anim-idle *,
.anim-idle *::before,
.anim-idle *::after { animation-play-state: paused !important; }
.reveal[data-reveal-delay="1"] { transition-delay: .07s; }
.reveal[data-reveal-delay="2"] { transition-delay: .14s; }
.reveal[data-reveal-delay="3"] { transition-delay: .21s; }
.reveal[data-reveal-delay="4"] { transition-delay: .28s; }

.sec-title { font-size: var(--fs-h1); letter-spacing: -0.02em; line-height: 1.1; margin: 0 0 var(--sp-3); }
.sec-lead { color: var(--c-text-soft); font-size: var(--fs-body-lg); line-height: 1.6; margin: 0 0 var(--sp-5); max-width: 46ch; }
.center { text-align: center; margin-inline: auto; }

.ticks { list-style: none; padding: 0; margin: var(--sp-4) 0 0; display: flex; flex-direction: column; gap: var(--sp-3); }
.ticks li { position: relative; padding-left: 30px; color: var(--c-ink); font-weight: 500; }
.ticks li::before {
    content: ""; position: absolute; left: 0; top: 2px; width: 20px; height: 20px; border-radius: 50%;
    background: var(--c-success-tint) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%230a8754' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6L9 17l-5-5'/%3E%3C/svg%3E") center/12px no-repeat;
}

/* ---- Hero ---- */
.hero { position: relative; overflow: hidden; padding: clamp(var(--sp-7), 6vw, var(--sp-9)) 0 clamp(var(--sp-8), 7vw, var(--sp-10)); }
.hero__glow {
    position: absolute; inset: -30% -10% auto -10%; height: 620px; z-index: 0; pointer-events: none;
    background:
        radial-gradient(45% 55% at 78% 25%, rgba(168, 85, 247, .18), transparent 70%),
        radial-gradient(50% 60% at 22% 12%, rgba(99, 91, 255, .20), transparent 70%);
    filter: blur(8px);
}
.hero__grid {
    position: relative; z-index: 1;
    display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); gap: clamp(var(--sp-6), 5vw, var(--sp-9)); align-items: center;
}
.hero__copy { max-width: 34rem; }
.hero__title {
    font-size: clamp(2.4rem, 5.4vw, 3.9rem); line-height: 1.04; letter-spacing: -0.03em;
    margin: var(--sp-4) 0 var(--sp-4); font-weight: 800;
}
.hero__accent { position: relative; color: var(--c-action); white-space: nowrap; }
.hero__accent::after {
    content: ""; position: absolute; left: 0; right: 0; bottom: .04em; height: .34em; z-index: -1;
    background: linear-gradient(90deg, rgba(99,91,255,.22), rgba(168,85,247,.22)); border-radius: 4px;
}
.hero__sub { font-size: var(--fs-body-lg); color: var(--c-text-soft); line-height: 1.6; margin: 0 0 var(--sp-5); }
.hero__cta { display: flex; flex-wrap: wrap; gap: var(--sp-3); }
.hero__trust { margin-top: var(--sp-4); color: var(--c-text-faint); font-size: var(--fs-sm); }

/* ---- Hero phone mockup ---- */
.hero__device { position: relative; display: flex; justify-content: center; }
.phone {
    position: relative; width: min(300px, 78vw); aspect-ratio: 300 / 610;
    background: linear-gradient(145deg, #23252c, #0c0d10); border-radius: 46px;
    padding: 11px; box-shadow: 0 40px 80px -24px rgba(10, 37, 64, .5), 0 6px 16px rgba(10,37,64,.18);
    animation: phone-float 6s var(--ease-out) infinite;
}
@keyframes phone-float { 0%,100% { transform: translateY(0) rotate(-1deg); } 50% { transform: translateY(-14px) rotate(-1deg); } }
.phone__side { position: absolute; width: 3px; background: #34363d; border-radius: 3px; }
.phone__side--l { left: -3px; }
.phone__side--r { right: -3px; }
.phone__side--l, .phone__side--r { top: 130px; height: 46px; box-shadow: 0 90px 0 #34363d, 0 150px 0 #34363d; }
.phone__screen {
    position: relative; width: 100%; height: 100%; border-radius: 36px; overflow: hidden;
    background: var(--c-bg);
}
.phone__island {
    position: absolute; top: 12px; left: 50%; transform: translateX(-50%); z-index: 3;
    width: 92px; height: 26px; background: #08090b; border-radius: 14px;
}
.ph-app { display: flex; flex-direction: column; height: 100%; }
.ph-app__bar {
    padding: 38px var(--sp-4) var(--sp-3); background: var(--grad-primary); color: #fff;
    display: flex; align-items: center; justify-content: space-between; gap: var(--sp-2);
}
.ph-app__brand { font-weight: 700; font-size: var(--fs-sm); }
.ph-app__loc { display: inline-flex; align-items: center; gap: 4px; font-size: 11px; font-weight: 600; opacity: .82; }

/* Two cross-fading scenes share one stage; only one is visible at a time,
   so the mockup shows a coherent screen (pick a time, then the confirmation)
   instead of a booking button and a "confirmed" toast contradicting at once. */
.ph-app__stage { position: relative; flex: 1; }
.ph-scene {
    position: absolute; inset: 0; padding: var(--sp-4);
    display: flex; flex-direction: column; gap: var(--sp-3);
}
.ph-scene__label { font-size: 11px; font-weight: 700; color: var(--c-text-faint); text-transform: uppercase; letter-spacing: .05em; }
.ph-days { display: flex; gap: var(--sp-2); }
.ph-day { flex: 1; text-align: center; padding: 7px 0; border-radius: var(--r-sm); border: 1px solid var(--c-border); background: var(--c-surface); font-size: 12px; font-weight: 600; color: var(--c-text-soft); }
.ph-day--on { border-color: var(--c-action); color: var(--c-action); background: var(--c-primary-tint); }
.ph-slot {
    text-align: center; padding: 9px 0; border-radius: var(--r-sm); border: 1px solid var(--c-border);
    background: var(--c-surface); font-size: 12px; font-weight: 600; color: var(--c-text-soft);
}
.ph-slot--pick { border-color: var(--c-action); color: var(--c-action); background: var(--c-primary-tint); position: relative; }
.ph-slot--pick::after { content: ""; position: absolute; inset: -3px; border: 2px solid var(--c-action); border-radius: 10px; opacity: 0; animation: slot-ping 4s var(--ease-out) infinite; }
@keyframes slot-ping { 0%, 22% { opacity: 0; transform: scale(1); } 28% { opacity: .6; } 40%, 100% { opacity: 0; transform: scale(1.08); } }
.ph-cta {
    margin-top: auto; text-align: center; padding: 11px; border-radius: var(--r-md);
    background: var(--grad-primary); color: #fff; font-weight: 600; font-size: 13px; box-shadow: var(--shadow-btn);
}

.hero__float {
    position: absolute; display: flex; align-items: center; gap: 7px;
    background: var(--glass-bg); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
    border: 1px solid var(--c-border); border-radius: var(--r-full); padding: 8px 14px;
    font-size: 12px; font-weight: 600; box-shadow: var(--shadow-lift);
}

/* ---- Social proof ---- */
/* ---- Live numbers ----
   One instrument panel, not four numbers floating on a white strip: the band
   itself is transparent and the panel is the card, so the figures read as
   something lifted out of the product rather than a statistics banner. Same
   surface, border, radius and shadow as every other card on the page, the
   heading face on the numerals, and the page's own tinted chip as the eyebrow.
   Shared by the home page and the eighteen industry pages (marketing/proof.php). */
.proof { position: relative; overflow: hidden; padding: clamp(var(--sp-6), 5vw, var(--sp-8)) 0; }
.proof__bloom {
    position: absolute; left: 50%; top: 50%; z-index: 0; pointer-events: none;
    width: min(880px, 92%); height: 340px; transform: translate(-50%, -50%);
    background: radial-gradient(50% 50% at 50% 50%, color-mix(in srgb, var(--c-action) 10%, transparent), transparent 70%);
}
.proof > .container { position: relative; z-index: 1; }
.proof__head { text-align: center; margin: 0 0 var(--sp-5); }

.proof__panel {
    max-width: 1000px; margin-inline: auto;
    background: var(--c-surface);
    border: 1px solid var(--c-border);
    border-radius: var(--r-xl);
    box-shadow: var(--shadow-card);
    overflow: hidden;
}
/* The 1px gap IS the rule between cells: it survives any column count, so the
   phone layout needs no second set of border declarations. */
.proof__grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 1px;
    background: var(--c-border);
}
.proof__item {
    background: var(--c-surface);
    text-align: center;
    padding: clamp(var(--sp-4), 3vw, var(--sp-6)) var(--sp-3);
}
.proof__num {
    font-family: var(--font-heading);
    font-size: clamp(1.9rem, 4.4vw, 2.9rem);
    font-weight: 800;
    line-height: 1.05;
    letter-spacing: -0.03em;
    color: var(--c-ink);
    font-variant-numeric: tabular-nums;
}
.proof__label {
    color: var(--c-text-soft); font-size: var(--fs-sm); margin-top: 6px;
    text-wrap: balance;
}
.proof__ic { display: inline-flex; margin-bottom: var(--sp-2); color: var(--c-action); opacity: .7; }
.proof__rate {
    margin: 0;
    padding: var(--sp-3) var(--sp-5);
    text-align: center;
    border-top: 1px solid var(--c-border);
    background: color-mix(in srgb, var(--c-success) 5%, var(--c-surface));
    color: var(--c-text-soft);
    font-size: var(--fs-sm);
}
.proof__rate strong { color: var(--c-success); font-size: 1.3em; font-family: var(--font-heading); font-variant-numeric: tabular-nums; }
.proof__sub { text-align: center; margin: var(--sp-3) 0 0; font-size: var(--fs-sm); color: var(--c-text-faint); }
@media (max-width: 720px) { .proof__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* ---- Calendar demo ---- */
.cal { padding: clamp(var(--sp-8), 7vw, var(--sp-10)) 0; }
.cal__grid { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: clamp(var(--sp-6), 5vw, var(--sp-8)); align-items: center; }
.cal__demo { position: relative; }
.cal__hint { display: block; text-align: center; margin-top: var(--sp-3); font-size: var(--fs-sm); color: var(--c-text-faint); }

/* Browser window frame */
.win { border-radius: var(--r-lg); overflow: hidden; background: var(--c-surface); border: 1px solid var(--c-border); box-shadow: 0 30px 60px -24px rgba(10,37,64,.35), var(--shadow-card); }
.win__bar { display: flex; align-items: center; gap: 7px; padding: 11px 14px; background: var(--c-surface-low); border-bottom: 1px solid var(--c-border); }
.win__dot { width: 11px; height: 11px; border-radius: 50%; background: var(--c-border-strong); }
.win__dot:nth-child(1) { background: #ff5f57; } .win__dot:nth-child(2) { background: #febc2e; } .win__dot:nth-child(3) { background: #28c840; }
.win__addr { margin-left: var(--sp-3); font-size: 12px; color: var(--c-text-faint); background: var(--c-surface); border-radius: var(--r-full); padding: 3px 12px; }

.cal-board { position: relative; padding: var(--sp-3); }
.cal-board__head { display: grid; grid-template-columns: 42px repeat(3, 1fr); gap: 6px; margin-bottom: 8px; }
.cal-col-h { display: flex; align-items: center; gap: 6px; font-size: 11px; font-weight: 600; color: var(--c-text-soft); }
.cal-av { width: 20px; height: 20px; border-radius: 50%; display: inline-grid; place-items: center; font-size: 10px; color: #fff; font-weight: 700; }
.cal-av--1 { background: var(--staff-1); } .cal-av--2 { background: var(--staff-3); } .cal-av--3 { background: var(--staff-6); }
.cal-board__grid { display: grid; grid-template-columns: 42px repeat(3, 1fr); gap: 6px; height: 260px; }

/* ---- Problem -> Solution ---- */

/* ---- Categories ---- */
.cat-chip {
    display: inline-flex; align-items: center; gap: 8px; padding: 9px 16px; border-radius: var(--r-full);
    background: var(--c-surface); border: 1px solid var(--c-border); font-weight: 500; font-size: var(--fs-sm);
    transition: transform var(--t-fast) var(--ease-out), border-color var(--t-fast), box-shadow var(--t-fast);
}
.cat-chip:hover { transform: translateY(-3px); border-color: var(--c-action); box-shadow: var(--shadow-card); }
.cat-chip__emoji { font-size: 16px; }

/* ---- Local advantage ---- */

/* ---- How it works ---- */
.how { padding: clamp(var(--sp-7), 6vw, var(--sp-9)) 0; background: var(--c-surface); border-block: 1px solid var(--c-border); }
.how__steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--sp-6); margin-top: var(--sp-6); counter-reset: step; }
.how__step { position: relative; padding-top: var(--sp-5); }
.how__num { position: absolute; top: 0; left: 0; width: 40px; height: 40px; border-radius: var(--r-md); display: grid; place-items: center; font-weight: 800; color: #fff; background: var(--grad-primary); box-shadow: var(--shadow-btn); }
.how__step h3 { margin: var(--sp-4) 0 var(--sp-2); font-size: var(--fs-h3); }
.how__step p { color: var(--c-text-soft); line-height: 1.6; }
@media (max-width: 720px) { .how__steps { grid-template-columns: minmax(0,1fr); gap: var(--sp-5); } }

/* ---- Pricing ---- */
.pricing { padding: clamp(var(--sp-8), 7vw, var(--sp-10)) 0; }
.plans { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--sp-4); max-width: 1080px; margin: var(--sp-6) auto 0; align-items: start; }
.plan { position: relative; }
.plan__name { font-size: var(--fs-h3); margin-bottom: var(--sp-2); }
.plan__price { font-size: 2.4rem; font-weight: 800; letter-spacing: -0.02em; }
.plan__per { font-size: var(--fs-sm); font-weight: 500; color: var(--c-text-soft); margin: 4px 0 0; }
.plan .btn { margin: var(--sp-4) 0; }
.plan__features { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: var(--sp-3); }
.plan__features li { display: flex; align-items: flex-start; gap: var(--sp-2); font-size: var(--fs-sm); }
.plan__features svg { flex: 0 0 auto; color: var(--c-success); margin-top: 2px; }
.plan--premium { border: 2px solid var(--c-action); box-shadow: var(--shadow-lift); }
.plan--vip { border: 2px solid #c8a24a; }
.plan__badge { position: absolute; top: -12px; right: var(--sp-4); background: var(--grad-primary); color: #fff; font-size: 11px; font-weight: 700; letter-spacing: .05em; padding: 5px 12px; border-radius: var(--r-full); box-shadow: var(--shadow-btn); }
.plan__badge--vip { background: linear-gradient(135deg, #d9b24a, #b8862e); }
@media (max-width: 900px) { .plans { grid-template-columns: minmax(0,1fr); max-width: 420px; } }

/* ---- FAQ ---- */
.faq { padding-block: clamp(var(--sp-7), 6vw, var(--sp-9)); max-width: 720px; }
.faq__list { display: flex; flex-direction: column; gap: var(--sp-2); margin-top: var(--sp-6); }
.faq__item { background: var(--c-surface); border: 1px solid var(--c-border); border-radius: var(--r-md); padding: 0 var(--sp-4); }
.faq__item summary { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); cursor: pointer; padding: var(--sp-4) 0; font-weight: 600; list-style: none; }
.faq__item summary::-webkit-details-marker { display: none; }
.faq__item summary svg { flex: 0 0 auto; transition: transform var(--t-fast); color: var(--c-text-faint); }
.faq__item[open] summary svg { transform: rotate(180deg); }
.faq__item p { color: var(--c-text-soft); line-height: 1.7; margin: 0 0 var(--sp-4); }

/* ---- Hero + section responsive ---- */
@media (max-width: 900px) {
    .hero__grid, .cal__grid { grid-template-columns: minmax(0, 1fr); }
    .cal__demo { order: -1; }
    .hero__device { margin-top: var(--sp-5); }
    .sec-lead:not(.center) { margin-inline: 0; }
    .cal__grid .sec-lead { max-width: none; }
}
@media (max-width: 900px) { .hero__copy { max-width: none; text-align: center; margin-inline: auto; } .hero__cta { justify-content: center; } .sec-title:not(.center) { text-align: left; } }

/* ---- Reduced motion: kill the loops, keep it legible ---- */
@media (prefers-reduced-motion: reduce) {
    .js .reveal { opacity: 1; transform: none; transition: none; }
    .phone, .hero__float, .ph-toast, .ph-slot--pick::after,
    .ph-scene--book, .ph-scene--done, .ph-done__check,
    .cal-appt--c, .cal-drop, .cal-cursor { animation: none !important; }
    /* With motion off, show only the coherent "pick a time" screen. */
}

/* ================= Mobile + client-account mockups ================= */
.phone--still { animation: none; width: min(258px, 72vw); }

.ticks--lg li { font-size: 1rem; margin-bottom: var(--sp-3); }
.ticks--inline { display: flex; flex-direction: row; flex-wrap: wrap; gap: var(--sp-2) var(--sp-5); }

/* Phone: staff calendar reproduction */

/* Phone: client account (/my) reproduction */

/* Client account callout */

/* Infographic: how DEK cuts no-shows */

/* ---- Category landers (/verslui/*) ---- */
/* The hero has no phone mockup here, so the copy centres itself instead of
   sharing a two-column grid. Everything else reuses home-page sections. */
/* ---- Industry pages (/verslui/*) ----
   The hero carries the vertical's own words on the left and, on the right, the
   dictionary that vertical actually gets after signing up: its word for a staff
   member, a service and a client, each beside the example DEK puts in that
   field, plus the extra client-card fields. Nothing on that card is written for
   marketing; it is config/categories.php, rendered. */
.lander-hero__grid {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
    gap: clamp(var(--sp-6), 5vw, var(--sp-8));
    align-items: center;
}
.lander-hero__copy { max-width: 36rem; }
.lander-hero__copy .chip { margin-bottom: var(--sp-4); }

.lander-vocab {
    background: var(--c-surface);
    border: 1px solid var(--c-border);
    border-radius: var(--r-xl);
    box-shadow: var(--shadow-card);
    padding: clamp(var(--sp-4), 3vw, var(--sp-5));
}
.lander-vocab__head,
.lander-vocab__sub {
    margin: 0 0 var(--sp-3);
    font-family: var(--font-mono);
    font-size: var(--fs-label);
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--c-text-faint);
}
.lander-vocab__sub { margin-top: var(--sp-4); }
.lander-vocab__list { margin: 0; display: flex; flex-direction: column; gap: 1px; background: var(--c-border); border-radius: var(--r-md); overflow: hidden; }
.lander-vocab__row { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: var(--sp-2) var(--sp-3); background: var(--c-surface); padding: var(--sp-3) var(--sp-4); }
.lander-vocab__row dt { font-family: var(--font-heading); font-weight: 700; color: var(--c-ink); }
.lander-vocab__row dd { margin: 0; color: var(--c-text-soft); font-size: var(--fs-sm); text-align: right; }
.lander-vocab__fields { display: flex; flex-wrap: wrap; gap: var(--sp-2); }
.lander-vocab__note { margin: var(--sp-4) 0 0; color: var(--c-text-faint); font-size: var(--fs-sm); line-height: 1.5; }

.lander-ticks { padding: clamp(var(--sp-7), 6vw, var(--sp-9)) 0; background: var(--c-surface); border-block: 1px solid var(--c-border); }
.lander-b { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-4); margin-top: var(--sp-6); }
.lander-b__card {
    display: flex;
    align-items: flex-start;
    gap: var(--sp-4);
    background: var(--c-bg);
    border: 1px solid var(--c-border);
    border-radius: var(--r-lg);
    padding: var(--sp-4) var(--sp-5);
}
.lander-b__card p { margin: 0; color: var(--c-ink); font-weight: 500; line-height: 1.5; }

/* The shared "what comes with it" band reuses the trust card family. */
/* On the home page .trust runs straight into .ind on the same tint, so it can
   tuck its bottom in. Here the band ends, so it needs a real bottom edge.
   Both classes: .trust's `padding` shorthand is declared later in this file. */
.trust.lander-inc { padding-bottom: clamp(var(--sp-8), 7vw, var(--sp-10)); }
.lander-inc .pricing__inc { margin-bottom: var(--sp-6); }

.lander-pricing { padding: clamp(var(--sp-7), 6vw, var(--sp-9)) 0; text-align: center; }
/* Two classes, same specificity, and .ind's `padding` shorthand is declared
   later, so this needs both classes to keep its top padding. */
.ind.lander-others { padding-top: clamp(var(--sp-7), 6vw, var(--sp-9)); }

@media (max-width: 900px) {
    .lander-hero__grid { grid-template-columns: minmax(0, 1fr); }
    /* One column: the copy centres the way .hero__copy does on the home page.
       Without this the shared .hero__cta rule below still centres the button
       column while the headline stays flush left. */
    .lander-hero__copy { max-width: none; text-align: center; margin-inline: auto; }
    .lander-hero__copy .hero__cta { justify-content: center; }
}
@media (max-width: 640px) {
    .lander-b { grid-template-columns: minmax(0, 1fr); }
    .lander-vocab__row { flex-direction: column; align-items: flex-start; }
    .lander-vocab__row dd { text-align: left; }
}

/* Demo admin/staff sign-in links under the hero CTAs. */


/* ==== layout ==== */
/* Shared marketing layout additions: header language pills, the phone
   <details> menu and the phone-only sticky CTA bar. The kept .mk-header,
   .mk-header__inner, .mk-nav, .mk-nav__link and .mk-footer* rules stay in the
   old sheet; only the nav tweaks below touch them. */

/* ---- Header nav tweaks ---- */
.mk-nav { gap: var(--sp-2); }
.mk-nav__link { padding: 6px 8px; border-radius: var(--r-sm); }
.mk-nav__link:hover { background: var(--c-surface-low); }
.mk-nav__login { margin-left: var(--sp-1); }
.mk-nav__cta { flex: 0 0 auto; }
@media (max-width: 640px) {
    .mk-nav { gap: 6px; }
    .mk-nav__login { display: none; }
    .mk-nav .btn--sm { padding: 8px 10px; font-size: var(--fs-label); }
}
@media (max-width: 400px) {
    /* Logo, switcher, primary and menu share one 64px row on a 360px
       phone: the primary gives up a little padding and a point of type. */
    .mk-nav .btn--sm { padding: 8px; font-size: 0.75rem; }
}
@media (max-width: 340px) {
    /* A 320px phone shows the logo mark alone. The name stays in the link
       for assistive tech; only its pixels go. */
    .mk-header .mk-logo__name {
        position: absolute;
        width: 1px; height: 1px;
        margin: -1px; padding: 0;
        overflow: hidden;
        clip: rect(0 0 0 0);
        white-space: nowrap;
        border: 0;
    }
}

/* ---- Header language switcher ---- */
.mk-langs {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    margin: 0 var(--sp-1);
    padding: 2px;
    border: 1px solid var(--c-border-strong);
    border-radius: var(--r-full);
    background: var(--c-surface);
}
.mk-langs__item {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 32px;
    height: 28px;
    padding: 0 6px;
    border-radius: var(--r-full);
    font-family: var(--font-mono);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.04em;
    color: var(--c-text-soft);
    text-decoration: none;
    transition: background var(--t-fast) var(--ease-out), color var(--t-fast) var(--ease-out);
}
.mk-langs__item:hover { color: var(--c-ink); background: var(--c-surface-low); text-decoration: none; }
.mk-langs__item.is-active { color: var(--c-action); background: color-mix(in srgb, var(--c-action) 12%, transparent); }
.mk-langs__item:focus-visible { box-shadow: var(--focus-ring); border-radius: var(--r-full); }
@media (max-width: 640px) {
    /* Four pills, the primary and the menu do not share a phone's row with
       the logo (they need ~380px of 343), so the pills give way to the
       folded switcher below. */
    .mk-nav > .mk-langs { display: none; }
}

/* ---- Phone language switcher (<details>) ---- */
/* In place of the pills at <= 640px: the page's own language behind a globe
   on the bar; the four languages by their own names in a panel under it,
   the same links as the pills. A native <details>, so it opens without JS;
   marketing.js closes it on a choice, Escape, a tap outside or the menu. */
.mk-lang { display: none; }
.mk-lang__summary {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    height: 36px;
    padding: 0 10px 0 9px;
    border: 1px solid var(--c-border-strong);
    border-radius: var(--r-full);
    background: var(--c-surface);
    color: var(--c-text-soft);
    font-family: var(--font-mono);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.04em;
    line-height: 1;
    cursor: pointer;
    list-style: none;
    -webkit-tap-highlight-color: transparent;
}
.mk-lang__summary::-webkit-details-marker { display: none; }
.mk-lang__summary::marker { content: ''; }
.mk-lang__summary:hover { color: var(--c-ink); background: var(--c-surface-low); }
.mk-lang__summary:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.mk-lang[open] .mk-lang__summary { color: var(--c-action); border-color: var(--c-action); }
.mk-lang__globe { flex: 0 0 auto; }
.mk-lang__code { display: inline-block; }
.mk-lang__panel {
    /* The header is the containing block (sticky and transformed), so the
       panel hangs from the bar's bottom edge like the menu's, at the gutter. */
    position: absolute;
    top: 100%;
    right: 16px;
    min-width: 200px;
    padding: var(--sp-1);
    background: var(--c-surface);
    border: 1px solid var(--c-border);
    border-radius: var(--r-md);
    box-shadow: var(--shadow-lift);
    transform-origin: top right;
    animation: mk-menu-in var(--t-med) var(--ease-out);
}
.mk-lang__item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--sp-3);
    min-height: 44px;
    padding: 0 var(--sp-3);
    border-radius: var(--r-sm);
    color: var(--c-ink);
    font-weight: 600;
    text-decoration: none;
}
.mk-lang__item:hover { background: var(--c-surface-low); text-decoration: none; }
.mk-lang__item:focus-visible { box-shadow: var(--focus-ring); }
.mk-lang__item.is-active { color: var(--c-action); background: color-mix(in srgb, var(--c-action) 10%, transparent); }
.mk-lang__name { min-width: 0; }
.mk-lang__tag {
    font-family: var(--font-mono);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.04em;
    color: var(--c-text-faint);
}
.mk-lang__item.is-active .mk-lang__tag { color: inherit; }
@media (max-width: 640px) {
    .mk-lang { display: block; }
}

/* ---- Phone menu (<details>) ---- */
.mk-menu { display: none; }
.mk-menu__summary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border: 1px solid var(--c-border-strong);
    border-radius: var(--r-sm);
    background: var(--c-surface);
    color: var(--c-ink);
    cursor: pointer;
    list-style: none;
}
.mk-menu__summary::-webkit-details-marker { display: none; }
.mk-menu__summary::marker { content: ''; }
.mk-menu__summary:hover { background: var(--c-surface-low); }
.mk-menu__summary:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.mk-menu__ic { flex: 0 0 auto; }
.mk-menu__ic--close { display: none; }
.mk-menu[open] .mk-menu__ic--open { display: none; }
.mk-menu[open] .mk-menu__ic--close { display: block; }
.mk-menu__panel {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    display: flex;
    flex-direction: column;
    gap: var(--sp-1);
    padding: var(--sp-3) 16px var(--sp-4);
    background: var(--c-surface);
    border-bottom: 1px solid var(--c-border);
    box-shadow: var(--shadow-lift);
    transform-origin: top center;
    animation: mk-menu-in var(--t-med) var(--ease-out);
}
.mk-menu__link {
    display: flex;
    align-items: center;
    min-height: 44px;
    padding: 0 var(--sp-3);
    border-radius: var(--r-sm);
    color: var(--c-ink);
    font-weight: 600;
    text-decoration: none;
}
.mk-menu__link:hover { background: var(--c-surface-low); text-decoration: none; }
.mk-menu__link:focus-visible { box-shadow: var(--focus-ring); }
@keyframes mk-menu-in {
    from { opacity: 0; transform: translateY(-6px); }
    to { opacity: 1; transform: translateY(0); }
}
@media (max-width: 640px) {
    .mk-menu { display: block; }
    .mk-menu__summary { width: 36px; height: 36px; }
}

/* ---- Sticky CTA bar (phones and small tablets; JS toggles .is-on) ---- */
.mk-sticky {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: var(--z-sticky);
    padding: var(--sp-3) 16px calc(var(--sp-3) + env(safe-area-inset-bottom, 0px));
    background: var(--glass-bg);
    backdrop-filter: blur(var(--glass-blur));
    -webkit-backdrop-filter: blur(var(--glass-blur));
    border-top: 1px solid var(--c-border);
    box-shadow: var(--shadow-lift);
    transform: translateY(100%);
    visibility: hidden;
    transition: transform var(--t-med) var(--ease-out), visibility 0s linear var(--t-med);
}
.mk-sticky.is-on:not(.is-blocked) {
    transform: translateY(0);
    visibility: visible;
    transition: transform var(--t-med) var(--ease-out), visibility 0s;
}
.mk-sticky__inner {
    display: flex;
    gap: var(--sp-2);
    max-width: 480px;
    margin-inline: auto;
}
.mk-sticky__cta { flex: 1 1 auto; min-height: 44px; }
.mk-sticky__demo { flex: 0 0 auto; min-height: 44px; }
@media (min-width: 900px) {
    .mk-sticky { display: none; }
}

/* ---- Reduced motion: no slide, no fade, final states only ---- */
@media (prefers-reduced-motion: reduce) {
    .mk-menu__panel { animation: none; }
    .mk-lang__panel { animation: none; }
    .mk-sticky { transition: none; }
    .mk-sticky.is-on:not(.is-blocked) { transition: none; }
    .mk-langs__item { transition: none; }
}


/* ==== hero ==== */
/* Hero copy tweaks + the hero stage (browser window with the day board, the
   client's phone in front, two glass chips) + the proof band's sub line.
   Kept families reused as-is: .hero*, .win*, .cal-board*, .cal-av, .cal-col-h,
   .phone*, .ph-app*, .ph-scene, .ph-days/.ph-day, .ph-slot, .ph-cta, .proof*.
   Service colours: the product's real calendar palette. */
.hero__stage {
    --mk-svc-indigo: #635bff;
    --mk-svc-green: #33b679;
    --mk-svc-orange: #f09300;
    --mk-svc-teal: var(--staff-8);
    --mk-flag-yellow: #f6bf26;
    --mk-flag-green: #0b8043;
}

/* ---- Copy column ---- */
.hero__btn svg { flex: none; }
.hero__ticks { flex-direction: row; margin-top: var(--sp-5); gap: var(--sp-2) var(--sp-4); }
.hero__ticks li { font-size: var(--fs-sm); padding-left: 26px; }
.hero__ticks li::before { width: 18px; height: 18px; top: 1px; background-size: 11px; }

/* ---- Stage geometry ----
   The window takes the stage width minus --hv-gap; the phone sits at the
   lower-right corner, overlapping the window by ~35% of its own width and
   hanging --hv-hang below it (the stage reserves that as padding). */
.hero__stage {
    --hv-phone-w: 200px;
    --hv-hang: 120px;
    --hv-gap: 132px;
    position: relative;
    display: block;
    width: 100%;
    padding-bottom: var(--hv-hang);
}
.hv { position: relative; }
.hv-win { position: relative; z-index: 1; width: calc(100% - var(--hv-gap)); }
.hv-phone { position: absolute; z-index: 2; right: -22px; bottom: calc(-1 * var(--hv-hang)); width: var(--hv-phone-w); }

/* ---- Window: day board ---- */
.cal-board--hero { padding: 10px 12px 12px; background: var(--c-bg); }
.hv-bar { display: flex; align-items: center; gap: 6px; height: 26px; margin-bottom: 10px; min-width: 0; }
.hv-pill {
    flex: none; display: inline-flex; align-items: center; gap: 5px; height: 24px; padding: 0 8px;
    border-radius: var(--r-full); border: 1px solid var(--c-border-strong); background: var(--c-surface);
    font-size: 10.5px; font-weight: 600; color: var(--c-text-soft); white-space: nowrap;
}
.hv-pill--today { color: var(--c-action); background: var(--c-primary-tint); border-color: color-mix(in srgb, var(--c-action) 30%, transparent); }
.hv-pill--staff { flex: 0 1 auto; min-width: 0; margin-left: auto; }
.hv-pill--staff svg { flex: none; }
.hv-pill__txt { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.hv-seg { flex: none; display: inline-flex; height: 24px; padding: 2px; border-radius: 8px; background: var(--c-surface-mid); }
.hv-seg__opt { display: inline-flex; align-items: center; padding: 0 7px; border-radius: 6px; font-size: 10.5px; font-weight: 600; color: var(--c-text-soft); white-space: nowrap; }
.hv-seg__opt.is-on { background: var(--c-surface); color: var(--c-ink); box-shadow: var(--shadow-card); }

.hv-head { grid-template-columns: 42px repeat(3, minmax(0, 1fr)); height: 22px; align-items: center; }
.hv-head .cal-col-h { min-width: 0; overflow: hidden; white-space: nowrap; }
.hv-head .cal-av { flex: none; }

.hv-grid { position: relative; height: 280px; grid-template-columns: 42px repeat(3, minmax(0, 1fr)); gap: 6px; }
.hv-times { position: relative; }
.hv-times span {
    position: absolute; right: 6px; transform: translateY(-50%);
    font-size: 10px; line-height: 1; color: var(--c-text-faint); font-variant-numeric: tabular-nums;
}
.hv-col {
    position: relative; min-width: 0; border-radius: 6px; border: 1px solid var(--c-border);
    background:
        repeating-linear-gradient(to bottom, color-mix(in srgb, var(--c-ink) 9%, transparent) 0 1px, transparent 1px 20%),
        repeating-linear-gradient(to bottom, transparent 0 10%, color-mix(in srgb, var(--c-ink) 4%, transparent) 10% calc(10% + 1px), transparent calc(10% + 1px) 20%),
        var(--c-surface);
}
/* Off-hours hatch and the "already past" wash sit above the columns, under the cards. */
.hv-off { position: absolute; left: 48px; right: 0; z-index: 1; pointer-events: none; border-radius: 6px 6px 0 0;
    background: repeating-linear-gradient(135deg, transparent 0 5px, color-mix(in srgb, var(--c-ink) 7%, transparent) 5px 6px); }
.hv-past { position: absolute; left: 48px; right: 0; z-index: 1; pointer-events: none; background: color-mix(in srgb, var(--c-ink) 4%, transparent); }
.hv-now { position: absolute; left: 46px; right: -2px; z-index: 3; height: 2px; background: var(--staff-2); pointer-events: none; }
.hv-now::before { content: ""; position: absolute; left: -3px; top: -3px; width: 8px; height: 8px; border-radius: 50%; background: var(--staff-2); animation: hv-now-pulse 6s ease-in-out infinite; }

/* Service cards: 3px left edge + 12% tint in the service colour (--hv-c). */
.hv-card {
    position: absolute; left: 3px; right: 3px; z-index: 2; overflow: hidden;
    display: flex; flex-direction: column; gap: 1px; padding: 4px 5px 4px 6px;
    border-radius: 6px; border-left: 3px solid var(--hv-c);
    background: color-mix(in srgb, var(--hv-c) 12%, var(--c-surface));
    box-shadow: 0 1px 2px color-mix(in srgb, var(--c-ink) 8%, transparent);
    font-size: 10px; line-height: 1.2; color: var(--c-ink);
}
.hv-card__svc { font-size: 10.5px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; padding-right: 12px; }
.hv-card__row { display: flex; align-items: center; justify-content: space-between; gap: 4px; min-height: 13px; }
.hv-card__time { font-size: 9px; color: var(--c-text-soft); font-variant-numeric: tabular-nums; }
.hv-card__who { display: flex; align-items: center; gap: 4px; font-weight: 500; white-space: nowrap; overflow: hidden; }
.hv-card__phone { font-size: 9px; color: var(--c-text-soft); letter-spacing: -0.02em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hv-tag {
    flex: none; display: inline-flex; align-items: center; gap: 3px; height: 14px; padding: 0 5px 0 4px;
    border-radius: var(--r-full); background: color-mix(in srgb, var(--c-ink) 8%, transparent);
    font-size: 8px; font-weight: 700; letter-spacing: .04em; color: var(--c-text-soft);
}
.hv-flag { flex: none; display: inline-block; width: 12px; height: 8px; border-radius: 1.5px; box-shadow: 0 0 0 1px color-mix(in srgb, var(--c-ink) 12%, transparent); }
.hv-flag--lt { background: linear-gradient(to bottom, var(--mk-flag-yellow) 0 33.4%, var(--mk-flag-green) 33.4% 66.7%, var(--c-error) 66.7%); }
.hv-flag--pl { background: linear-gradient(to bottom, var(--c-surface) 0 50%, var(--c-error) 50%); }

/* The live card: outlined status circle top-right; at 8 s it fills with a
   check, the border brightens and "Internetu" gives way to "Patvirtinta". */
.hv-card--live::after { content: ""; position: absolute; inset: 0; border-radius: 6px; border: 1.5px solid var(--hv-c); opacity: 0; pointer-events: none; animation: hero-ring 10s var(--ease-out) infinite; }
.hv-card__st { position: absolute; top: 4px; right: 4px; width: 12px; height: 12px; border-radius: 50%; border: 1.5px solid color-mix(in srgb, var(--hv-c) 55%, transparent); }
.hv-card__st-ok { position: absolute; inset: -1.5px; border-radius: 50%; background: var(--c-success); color: var(--c-surface); display: grid; place-items: center; opacity: 0; animation: hero-check 10s var(--ease-spring) infinite; }
.hv-card__state { position: relative; flex: 0 1 auto; min-width: 0; height: 13px; }
.hv-badge, .hv-card__ok {
    display: block; max-width: 100%; box-sizing: border-box; height: 13px; line-height: 13px; padding: 0 5px; border-radius: var(--r-full);
    font-size: 8px; font-weight: 700; letter-spacing: .03em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.hv-badge { background: color-mix(in srgb, var(--hv-c) 16%, transparent); color: var(--hv-c); animation: hero-badge 10s var(--ease-out) infinite; }
.hv-card__ok { position: absolute; top: 0; right: 0; background: var(--c-success-tint); color: var(--c-success); opacity: 0; animation: hero-label 10s var(--ease-out) infinite; }

.hv-legend { display: flex; flex-wrap: wrap; gap: 4px 12px; margin-top: 10px; font-size: 10.5px; font-weight: 500; color: var(--c-text-soft); }
.hv-legend__it { display: inline-flex; align-items: center; gap: 5px; white-space: nowrap; }
.hv-legend__dot { width: 8px; height: 8px; border-radius: 50%; background: var(--hv-c); }

/* ---- Phone: kept shell, sized down, with two new scenes ---- */
.hero__stage .phone { width: 100%; padding: 8px; border-radius: 32px; }
.hero__stage .phone__screen { border-radius: 25px; }
.hero__stage .phone__island { top: 8px; width: 62px; height: 17px; border-radius: 9px; }
.hvp-bar { flex-direction: column; align-items: flex-start; gap: 1px; padding: 28px 12px 9px; }
.hvp-bar .ph-app__brand { font-size: 12px; line-height: 1.2; }
.hvp-scene { padding: 12px; gap: 8px; }
.hvp-scene--book { animation: hvp-fade-a 10s var(--ease-out) infinite; }
.hvp-scene--sms { animation: hvp-fade-b 10s var(--ease-out) infinite; }
.hvp-svc { display: flex; align-items: center; gap: 6px; padding: 8px 9px; border-radius: var(--r-sm); background: var(--c-surface); border: 1px solid var(--c-border); box-shadow: var(--shadow-card); }
.hvp-svc__dot { flex: none; width: 7px; height: 7px; border-radius: 50%; background: var(--c-action); }
.hvp-svc__name { flex: 1; min-width: 0; font-size: 11px; font-weight: 600; line-height: 1.2; }
.hvp-svc__price { flex: none; font-size: 11px; font-weight: 700; color: var(--c-action); }
.hvp-scene .ph-scene__label { font-size: 9.5px; }
.hvp-scene .ph-day { padding: 6px 0; font-size: 11px; }
.hvp-slots { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; }
.hvp-scene .ph-slot { padding: 7px 0; font-size: 11px; }
.hvp-cta { padding: 9px; font-size: 12px; animation: hvp-tap 10s var(--ease-out) infinite; }

.hvp-sms__from { display: flex; flex-direction: column; align-items: center; gap: 3px; padding-bottom: 6px; border-bottom: 1px solid var(--c-border); font-size: 10px; font-weight: 600; color: var(--c-text-soft); text-align: center; }
.hvp-sms__av { width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; background: var(--grad-primary); color: var(--c-surface); font-size: 10px; font-weight: 700; }
.hvp-bubble { max-width: 88%; padding: 7px 9px; border-radius: 12px; font-size: 10px; line-height: 1.35; }
.hvp-bubble--in { align-self: flex-start; background: var(--c-surface); border: 1px solid var(--c-border); border-bottom-left-radius: 4px; color: var(--c-text); box-shadow: var(--shadow-card); animation: hvp-in-1 10s var(--ease-out) infinite; }
.hvp-bubble--out { align-self: flex-end; padding: 6px 12px; background: var(--c-action); color: var(--c-surface); font-weight: 700; border-bottom-right-radius: 4px; box-shadow: var(--shadow-btn); animation: hvp-in-2 10s var(--ease-spring) infinite; }
.hvp-sys { align-self: center; display: inline-flex; align-items: center; gap: 4px; padding: 3px 9px; border-radius: var(--r-full); background: var(--c-success-tint); color: var(--c-success); font-size: 10px; font-weight: 700; animation: hvp-in-3 10s var(--ease-out) infinite; }

/* ---- Glass chips ---- */
.hv-chip { z-index: 3; font-size: 12px; }
.hv-chip__ic { flex: none; color: var(--c-action); }
.hv-chip--sms {
    top: 122px; left: -16px; max-width: min(272px, 74%);
    flex-direction: column; align-items: flex-start; gap: 3px; padding: 6px 12px; border-radius: 14px;
    animation: hv-float-a 7s ease-in-out infinite;
}
.hv-chip__row { display: flex; align-items: center; gap: 6px; line-height: 14px; }
.hv-chip__text { font-size: 9.5px; line-height: 1.3; font-weight: 500; color: var(--c-text-soft); letter-spacing: -0.01em; }
.hv-chip--cal { left: -14px; bottom: -30px; animation: hv-float-b 10s ease-in-out infinite; }
.hv-chip--cal .hv-chip__ic { color: var(--c-success); }

/* ---- Proof band ---- */

/* ---- One story, 10 s: book (0-5 s), reminder (5.3 s), TAIP (7 s), confirmed (8 s) ---- */
@keyframes hvp-fade-a { 0%, 45% { opacity: 1; transform: none; } 50%, 95% { opacity: 0; transform: translateY(-6px); } 100% { opacity: 1; transform: none; } }
@keyframes hvp-fade-b { 0%, 46% { opacity: 0; transform: translateY(6px); } 52%, 96% { opacity: 1; transform: none; } 100% { opacity: 0; transform: translateY(6px); } }
@keyframes hvp-tap { 0%, 40% { transform: scale(1); } 42% { transform: scale(.95); } 45%, 100% { transform: scale(1); } }
@keyframes hvp-in-1 { 0%, 53% { opacity: 0; transform: translateY(8px); } 58%, 100% { opacity: 1; transform: none; } }
@keyframes hvp-in-2 { 0%, 69% { opacity: 0; transform: translateX(14px); } 74%, 100% { opacity: 1; transform: none; } }
@keyframes hvp-in-3 { 0%, 79% { opacity: 0; transform: translateY(4px); } 84%, 100% { opacity: 1; transform: none; } }
@keyframes hero-check { 0%, 78% { opacity: 0; transform: scale(.4); } 84% { opacity: 1; transform: scale(1.18); } 88%, 97% { opacity: 1; transform: scale(1); } 100% { opacity: 0; transform: scale(.4); } }
@keyframes hero-ring { 0%, 78% { opacity: 0; } 84%, 97% { opacity: 1; } 100% { opacity: 0; } }
@keyframes hero-badge { 0%, 78% { opacity: 1; } 84%, 97% { opacity: 0; } 100% { opacity: 1; } }
@keyframes hero-label { 0%, 79% { opacity: 0; transform: translateY(3px); } 85%, 97% { opacity: 1; transform: none; } 100% { opacity: 0; transform: translateY(3px); } }
@keyframes hv-float-a { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-5px); } }
@keyframes hv-float-b { 0%, 100% { transform: translateY(0) scale(1); } 40% { transform: translateY(4px) scale(1); } 78% { transform: translateY(0) scale(1); } 82% { transform: translateY(0) scale(1.07); } 87% { transform: translateY(0) scale(1); } }
@keyframes hv-now-pulse { 0%, 100% { opacity: 1; } 50% { opacity: .35; } }

/* ---- Responsive ---- */
@media (max-width: 1100px) {
    .hero__stage { --hv-phone-w: 176px; --hv-hang: 100px; --hv-gap: 88px; }
    .hv-phone { right: 0; }
    .hv-chip--sms { left: 4px; }
    .hv-chip--cal { left: 6px; }
}
@media (max-width: 900px) {
    .hero__stage { max-width: 480px; margin: var(--sp-6) auto 0; --hv-phone-w: 168px; --hv-hang: 96px; --hv-gap: 84px; }
    .hero__cta { flex-direction: column; max-width: 420px; margin-inline: auto; }
    .hero__btn { width: 100%; }
    .hero__ticks { justify-content: center; }
}
/* The staff pill holds the longest label in the toolbar ("Specialistai / 3 of
   3"), so on a narrower desktop it keeps the icon and drops the words rather
   than ellipsing mid-word. */
@media (max-width: 1140px) {
    .hv-pill__txt { display: none; }
}
@media (max-width: 600px) {
    .hv-grid { height: 230px; }
    .hv-chip__text { display: none; }
    .hv-pill--staff { display: none; }
}
@media (max-width: 480px) {
    .hero__stage { --hv-hang: 0px; --hv-gap: 0px; }
    .hv-phone, .hv-chip { display: none; }
    .hv-card .hv-flag { display: none; }
}

/* ---- Reduced motion: loops off, final frame shown (reminder, TAIP, confirmed) ---- */
@media (prefers-reduced-motion: reduce) {
    .hero__stage .phone, .hv-chip, .hvp-scene, .hvp-bubble, .hvp-sys, .hvp-cta,
    .hv-card__st-ok, .hv-card--live::after, .hv-badge, .hv-card__ok, .hv-now::before,
    .hvp-scene .ph-slot--pick::after { animation: none !important; }
    .hvp-scene--book { opacity: 0; }
    .hvp-scene--sms, .hvp-bubble, .hvp-sys, .hv-card__st-ok, .hv-card--live::after, .hv-card__ok { opacity: 1; transform: none; }
    .hv-badge { opacity: 0; }
    .hvp-scene .ph-slot--pick::after { opacity: 0; }
}


/* ==== demo ==== */
/* Three doors into the demo salon: the client booking page (primary), the
   owner, a specialist. Thumbnails are hand-built miniatures of the real screens
   one click away (booking step 1, the dashboard KPI tiles, the staff phone with
   its tab bar). Static: reveal only, no loops. */

.demo {
    position: relative;
    overflow: hidden;
    padding: clamp(var(--sp-8), 7vw, var(--sp-10)) 0;
    /* The product's service palette, for the calendar cards in the mockups. */
    --dm-svc-1: #635bff;
    --dm-svc-2: #33b679;
    --dm-svc-3: #f09300;
    --dm-thumb-bg: color-mix(in srgb, var(--c-action) 7%, var(--c-surface));
}
.demo__glow {
    position: absolute; left: 50%; top: 30%; z-index: 0; pointer-events: none;
    width: min(960px, 100%); height: 560px; transform: translateX(-50%);
    background: radial-gradient(50% 50% at 50% 50%, color-mix(in srgb, var(--c-action) 13%, transparent), transparent 70%);
    filter: blur(12px);
}
.demo > .container { position: relative; z-index: 1; }

/* ---- Head ---- */
.demo__head { display: flex; flex-direction: column; align-items: center; text-align: center; }
.demo__head .sec-title { margin-top: var(--sp-4); }
.demo__head .sec-lead { max-width: 60ch; margin-bottom: 0; }

/* ---- Language row: label, four pills, the note ---- */
.demo__langs { display: flex; flex-direction: column; align-items: center; gap: var(--sp-3); margin-top: var(--sp-5); }
.demo__lang-label {
    font-family: var(--font-mono); font-size: var(--fs-label); font-weight: 500;
    letter-spacing: .06em; text-transform: uppercase; color: var(--c-text-faint);
}
.demo__pills {
    display: flex; flex-wrap: wrap; justify-content: center; gap: var(--sp-1);
    padding: 4px; border-radius: var(--r-full);
    background: var(--c-surface); border: 1px solid var(--c-border); box-shadow: var(--shadow-card);
}
.demo__lang {
    display: inline-flex; align-items: center; justify-content: center;
    min-height: 40px; padding: 0 var(--sp-4); border-radius: var(--r-full);
    font-weight: 600; font-size: var(--fs-sm); color: var(--c-text-soft); text-decoration: none;
    transition: background var(--t-fast) var(--ease-out), color var(--t-fast) var(--ease-out), box-shadow var(--t-fast) var(--ease-out);
}
.demo__lang:hover { background: color-mix(in srgb, var(--c-action) 10%, transparent); color: var(--c-action); text-decoration: none; }
.demo__lang:focus-visible { outline: none; box-shadow: 0 0 0 3px color-mix(in srgb, var(--c-action) 35%, transparent); }
.demo__lang.is-active { background: var(--c-action); color: var(--c-surface); box-shadow: var(--shadow-btn); }
.demo__lang.is-active:hover { background: var(--c-action-hover); color: var(--c-surface); }
.demo__lang-note { margin: 0; max-width: 62ch; text-align: center; font-size: var(--fs-sm); color: var(--c-text-soft); line-height: 1.5; }

/* ---- The three doors ---- */
.demo__grid {
    display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--sp-4);
    margin-top: var(--sp-7); align-items: stretch;
}
.dm-card {
    position: relative; display: flex; flex-direction: column; min-width: 0;
    background: var(--c-surface); border: 1px solid var(--c-border); border-radius: var(--r-xl);
    box-shadow: var(--shadow-card); overflow: hidden;
    transition: transform var(--t-med) var(--ease-out), box-shadow var(--t-med) var(--ease-out), border-color var(--t-med) var(--ease-out);
}
.dm-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-lift); border-color: color-mix(in srgb, var(--c-action) 30%, var(--c-border)); }
.dm-card--primary {
    --dm-thumb-bg: color-mix(in srgb, var(--c-action) 12%, var(--c-surface));
    border-color: color-mix(in srgb, var(--c-action) 40%, transparent);
    box-shadow: var(--shadow-lift), 0 0 0 4px color-mix(in srgb, var(--c-action) 8%, transparent);
}
.dm-card--primary .dm-card__body { background: linear-gradient(180deg, color-mix(in srgb, var(--c-action) 5%, var(--c-surface)), var(--c-surface)); }

.dm-card__badge {
    position: absolute; top: var(--sp-3); right: var(--sp-3); z-index: 3;
    padding: 3px 10px; border: 1.5px dashed var(--c-action); border-radius: var(--r-full);
    background: color-mix(in srgb, var(--c-surface) 88%, transparent); color: var(--c-action);
    font-family: var(--font-mono); font-size: 11px; font-weight: 600; letter-spacing: .1em; line-height: 1.5;
}

.dm-card__body { display: flex; flex-direction: column; flex: 1; gap: var(--sp-2); padding: var(--sp-5); }
.dm-card__title { display: flex; align-items: center; gap: var(--sp-2); margin: 0; font-size: var(--fs-h3); font-weight: 700; color: var(--c-ink); }
.dm-card__icon {
    flex: none; width: 28px; height: 28px; border-radius: var(--r-sm); display: grid; place-items: center;
    background: color-mix(in srgb, var(--c-action) 12%, transparent); color: var(--c-action);
}
.dm-card__text { margin: 0; color: var(--c-text-soft); font-size: var(--fs-sm); line-height: 1.55; }
.dm-card__cta { margin-top: auto; padding-top: var(--sp-3); }

/* ---- Thumbnail frame: a tinted, dotted stage with a device on it ---- */
.dm-thumb {
    position: relative; height: 200px; overflow: hidden; border-bottom: 1px solid var(--c-border);
    background: radial-gradient(color-mix(in srgb, var(--c-action) 16%, transparent) 1px, transparent 1.5px) 0 0 / 14px 14px, var(--dm-thumb-bg);
}
/* The device is cropped by the frame; a fade makes the cut edge read as depth. */
.dm-thumb::after {
    content: ""; position: absolute; left: 0; right: 0; bottom: 0; z-index: 2; height: 34px; pointer-events: none;
    background: linear-gradient(to top, var(--dm-thumb-bg), transparent);
}
.dm-thumb--staff::after { top: 0; bottom: auto; background: linear-gradient(to bottom, var(--dm-thumb-bg), transparent); }

/* Mini phone (own frame: the hero's .phone is aspect-locked at 300/610). */
.dm-phone {
    position: absolute; left: 50%; transform: translateX(-50%); width: min(176px, 72%);
    padding: 6px; border-radius: 30px;
    background: linear-gradient(150deg, color-mix(in srgb, var(--c-ink) 75%, var(--c-text-soft)), var(--c-ink));
    box-shadow: 0 24px 44px -18px color-mix(in srgb, var(--c-ink) 55%, transparent), 0 2px 6px color-mix(in srgb, var(--c-ink) 18%, transparent);
}
.dm-phone--rise { top: 26px; bottom: -40px; }
.dm-phone--sit { top: -60px; bottom: 16px; width: min(204px, 78%); }
.dm-phone__screen { position: relative; height: 100%; border-radius: 24px; overflow: hidden; background: var(--c-bg); display: flex; flex-direction: column; }
.dm-phone__island { position: absolute; top: 7px; left: 50%; transform: translateX(-50%); z-index: 3; width: 46px; height: 13px; border-radius: 8px; background: var(--c-ink); }

/* Booking page, step 1: brand bar, the LT EN RU PL strip, services. */
.dm-bk { display: flex; flex-direction: column; gap: 6px; padding: 0 8px 8px; }
.dm-bk__bar { margin: 0 -8px 2px; padding: 26px 10px 8px; background: var(--grad-primary); color: var(--c-surface); font-weight: 700; font-size: 10px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dm-bk__langs { display: flex; gap: 3px; padding: 3px; background: var(--c-surface); border: 1px solid var(--c-border); border-radius: var(--r-sm); }
.dm-bk__lang { flex: 1; text-align: center; padding: 3px 0; border-radius: 5px; font-size: 8px; font-weight: 700; letter-spacing: .04em; color: var(--c-text-faint); }
.dm-bk__lang.is-on { background: var(--c-action); color: var(--c-surface); }
.dm-bk__step { margin-top: 2px; font-size: 10px; font-weight: 800; color: var(--c-ink); }
.dm-bk__svc {
    display: flex; align-items: center; gap: 6px; padding: 7px 8px; min-width: 0;
    background: var(--c-surface); border: 1px solid var(--c-border); border-radius: var(--r-sm); box-shadow: var(--shadow-card); font-size: 9px;
}
.dm-bk__svc.is-picked { border-color: var(--c-action); background: color-mix(in srgb, var(--c-action) 8%, var(--c-surface)); }
.dm-bk__check { position: relative; flex: none; width: 12px; height: 12px; border-radius: 50%; border: 1.5px solid var(--c-border-strong); }
.dm-bk__svc.is-picked .dm-bk__check { background: var(--c-action); border-color: var(--c-action); }
.dm-bk__svc.is-picked .dm-bk__check::after {
    content: ""; position: absolute; left: 3px; top: 1px; width: 3px; height: 6px;
    border: solid var(--c-surface); border-width: 0 1.5px 1.5px 0; transform: rotate(45deg);
}
.dm-bk__name { flex: 1; min-width: 0; font-weight: 600; color: var(--c-ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dm-bk__price { font-weight: 700; color: var(--c-action); white-space: nowrap; }

/* Owner: a mini browser window with the dashboard's three tiles + today's rows. */
.dm-win {
    position: absolute; top: 26px; left: 6%; right: 6%; bottom: -16px; display: flex; flex-direction: column;
    background: var(--c-surface); border: 1px solid var(--c-border); border-radius: var(--r-md) var(--r-md) 0 0; overflow: hidden;
    box-shadow: 0 24px 44px -18px color-mix(in srgb, var(--c-ink) 40%, transparent), var(--shadow-card);
}
.dm-win__bar { display: flex; align-items: center; gap: 5px; padding: 7px 10px; background: var(--c-surface-low); border-bottom: 1px solid var(--c-border); }
.dm-win__dot { flex: none; width: 7px; height: 7px; border-radius: 50%; background: var(--c-border-strong); }
.dm-win__addr { flex: 1; margin-left: 5px; padding: 2px 8px; border-radius: var(--r-full); background: var(--c-surface); font-size: 8px; color: var(--c-text-faint); }
.dm-win__body { display: flex; flex-direction: column; gap: 8px; padding: 10px; }
.dm-kpis { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
.dm-kpi {
    display: flex; flex-direction: column; gap: 2px; min-width: 0; padding: 7px 8px; color: var(--c-ink);
    background: var(--c-surface); border: 1px solid var(--c-border); border-radius: var(--r-sm); box-shadow: var(--shadow-card);
}
.dm-kpi__val { font-family: var(--font-heading); font-size: 15px; font-weight: 800; line-height: 1.1; letter-spacing: -0.02em; white-space: nowrap; }
.dm-kpi__label { font-size: 7.5px; color: var(--c-text-soft); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dm-rows { display: flex; flex-direction: column; gap: 5px; }
.dm-row {
    display: flex; align-items: center; gap: 7px; min-width: 0; padding: 6px 8px; border-radius: var(--r-sm);
    background: color-mix(in srgb, var(--dm-c) 12%, var(--c-surface)); border-left: 3px solid var(--dm-c); font-size: 9px;
}
.dm-row__time { flex: none; font-family: var(--font-mono); font-size: 8px; color: var(--c-text-soft); font-variant-numeric: tabular-nums; }
.dm-row__name { font-weight: 700; color: var(--c-ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dm-row__client { flex: none; margin-left: auto; color: var(--c-text-soft); }

/* Specialist: the day list and the bottom tab bar (as in the staff app). */
.dm-day { flex: 1; display: flex; flex-direction: column; justify-content: flex-end; gap: 6px; padding: 0 9px 8px; }
.dm-day__head { display: flex; align-items: center; justify-content: space-between; font-size: 10px; font-weight: 800; color: var(--c-ink); }
.dm-day__ava { width: 16px; height: 16px; border-radius: 50%; display: grid; place-items: center; background: var(--c-primary-tint); color: var(--c-primary); font-size: 8px; font-weight: 700; }
.dm-day__now { position: relative; height: 2px; margin: 0 -2px; border-radius: var(--r-full); background: var(--c-action); }
.dm-day__now::before { content: ""; position: absolute; left: -2px; top: -2px; width: 6px; height: 6px; border-radius: 50%; background: var(--c-action); }
.dm-appt {
    display: flex; flex-direction: column; gap: 1px; min-width: 0; padding: 5px 8px 5px 10px; border-radius: 7px;
    background: color-mix(in srgb, var(--dm-c) 12%, var(--c-surface)); border-left: 3px solid var(--dm-c);
    font-size: 8.5px; line-height: 1.3; color: var(--c-text); box-shadow: 0 1px 3px color-mix(in srgb, var(--c-ink) 8%, transparent);
}
.dm-appt__time { font-family: var(--font-mono); font-size: 8px; color: var(--c-text-soft); font-variant-numeric: tabular-nums; }
.dm-appt b { font-weight: 700; color: var(--c-ink); }
.dm-appt__client { color: var(--c-text-soft); }
.dm-tabs {
    display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); padding: 6px 2px 10px;
    border-top: 1px solid var(--c-border); background: var(--c-surface);
}
.dm-tab { position: relative; display: flex; flex-direction: column; align-items: center; gap: 2px; min-width: 0; font-size: 6px; font-weight: 600; color: var(--c-text-faint); }
.dm-tab svg { width: 13px; height: 13px; }
.dm-tab i { max-width: 100%; font-style: normal; font-size: 5.5px; letter-spacing: -0.01em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dm-tab.is-on { color: var(--c-action); }
.dm-tab__badge {
    position: absolute; top: -4px; right: 2px; min-width: 11px; height: 11px; padding: 0 3px; border-radius: var(--r-full);
    background: var(--c-error); color: var(--c-surface); font-size: 7px; font-weight: 700; line-height: 11px; text-align: center;
}
.dm-tab__light { width: 10px; height: 2px; border-radius: var(--r-full); background: var(--c-success); box-shadow: 0 0 5px color-mix(in srgb, var(--c-success) 70%, transparent); }

/* ---- Reassurance + the quiet "liked it?" line ---- */
.demo__note { margin: var(--sp-6) auto 0; max-width: 64ch; text-align: center; font-size: var(--fs-sm); color: var(--c-text-soft); line-height: 1.6; }
.demo__note svg { display: inline-block; vertical-align: -3px; margin-right: 4px; color: var(--c-success); }
.demo__like { margin: var(--sp-3) 0 0; text-align: center; font-size: var(--fs-sm); color: var(--c-text-faint); }
.demo__like a { color: var(--c-action); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }
.demo__like a:hover { color: var(--c-action-hover); }

/* ---- Responsive ---- */
@media (max-width: 1100px) {
    .demo__grid { gap: var(--sp-3); }
    .dm-card__body { padding: var(--sp-4); }
    .dm-phone { width: min(176px, 80%); }
}
@media (max-width: 900px) {
    .demo__grid { grid-template-columns: minmax(0, 1fr); max-width: 460px; margin-inline: auto; gap: var(--sp-4); }
    .dm-thumb { height: 190px; }
    .dm-phone { width: min(176px, 60%); }
    .dm-phone--sit { width: min(204px, 66%); }
}
@media (max-width: 640px) {
    .demo__pills { border-radius: var(--r-xl); }
    .demo__lang { min-height: 44px; flex: 1 1 auto; }
    .dm-thumb { height: 170px; }
    .dm-thumb::after { height: 24px; }
    .dm-phone--rise { top: 16px; }
    .dm-phone--sit { top: -80px; bottom: 12px; }
    .dm-win { top: 20px; }
    .dm-card--primary { box-shadow: var(--shadow-lift); }
}

/* ---- Reduced motion: no loops here; drop the hover lifts too ---- */
@media (prefers-reduced-motion: reduce) {
    .dm-card, .demo__lang { transition: none; }
    .dm-card:hover { transform: none; }
}


/* ==== features ==== */
/* The calendar, drawn: CSS-only day/week/month tabs in a .win frame, the
   21-day strip (.strip), the month grid (.mo), the before/after rows (.ba-*)
   and the same calendar on a .phone--still (.feat-ph). Kept: .cal .cal__grid
   .cal__demo .cal__hint .win* .cal-av* .phone* .ticks .sec-title .sec-lead. */

/* ---- Service palette (the product's real colours, per SERVICE) + flags ---- */
.feat {
    --mk-svc-1: #635bff;   /* Kirpimas */
    --mk-svc-2: #33b679;   /* Dažymas */
    --mk-svc-3: #f09300;   /* Manikiūras */
    --mk-svc-4: #039be5;   /* Barzda */
    --mk-flag-y: #f6bf26;
    --mk-flag-g: #0b8043;
    --mk-flag-b: #3f51b5;
    overflow-x: clip;
}
.strip__card--1, .strip__sw--1, .mo-chip--1 { --sc: var(--mk-svc-1); }
.strip__card--2, .strip__sw--2, .mo-chip--2 { --sc: var(--mk-svc-2); }
.strip__card--3, .strip__sw--3, .mo-chip--3 { --sc: var(--mk-svc-3); }
.strip__card--4, .strip__sw--4, .mo-chip--4 { --sc: var(--mk-svc-4); }

.feat-flag { display: inline-block; flex-shrink: 0; width: 12px; height: 9px; border-radius: 2px; box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--c-ink) 14%, transparent); background: var(--c-surface-mid); }
.feat-flag--lt { background: linear-gradient(var(--mk-flag-y) 0 33.4%, var(--mk-flag-g) 33.4% 66.7%, var(--c-error) 66.7%); }
.feat-flag--ru { background: linear-gradient(var(--c-surface) 0 33.4%, var(--mk-flag-b) 33.4% 66.7%, var(--c-error) 66.7%); }
.feat-flag--pl { background: linear-gradient(var(--c-surface) 0 50%, var(--c-error) 50%); }
.feat-flag--en {
    background:
        linear-gradient(var(--c-error), var(--c-error)) center / 100% 22% no-repeat,
        linear-gradient(var(--c-error), var(--c-error)) center / 22% 100% no-repeat,
        linear-gradient(var(--c-surface), var(--c-surface)) center / 100% 40% no-repeat,
        linear-gradient(var(--c-surface), var(--c-surface)) center / 40% 100% no-repeat,
        var(--c-ink);
}

/* ---- Copy column ---- */
.feat__copy > .feat__hook {
    display: inline-block;
    max-width: 46ch;
    margin-bottom: var(--sp-4);
    padding: 8px 14px;
    border-radius: var(--r-md);
    font-family: var(--font-body);
    font-size: var(--fs-sm);
    font-weight: 500;
    letter-spacing: 0;
    line-height: 1.5;
    white-space: normal;
}
.feat__copy .ticks li { line-height: 1.5; }
.feat__cta { margin-top: var(--sp-5); }
.feat__demo { margin: 0; min-width: 0; }

/* ---- Tabs: three radios, three labels, :checked shows a panel ---- */
.cal-tabs { position: relative; }
.cal-tabs .cal-tabs__input { position: absolute; width: 1px; height: 1px; margin: 0; opacity: 0; pointer-events: none; }
.cal-tabs__bar { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; padding: 8px 12px; border-bottom: 1px solid var(--c-border); font-size: 11px; }
.cal-tabs__pill { display: inline-flex; align-items: center; gap: 4px; padding: 3px 9px; border: 1px solid var(--c-border-strong); border-radius: var(--r-full); font-weight: 600; color: var(--c-ink); white-space: nowrap; }
.cal-tabs__pill .cal-av { width: 14px; height: 14px; font-size: 8px; margin-right: -6px; box-shadow: 0 0 0 1.5px var(--c-surface); }
.cal-tabs__pill .cal-av:nth-of-type(3) { margin-right: 4px; }
.cal-tabs__pill--staff { padding-left: 5px; }
.cal-tabs__title { margin-right: auto; font-weight: 700; color: var(--c-ink); white-space: nowrap; }
.cal-tabs__seg { display: inline-flex; gap: 2px; padding: 2px; background: var(--c-surface-mid); border-radius: 8px; }
.cal-tabs__tab { padding: 3px 10px; border-radius: 6px; font-size: 11px; font-weight: 600; line-height: 1.5; color: var(--c-text-soft); cursor: pointer; user-select: none; transition: background var(--t-fast), color var(--t-fast); }
.cal-tabs__tab:hover { color: var(--c-ink); }
.cal-tabs__tab.is-on,
#cal-view-day:checked ~ .win .cal-tabs__tab[for="cal-view-day"],
#cal-view-week:checked ~ .win .cal-tabs__tab[for="cal-view-week"],
#cal-view-month:checked ~ .win .cal-tabs__tab[for="cal-view-month"] { background: var(--c-surface); color: var(--c-action); box-shadow: var(--shadow-card); }
#cal-view-day:focus-visible ~ .win .cal-tabs__tab[for="cal-view-day"],
#cal-view-week:focus-visible ~ .win .cal-tabs__tab[for="cal-view-week"],
#cal-view-month:focus-visible ~ .win .cal-tabs__tab[for="cal-view-month"] { box-shadow: var(--focus-ring); }
.cal-tabs__panel { display: none; }
#cal-view-day:checked ~ .win .cal-tabs__panel--day,
#cal-view-week:checked ~ .win .cal-tabs__panel--week,
#cal-view-month:checked ~ .win .cal-tabs__panel--month { display: block; }

/* ---- The strip: sticky hour gutter, day columns split per specialist ---- */
.strip { --hh: 32px; --sub: 94px; --gut: 40px; position: relative; font-size: 10px; }
.strip__scroll { overflow-x: auto; overflow-y: hidden; scrollbar-width: thin; }
.strip__head, .strip__body { display: flex; width: max-content; min-width: 100%; }
.strip__head { border-bottom: 1px solid var(--c-border); }
.strip__body { padding-top: 6px; }
.strip__corner, .strip__gutter { position: sticky; left: 0; z-index: 3; flex: 0 0 var(--gut); background: var(--c-surface); }
.strip__gutter span { display: block; height: var(--hh); padding-right: 6px; font-family: var(--font-mono); font-size: 9px; line-height: 1; color: var(--c-text-faint); text-align: right; transform: translateY(-5px); }
.strip__day, .strip__col { flex: 0 0 calc(var(--sub) * 3 + 2px); min-width: 0; border-left: 1px solid var(--c-border); }
.strip__day { display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 6px 4px 4px; font-size: 11px; font-weight: 600; color: var(--c-text-soft); }
.strip__dn { display: inline-flex; align-items: center; gap: 4px; white-space: nowrap; }
.strip__num { padding: 0 5px; border-radius: var(--r-full); line-height: 16px; }
.strip__day--past { color: var(--c-text-faint); }
.strip__day--sun .strip__dn { color: var(--c-error); }
.strip__day--today .strip__dn { color: var(--c-action); }
.strip__day--today .strip__num { background: var(--c-action); color: var(--c-surface); }
.strip__subs { display: flex; width: 100%; }
.strip__subs > span { flex: 1 1 0; display: grid; place-items: center; }
.strip__subs .cal-av { width: 18px; height: 18px; font-size: 9px; }
.strip__col { position: relative; display: flex; height: calc(var(--hh) * 10); }
.strip__sub {
    position: relative;
    flex: 1 1 0;
    min-width: 0;
    background-image: repeating-linear-gradient(to bottom, color-mix(in srgb, var(--c-ink) 7%, transparent) 0 1px, transparent 1px var(--hh));
}
.strip__sub + .strip__sub { border-left: 1px solid var(--c-border); }
/* Off-hours: hatched, like the product's non-working time. The first row is 08:00. */
.strip__sub::before { content: ''; position: absolute; inset: 0 0 auto 0; height: var(--hh); background: repeating-linear-gradient(45deg, var(--c-surface-low) 0 4px, transparent 4px 10px); }
.strip__col--closed .strip__sub::before { height: 100%; }
.strip__col--today .strip__sub { background-color: color-mix(in srgb, var(--c-action) 3%, transparent); }
.strip__sub--open::before { content: none; }
/* The past, greyed: whole days dim, their cards desaturate. */
.strip__col--past::after { content: ''; position: absolute; inset: 0; z-index: 2; background: color-mix(in srgb, var(--c-ink) 6%, transparent); pointer-events: none; }
.strip__col--past .strip__card { opacity: .6; filter: saturate(.35); }
.strip__now { position: absolute; left: 0; right: 0; z-index: 4; height: 2px; background: var(--c-action); pointer-events: none; }
.strip__now::before { content: ''; position: absolute; left: -3px; top: -3px; width: 8px; height: 8px; border-radius: 50%; background: var(--c-action); }

/* Cards: tinted per service, 3px edge, name + flag, phone in mono, service. */
.strip__card {
    position: absolute; left: 2px; right: 2px; z-index: 2;
    display: flex; flex-direction: column; overflow: hidden;
    padding: 3px 5px 3px 6px;
    border-left: 3px solid var(--sc);
    border-radius: 6px;
    background: color-mix(in srgb, var(--sc) 13%, var(--c-surface));
    box-shadow: var(--shadow-card);
    color: var(--c-text);
    font-size: 10px; line-height: 13px;
}
.strip__l1 { display: flex; align-items: center; gap: 3px; min-width: 0; }
.strip__st { flex-shrink: 0; width: 8px; height: 8px; border: 1.5px solid var(--sc); border-radius: 50%; box-sizing: border-box; }
.is-ok .strip__st { position: relative; border-color: var(--c-success); background: var(--c-success); }
.is-ok .strip__st::after { content: ''; position: absolute; inset: 1px; background: var(--c-surface); clip-path: polygon(14% 44%, 0 65%, 50% 100%, 100% 16%, 80% 0%, 43% 62%); }
.strip__t { flex-shrink: 0; font-family: var(--font-mono); font-size: 9px; font-weight: 600; color: var(--c-ink); }
.strip__nm { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; }
.strip__ph { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-family: var(--font-mono); font-size: 8.5px; letter-spacing: -0.01em; color: var(--c-text-soft); }
.strip__sv { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 9.5px; color: var(--c-text-soft); }

/* Slider under the strip: the thumb sits on "this week" of the 21-day range. */
.strip__slider { position: relative; height: 4px; margin: 10px 12px 0; border-radius: var(--r-full); background: var(--c-surface-mid); }
.strip__thumb { position: absolute; left: 33%; top: -2px; width: 34%; height: 8px; border-radius: var(--r-full); background: var(--c-action); }
.strip__hint { padding: 5px 12px 0; text-align: center; font-size: 10px; color: var(--c-text-faint); }
.strip__legend { display: flex; flex-wrap: wrap; gap: 4px 14px; padding: 8px 12px 10px; font-size: 11px; color: var(--c-text-soft); }
.strip__lg { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.strip__sw { width: 10px; height: 10px; border-radius: 3px; background: var(--sc); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--c-ink) 8%, transparent); }

/* Day panel: three full-width columns, taller rows, the time on every card. */
.strip--day { --hh: 46px; }
.strip--day .strip__head, .strip--day .strip__body { width: auto; min-width: 0; }
.strip--day .strip__day, .strip--day .strip__col { flex: 1 1 0; }
.strip--day .strip__day { flex-direction: row; justify-content: center; gap: 6px; padding: 7px 4px; }
.strip--day .strip__day .strip__nm { flex: 0 1 auto; }
.strip--day .strip__col { height: calc(var(--hh) * 6); }
.strip--day .strip__card { left: 4px; right: 5px; padding: 4px 7px; font-size: 11px; line-height: 14px; }
.strip--day .strip__ph { font-size: 10px; }
.strip--day .strip__sv { font-size: 10.5px; }
.strip--day .strip__col + .strip__col .strip__now::before { display: none; }

/* ---- The drag loop (7 s): lift, slide one specialist right and one hour down,
   drop, ask "Tell the client?", fade home. Transform/opacity only. ---- */
.strip__card--drag { z-index: 5; overflow: visible; transform-origin: 50% 40%; animation: feat-drag 7s var(--ease-out) infinite; }
.strip__card--drag::after { content: ''; position: absolute; inset: -1px; border-radius: 6px; box-shadow: 0 10px 22px color-mix(in srgb, var(--sc) 45%, transparent); opacity: 0; animation: feat-lift 7s var(--ease-out) infinite; pointer-events: none; }
.strip__cursor { position: absolute; left: 55%; top: 40%; color: var(--c-ink); filter: drop-shadow(0 2px 3px color-mix(in srgb, var(--c-ink) 40%, transparent)); opacity: 0; animation: feat-cursor 7s var(--ease-out) infinite; }
.strip__drop { position: absolute; left: 2px; right: 2px; z-index: 1; border: 2px dashed var(--c-action); border-radius: 6px; background: color-mix(in srgb, var(--c-action) 10%, transparent); opacity: 0; animation: feat-drop 7s var(--ease-out) infinite; }
.strip__ask {
    position: absolute; left: 50%; top: 38%; z-index: 6;
    display: flex; flex-direction: column; gap: 8px;
    width: max-content; max-width: calc(100% - 24px);
    padding: 10px 12px;
    background: var(--c-surface);
    border: 1px solid var(--c-border);
    border-radius: var(--r-md);
    box-shadow: var(--shadow-modal);
    opacity: 0;
    transform: translate(-50%, 6px);
    animation: feat-ask 7s var(--ease-out) infinite;
    pointer-events: none;
}
.strip__ask-q { font-size: 12px; font-weight: 700; color: var(--c-ink); }
.strip__ask-row { display: flex; flex-wrap: wrap; gap: 6px; }
.strip__ask-row .chip { font-family: var(--font-body); letter-spacing: 0; font-weight: 600; }

@keyframes feat-drag {
    0%, 10% { transform: translate(0, 0) scale(1) rotate(0deg); opacity: 1; }
    15% { transform: translate(0, 0) scale(1.04) rotate(1.5deg); }
    36% { transform: translate(calc(100% + 5px), var(--hh)) scale(1.04) rotate(1.5deg); }
    40%, 82% { transform: translate(calc(100% + 5px), var(--hh)) scale(1) rotate(0deg); opacity: 1; }
    86% { transform: translate(calc(100% + 5px), var(--hh)) scale(1) rotate(0deg); opacity: 0; }
    86.1% { transform: translate(0, 0) scale(1) rotate(0deg); opacity: 0; }
    90%, 100% { transform: translate(0, 0) scale(1) rotate(0deg); opacity: 1; }
}
@keyframes feat-lift { 0%, 10% { opacity: 0; } 15%, 36% { opacity: 1; } 40%, 100% { opacity: 0; } }
@keyframes feat-cursor { 0%, 6% { opacity: 0; } 10%, 40% { opacity: 1; } 46%, 100% { opacity: 0; } }
@keyframes feat-drop { 0%, 12% { opacity: 0; } 16%, 38% { opacity: 1; } 43%, 100% { opacity: 0; } }
@keyframes feat-ask {
    0%, 56% { opacity: 0; transform: translate(-50%, 6px); }
    60%, 78% { opacity: 1; transform: translate(-50%, 0); }
    82%, 100% { opacity: 0; transform: translate(-50%, 6px); }
}

/* ---- Month grid ---- */
.mo { font-size: 10px; }
.mo__head, .mo__grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); }
.mo__head { border-bottom: 1px solid var(--c-border); }
.mo__dow { padding: 6px 4px; text-align: center; font-size: 10px; font-weight: 600; color: var(--c-text-soft); }
.mo__dow--sun { color: var(--c-error); }
.mo__cell { display: flex; flex-direction: column; gap: 2px; min-width: 0; min-height: 58px; padding: 3px 4px 4px; border-left: 1px solid var(--c-border); border-bottom: 1px solid var(--c-border); }
.mo__cell:nth-child(7n + 1) { border-left: 0; }
.mo__num { display: flex; font-weight: 600; line-height: 16px; color: var(--c-ink); }
.mo__cell--out { background: var(--c-surface-low); }
.mo__cell--out .mo__num, .mo__cell--past .mo__num { color: var(--c-text-faint); }
.mo__cell--past { background: var(--c-surface-low); }
.mo__cell--past .mo-chip { opacity: .55; filter: saturate(.4); }
.mo__cell--sun { background: color-mix(in srgb, var(--c-error) 3%, transparent); }
.mo__cell--sun .mo__num { color: var(--c-error); }
.mo__cell--holiday { background: color-mix(in srgb, var(--c-error) 5%, transparent); }
.mo__cell--today { box-shadow: inset 0 0 0 2px var(--c-action); }
.mo__cell--today .mo__num > span { padding: 0 6px; border-radius: var(--r-full); background: var(--c-action); color: var(--c-surface); }
.mo__hol { font-size: 9px; font-weight: 600; color: var(--c-error); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mo-chip { display: block; min-height: 6px; padding: 1px 4px; border-left: 2px solid var(--sc); border-radius: 4px; background: color-mix(in srgb, var(--sc) 14%, transparent); font-size: 9px; line-height: 1.3; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mo__more { font-size: 9px; color: var(--c-text-faint); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* ---- Before / now ---- */
.ba-wrap {
    display: grid;
    grid-template-columns: minmax(0, 1.5fr) minmax(0, .6fr);
    gap: var(--sp-6);
    align-items: center;
    margin-top: clamp(var(--sp-6), 5vw, var(--sp-8));
    padding: clamp(var(--sp-5), 4vw, var(--sp-7));
    background: var(--c-surface-low);
    border: 1px solid var(--c-border);
    border-radius: var(--r-xl);
}
.ba-list { min-width: 0; }
.ba-title { margin: 0 0 var(--sp-3); font-size: var(--fs-h3); }
.ba-row { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1.2fr); gap: var(--sp-3) var(--sp-4); align-items: center; padding: var(--sp-3) 0; border-top: 1px solid var(--c-border-strong); }
.ba-row:last-child { padding-bottom: 0; }
.ba-before, .ba-after { display: flex; align-items: flex-start; gap: var(--sp-2); margin: 0; font-size: var(--fs-sm); line-height: 1.5; }
.ba-before { color: var(--c-text-soft); }
.ba-after { color: var(--c-ink); font-weight: 500; }
.ba-ic { display: inline-grid; place-items: center; flex-shrink: 0; width: 20px; height: 20px; margin-top: 1px; border-radius: 50%; }
.ba-ic--before { background: var(--c-error-tint); color: var(--c-error); }
.ba-ic--after { background: var(--c-success-tint); color: var(--c-success); }
.ba-arrow { display: inline-flex; color: var(--c-text-faint); }
.ba-phone { display: flex; flex-direction: column; align-items: center; gap: var(--sp-3); margin: 0; }
.ba-phone .phone--still { width: min(216px, 62vw); padding: 8px; border-radius: 34px; }
.ba-phone .phone__screen { border-radius: 27px; }
.ba-phone .phone__island { top: 9px; width: 66px; height: 19px; }
.ba-phone figcaption { font-size: var(--fs-sm); font-weight: 600; color: var(--c-text-faint); text-align: center; }

/* ---- The phone: the same day view, one specialist, bottom tab bar ---- */
.feat-ph { display: flex; flex-direction: column; height: 100%; background: var(--c-bg); color: var(--c-text); font-size: 10px; }
.feat-ph__top { display: flex; justify-content: space-between; align-items: center; padding: 32px 12px 6px; }
.feat-ph__title { font-size: 13px; font-weight: 800; color: var(--c-ink); }
.feat-ph__top .cal-av { width: 20px; height: 20px; font-size: 9px; }
.feat-ph__bar { display: flex; justify-content: space-between; align-items: center; gap: 6px; padding: 0 12px 6px; font-size: 10px; }
.feat-ph__bar .cal-tabs__pill { padding: 2px 8px; font-size: 10px; }
.feat-ph__bar .cal-tabs__tab { padding: 2px 8px; font-size: 10px; }
.feat-ph__col-h { display: flex; align-items: center; justify-content: center; gap: 5px; padding: 2px 12px 4px; font-size: 10px; font-weight: 600; color: var(--c-text-soft); border-bottom: 1px solid var(--c-border); }
.feat-ph__col-h .cal-av { width: 16px; height: 16px; font-size: 8px; }
.feat-ph__grid { --hh: 44px; --gut: 30px; position: relative; display: flex; flex: 1; min-height: 0; margin: 0 8px 0 0; padding-top: 6px; overflow: hidden; }
.feat-ph__grid .strip__gutter { flex: 0 0 var(--gut); background: transparent; }
.feat-ph__grid .strip__sub { flex: 1 1 auto; border-left: 1px solid var(--c-border); }
.feat-ph__grid .strip__card { left: 3px; right: 3px; font-size: 10px; }
.feat-ph__tabs { display: flex; justify-content: space-around; margin-top: auto; padding: 6px 2px 12px; border-top: 1px solid var(--c-border); background: var(--c-surface); }
.feat-ph__tab { display: flex; flex-direction: column; align-items: center; gap: 2px; min-width: 0; font-size: 7.5px; font-weight: 600; color: var(--c-text-faint); white-space: nowrap; }
.feat-ph__tab.is-on { color: var(--c-action); }
.feat-ph__tab-ic { position: relative; display: inline-flex; }
.feat-ph__badge { position: absolute; top: -5px; right: -8px; min-width: 13px; height: 13px; padding: 0 3px; border-radius: var(--r-full); background: var(--c-error); color: var(--c-surface); font-size: 8px; font-weight: 700; line-height: 13px; text-align: center; }
.feat-ph__dot { position: absolute; left: -4px; top: -3px; width: 6px; height: 6px; border-radius: 50%; background: var(--c-success); box-shadow: 0 0 0 1.5px var(--c-surface); }

/* ---- Responsive ---- */
@media (max-width: 900px) {
    /* Copy first, then the window (the kept rule puts .cal__demo first). */
    .feat .cal__demo { order: 0; }
    .feat__copy > .feat__hook { max-width: none; }
    .ba-wrap { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 640px) {
    .strip { --hh: 30px; }
    .strip--day { --hh: 44px; }
    .strip--day .strip__day .strip__nm { display: none; }
    .cal-tabs__title { order: 5; flex-basis: 100%; margin: 0; font-size: 10px; }
    .mo__cell { min-height: 50px; padding: 2px 3px 3px; }
    .mo-chip { height: 6px; padding: 0; }
    .mo-chip__t, .mo__hol { display: none; }
    .ba-row { grid-template-columns: minmax(0, 1fr); gap: var(--sp-2); }
    .ba-arrow { display: none; }
}

/* ---- Reduced motion: the strip stands still, the dialog stays hidden ---- */
@media (prefers-reduced-motion: reduce) {
    .strip__card--drag, .strip__card--drag::after, .strip__cursor, .strip__drop, .strip__ask { animation: none !important; }
    .strip__card--drag { transform: none; opacity: 1; }
    .strip__card--drag::after, .strip__cursor, .strip__drop, .strip__ask { opacity: 0; }
}


/* ==== messages ==== */
/* Client language (form field + cycling SMS bubble), the desktop SMS messenger
   window and the mid-page CTA band. Loops: language 12 s (4 scenes x 3 s),
   messenger 10 s. Every loop has a static final state under reduced motion. */

.msg { padding: clamp(var(--sp-8), 7vw, var(--sp-10)) 0; background: var(--c-surface); border-block: 1px solid var(--c-border); overflow: hidden; }
.msg__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(var(--sp-6), 5vw, var(--sp-9)); align-items: center; }
.msg__copy .sec-lead { max-width: none; }
.msg__visual { min-width: 0; }

/* ---- Row 1: the language card pair ---- */
.lang-pair { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); gap: var(--sp-4); align-items: stretch; }

/* The client form field, its select opened */
.lang-card {
    position: relative; display: flex; flex-direction: column; gap: 6px; padding: var(--sp-4);
    background: var(--c-bg); border: 1px solid var(--c-border); border-radius: var(--r-lg); box-shadow: var(--shadow-card);
}
.lang-card__label { font-size: 12px; font-weight: 600; color: var(--c-text-soft); }
.lang-card__field {
    display: flex; align-items: center; justify-content: space-between; gap: var(--sp-2);
    padding: 9px 12px; border-radius: var(--r-sm); background: var(--c-surface);
    border: 1px solid var(--c-action); box-shadow: 0 0 0 3px color-mix(in srgb, var(--c-action) 18%, transparent);
    font-size: 13px; font-weight: 600; color: var(--c-ink);
}
.lang-card__field svg { color: var(--c-text-faint); flex: none; }
.lang-card__vals { position: relative; display: grid; min-width: 0; }
.lang-card__val { grid-area: 1 / 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; opacity: 0; }
.lang-card__val--1 { animation: lang-row-1 12s var(--ease-out) infinite; }
.lang-card__val--2 { animation: lang-row-2 12s var(--ease-out) infinite; }
.lang-card__val--3 { animation: lang-row-3 12s var(--ease-out) infinite; }
.lang-card__val--4 { animation: lang-row-4 12s var(--ease-out) infinite; }

.lang-card__menu {
    --lang-row: 36px;
    position: relative; display: flex; flex-direction: column; padding: 4px;
    background: var(--c-surface); border: 1px solid var(--c-border); border-radius: var(--r-md); box-shadow: var(--shadow-lift);
}
.lang-card__hl {
    position: absolute; left: 4px; right: 4px; top: 4px; height: var(--lang-row); border-radius: var(--r-sm);
    background: var(--c-primary-tint); animation: lang-hl 12s var(--ease-out) infinite;
}
.lang-card__opt {
    position: relative; display: flex; align-items: center; gap: 8px; height: var(--lang-row); padding: 0 10px;
    font-size: 13px; font-weight: 500; color: var(--c-ink);
}
.lang-card__opt-name { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lang-card__opt-check { display: inline-flex; color: var(--c-action); opacity: 0; }
.lang-card__opt-check--1 { animation: lang-row-1 12s var(--ease-out) infinite; }
.lang-card__opt-check--2 { animation: lang-row-2 12s var(--ease-out) infinite; }
.lang-card__opt-check--3 { animation: lang-row-3 12s var(--ease-out) infinite; }
.lang-card__opt-check--4 { animation: lang-row-4 12s var(--ease-out) infinite; }
.lang-card__hint { font-size: 11px; line-height: 1.4; color: var(--c-text-faint); }

/* Language code badge (the "flag") */
.lang-flag {
    flex: none; display: inline-grid; place-items: center; width: 26px; height: 18px; border-radius: 5px;
    font-family: var(--font-mono); font-size: 9px; font-weight: 700; letter-spacing: .06em;
    background: var(--c-primary-tint); color: var(--c-primary);
}
.lang-flag--dark { background: color-mix(in srgb, var(--c-ink) 10%, transparent); color: var(--c-ink); }

/* The phone-style bubble cycling through the four languages */
.lang-bubble {
    display: flex; flex-direction: column; gap: var(--sp-2); padding: var(--sp-3) var(--sp-3) var(--sp-4);
    background: var(--c-surface-low); border: 1px solid var(--c-border); border-radius: var(--r-lg);
}
.lang-bubble__top { display: flex; align-items: center; justify-content: space-between; font-size: 11px; color: var(--c-text-faint); }
.lang-bubble__from { display: inline-flex; align-items: center; gap: 5px; font-weight: 700; color: var(--c-text-soft); }
.lang-bubble__time { font-variant-numeric: tabular-nums; }
.lang-bubble__stage { flex: 1; display: grid; align-content: center; }
.lang-bubble__msg {
    grid-area: 1 / 1; display: flex; flex-direction: column; gap: 6px; padding: 10px 12px;
    background: var(--c-surface); border-radius: var(--r-lg); border-bottom-left-radius: 6px; box-shadow: var(--shadow-card);
    opacity: 0;
}
.lang-bubble__msg p { margin: 0; font-size: 12px; line-height: 1.45; color: var(--c-text); }
.lang-bubble__msg--1 { animation: lang-scene-1 12s var(--ease-out) infinite; }
.lang-bubble__msg--2 { animation: lang-scene-2 12s var(--ease-out) infinite; }
.lang-bubble__msg--3 { animation: lang-scene-3 12s var(--ease-out) infinite; }
.lang-bubble__msg--4 { animation: lang-scene-4 12s var(--ease-out) infinite; }

/* Row highlight slides one row per scene; the check + field value follow. */
@keyframes lang-hl {
    0%, 23% { transform: translateY(0); }
    25%, 48% { transform: translateY(var(--lang-row)); }
    50%, 73% { transform: translateY(calc(var(--lang-row) * 2)); }
    75%, 98% { transform: translateY(calc(var(--lang-row) * 3)); }
    100% { transform: translateY(0); }
}
@keyframes lang-row-1 { 0%, 23% { opacity: 1; } 25%, 98% { opacity: 0; } 100% { opacity: 1; } }
@keyframes lang-row-2 { 0%, 23% { opacity: 0; } 25%, 48% { opacity: 1; } 50%, 100% { opacity: 0; } }
@keyframes lang-row-3 { 0%, 48% { opacity: 0; } 50%, 73% { opacity: 1; } 75%, 100% { opacity: 0; } }
@keyframes lang-row-4 { 0%, 73% { opacity: 0; } 75%, 98% { opacity: 1; } 100% { opacity: 0; } }
@keyframes lang-scene-1 { 0%, 22% { opacity: 1; transform: none; } 25%, 97% { opacity: 0; transform: translateY(6px); } 100% { opacity: 1; transform: none; } }
@keyframes lang-scene-2 { 0%, 22% { opacity: 0; transform: translateY(6px); } 25%, 47% { opacity: 1; transform: none; } 50%, 100% { opacity: 0; transform: translateY(6px); } }
@keyframes lang-scene-3 { 0%, 47% { opacity: 0; transform: translateY(6px); } 50%, 72% { opacity: 1; transform: none; } 75%, 100% { opacity: 0; transform: translateY(6px); } }
@keyframes lang-scene-4 { 0%, 72% { opacity: 0; transform: translateY(6px); } 75%, 97% { opacity: 1; transform: none; } 100% { opacity: 0; transform: translateY(6px); } }

/* Where the language gets set */
.lang-src { display: flex; flex-wrap: wrap; gap: var(--sp-2); margin-top: var(--sp-4); }
.lang-src__chip { gap: 6px; font-family: var(--font-body); letter-spacing: 0; font-weight: 500; }
.lang-src__chip svg { color: var(--c-action); }

/* ---- Row 2: the messenger window ---- */
.msg__messenger { max-width: 1000px; margin: clamp(var(--sp-7), 6vw, var(--sp-9)) auto 0; }
.sms-app { max-width: 100%; }
.sms-app__body { display: grid; grid-template-columns: minmax(0, 290px) minmax(0, 1fr); height: 430px; background: var(--c-bg); }

/* Thread list */
.sms-side { display: flex; flex-direction: column; min-width: 0; border-right: 1px solid var(--c-border); background: var(--c-surface); }
.sms-side__top { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-2); padding: 12px 12px 8px; }
.sms-pill {
    display: inline-flex; align-items: center; gap: 7px; padding: 4px 10px; border-radius: var(--r-full);
    background: var(--c-success-tint); color: var(--c-success); font-size: 11px; font-weight: 700; white-space: nowrap;
}
.sms-dot { position: relative; width: 7px; height: 7px; border-radius: 50%; background: var(--c-success); flex: none; }
.sms-dot::after {
    content: ""; position: absolute; inset: -3px; border-radius: 50%; border: 2px solid var(--c-success);
    opacity: 0; animation: sms-ping 8s var(--ease-out) infinite;
}
.sms-side__new {
    display: inline-flex; align-items: center; gap: 5px; padding: 6px 10px; border-radius: var(--r-sm);
    background: var(--grad-primary); color: var(--c-text-invert); font-size: 11px; font-weight: 600; white-space: nowrap; box-shadow: var(--shadow-btn);
}
.sms-side__search {
    display: flex; align-items: center; gap: 8px; margin: 0 12px 8px; padding: 7px 10px; border-radius: var(--r-sm);
    background: var(--c-surface-low); border: 1px solid var(--c-border); color: var(--c-text-faint); font-size: 12px;
}
.sms-side__list { display: flex; flex-direction: column; min-height: 0; }
.sms-row { display: flex; align-items: flex-start; gap: 10px; padding: 10px 12px; border-top: 1px solid var(--c-border); min-width: 0; }
.sms-row.is-active { background: var(--c-primary-tint); }
.sms-row__av {
    flex: none; width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center;
    background: var(--staff-1); color: var(--c-text-invert); font-size: 11px; font-weight: 700;
}
.sms-row__av--3 { background: var(--staff-8); }
.sms-row__av--unknown { background: var(--c-surface-high); color: var(--c-text-soft); }
.sms-row__main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.sms-row__top, .sms-row__bottom { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-width: 0; }
.sms-row__name { font-size: 13px; font-weight: 700; color: var(--c-ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sms-row__name--num { font-family: var(--font-mono); font-size: 12px; letter-spacing: .02em; }
.sms-row__time { flex: none; font-size: 11px; color: var(--c-text-faint); font-variant-numeric: tabular-nums; }
.sms-row__last { font-size: 12px; color: var(--c-text-soft); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sms-row.is-active .sms-row__last { color: var(--c-ink); font-weight: 600; }
.sms-row__save { flex: none; font-size: 11px; font-weight: 600; color: var(--c-action); text-decoration: underline; text-underline-offset: 2px; white-space: nowrap; }
.sms-row__state { flex: none; font-size: 10px; font-weight: 700; color: var(--c-warning); background: var(--c-warning-tint); padding: 2px 7px; border-radius: var(--r-full); white-space: nowrap; }

/* Unread badge: 1 -> 2 when the reply lands */
.sms-badge {
    position: relative; flex: none; display: inline-grid; place-items: center; min-width: 18px; height: 18px; padding: 0 5px; border-radius: var(--r-full);
    background: var(--c-error); color: var(--c-text-invert); font-size: 11px; font-weight: 700;
}
.sms-badge__n { grid-area: 1 / 1; line-height: 1; }
.sms-badge__n--1 { animation: sms-badge-1 10s var(--ease-out) infinite; }
.sms-badge__n--2 { opacity: 0; animation: sms-badge-2 10s var(--ease-out) infinite; }

/* The open conversation */
.sms-chat { display: flex; flex-direction: column; min-width: 0; min-height: 0; }
.sms-chat__head { display: flex; align-items: center; gap: 10px; padding: 10px 14px; background: var(--c-surface); border-bottom: 1px solid var(--c-border); }
.sms-chat__who { display: flex; flex-direction: column; min-width: 0; }
.sms-chat__name { font-size: 13px; font-weight: 700; color: var(--c-ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sms-chat__num { font-family: var(--font-mono); font-size: 11px; color: var(--c-text-faint); }
.sms-chat__body { flex: 1; min-height: 0; display: flex; flex-direction: column; gap: 10px; padding: 14px 16px; overflow: hidden; }
.sms-date { align-self: center; font-size: 10px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--c-text-faint); }

.sms-bub { position: relative; max-width: min(78%, 420px); display: flex; flex-direction: column; gap: 4px; padding: 9px 12px 7px; border-radius: var(--r-lg); font-size: 12.5px; line-height: 1.45; }
.sms-bub--in { align-self: flex-start; background: var(--c-surface); color: var(--c-text); border-bottom-left-radius: 6px; box-shadow: var(--shadow-card); }
.sms-bub--out { align-self: flex-end; background: var(--grad-primary); color: var(--c-text-invert); border-bottom-right-radius: 6px; box-shadow: var(--shadow-card); }
.sms-bub--auto { background: var(--c-surface); color: var(--c-text-soft); border: 1px dashed var(--c-border-strong); box-shadow: none; }
.sms-bub__text { overflow-wrap: anywhere; }
.sms-bub__tag { display: inline-flex; align-items: center; gap: 4px; font-size: 10px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--c-text-faint); }
.sms-bub__link { color: var(--c-action); text-decoration: underline; text-underline-offset: 2px; word-break: break-all; }
.sms-bub__meta { font-size: 10px; color: var(--c-text-faint); text-align: right; font-variant-numeric: tabular-nums; }
.sms-bub--out:not(.sms-bub--auto) .sms-bub__meta { color: color-mix(in srgb, var(--c-text-invert) 80%, transparent); }
.sms-bub--reply { min-width: 72px; font-weight: 700; transform-origin: 0 100%; animation: sms-pop 10s var(--ease-spring) infinite; }
.sms-bub--salon { transform-origin: 100% 100%; animation: sms-out 10s var(--ease-out) infinite; }
.sms-sys { align-self: center; display: inline-flex; align-items: center; gap: 5px; padding: 4px 10px; border-radius: var(--r-full); background: var(--c-success-tint); color: var(--c-success); font-size: 11px; font-weight: 700; animation: sms-sys 10s var(--ease-out) infinite; }

/* Composer */
.sms-box { display: flex; align-items: center; gap: 10px; padding: 10px 12px; background: var(--c-surface); border-top: 1px solid var(--c-border); }
.sms-box__input { flex: 1; min-width: 0; padding: 9px 12px; border-radius: var(--r-sm); border: 1px solid var(--c-border-strong); background: var(--c-surface); font-size: 12px; color: var(--c-text-faint); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sms-box__side { display: flex; align-items: center; gap: 10px; flex: none; }
.sms-count { font-family: var(--font-mono); font-size: 10px; letter-spacing: .03em; color: var(--c-text-faint); white-space: nowrap; }
.sms-box__send { display: grid; place-items: center; width: 34px; height: 34px; border-radius: var(--r-sm); background: var(--grad-primary); color: var(--c-text-invert); box-shadow: var(--shadow-btn); }

/* 10 s loop: reply at 2 s, confirmation at 3 s, salon answer at 5 s. */
@keyframes sms-pop { 0%, 19% { opacity: 0; transform: scale(.6); } 23%, 94% { opacity: 1; transform: scale(1); } 100% { opacity: 0; transform: scale(.6); } }
@keyframes sms-sys { 0%, 29% { opacity: 0; transform: translateY(6px); } 33%, 94% { opacity: 1; transform: none; } 100% { opacity: 0; transform: translateY(6px); } }
@keyframes sms-out { 0%, 49% { opacity: 0; transform: scaleX(.3); } 53%, 94% { opacity: 1; transform: scaleX(1); } 100% { opacity: 0; transform: scaleX(.3); } }
@keyframes sms-badge-1 { 0%, 19% { opacity: 1; } 21%, 100% { opacity: 0; } }
@keyframes sms-badge-2 { 0%, 19% { opacity: 0; } 21%, 100% { opacity: 1; } }
@keyframes sms-ping {
    0%, 5%, 25%, 30%, 50%, 55%, 75%, 80%, 100% { opacity: 0; transform: scale(1); }
    6%, 31%, 56%, 81% { opacity: .8; transform: scale(1); }
    22%, 47%, 72%, 97% { opacity: 0; transform: scale(2.2); }
}

/* Under the frame: remaining ticks + the plan note */
.msg__after { max-width: 1000px; margin: var(--sp-6) auto 0; }
.msg__ticks { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--sp-3) var(--sp-6); margin-top: 0; }
.msg__note {
    display: flex; align-items: flex-start; gap: var(--sp-2); margin: var(--sp-5) 0 0; padding: var(--sp-3) var(--sp-4);
    border-radius: var(--r-md); background: var(--c-surface-low); border: 1px solid var(--c-border);
    color: var(--c-text-soft); font-size: var(--fs-sm); line-height: 1.55;
}
.msg__note svg { flex: none; margin-top: 2px; color: var(--c-action); }

/* ---- Mid-page CTA band ---- */
.msg-midcta {
    display: flex; flex-direction: column; align-items: center; gap: var(--sp-5); text-align: center;
    max-width: 1000px; margin: clamp(var(--sp-7), 6vw, var(--sp-9)) auto 0; padding: clamp(var(--sp-6), 5vw, var(--sp-8)) var(--sp-5);
    background: var(--grad-primary-soft); border: 1px solid color-mix(in srgb, var(--c-action) 18%, transparent); border-radius: var(--r-xl);
}
.msg-midcta__text { margin: 0; max-width: 62ch; font-size: clamp(var(--fs-body-lg), 1.6vw, 1.3rem); font-weight: 600; line-height: 1.5; color: var(--c-ink); letter-spacing: -0.01em; }
.msg-midcta__actions { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--sp-3); }

/* ---- Responsive ---- */
@media (max-width: 900px) {
    .msg__grid { grid-template-columns: minmax(0, 1fr); gap: var(--sp-6); }
    .msg__copy { order: -1; }
    .sms-app__body { grid-template-columns: minmax(0, 240px) minmax(0, 1fr); }
    .sms-side__new { display: none; }
}
@media (max-width: 640px) {
    .lang-pair { grid-template-columns: minmax(0, 1fr); }
    .lang-bubble { padding-block: var(--sp-4); }
    /* The thread list becomes a strip above the conversation. */
    .sms-app__body { grid-template-columns: minmax(0, 1fr); height: auto; }
    .sms-side { border-right: 0; border-bottom: 1px solid var(--c-border); }
    .sms-side__search { display: none; }
    .sms-side__list { flex-direction: row; gap: 8px; padding: 0 12px 12px; }
    .sms-row { position: relative; flex: 1 1 0; flex-direction: column; align-items: stretch; gap: 6px; padding: 8px; border: 1px solid var(--c-border); border-radius: var(--r-md); background: var(--c-surface); }
    .sms-row.is-active { border-color: var(--c-action); }
    .sms-row__av { width: 24px; height: 24px; font-size: 9px; }
    .sms-row__time, .sms-row__save { display: none; }
    .sms-row__bottom { flex-direction: column; align-items: flex-start; gap: 4px; }
    .sms-row__last { width: 100%; }
    .sms-row__state { max-width: 100%; overflow: hidden; text-overflow: ellipsis; }
    .sms-badge { position: absolute; top: 8px; right: 8px; }
    .sms-row__name { font-size: 12px; }
    .sms-chat__body { min-height: 300px; padding: 12px; }
    .sms-bub { max-width: 90%; }
    .sms-count { display: none; }
    .msg__ticks { grid-template-columns: minmax(0, 1fr); }
    .msg-midcta__actions { flex-direction: column; width: 100%; }
    .msg-midcta__actions .btn { width: 100%; white-space: normal; text-align: center; }
}

/* ---- Reduced motion: final states, no loops ---- */
@media (prefers-reduced-motion: reduce) {
    .lang-card__val, .lang-card__opt-check, .lang-card__hl, .lang-bubble__msg,
    .sms-dot::after, .sms-badge__n, .sms-bub--reply, .sms-bub--salon, .sms-sys { animation: none !important; }
    /* Language: the Lithuanian scene only. */
    .lang-card__hl { transform: none; }
    .lang-card__val--1, .lang-card__opt-check--1, .lang-bubble__msg--1 { opacity: 1; }
    .lang-card__val--2, .lang-card__val--3, .lang-card__val--4,
    .lang-card__opt-check--2, .lang-card__opt-check--3, .lang-card__opt-check--4,
    .lang-bubble__msg--2, .lang-bubble__msg--3, .lang-bubble__msg--4 { opacity: 0; }
    /* Messenger: the finished conversation, two unread. */
    .sms-dot::after { opacity: 0; }
    .sms-badge__n--1 { opacity: 0; }
    .sms-badge__n--2 { opacity: 1; }
    .sms-bub--reply, .sms-bub--salon, .sms-sys { opacity: 1; transform: none; }
}


/* ==== team ==== */
/* Section "team" (#mobile): copy left; right, a composition of the working-hours
   card (behind), the specialist's own phone calendar (front) and the calendar
   sync card (under both). Below 900px it stacks: copy, phone, hours, sync. */

/* ---- Section + grid ---- */
.team { padding-block: var(--sp-9); overflow: hidden; }
.team__grid {
    display: grid;
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
    gap: var(--sp-8);
    align-items: center;
}
.team__copy { max-width: 580px; }
.team__copy .chip { margin-bottom: var(--sp-4); }
.team__copy .sec-lead { max-width: 52ch; }
.team__ticks li { font-size: 0.9375rem; line-height: 1.5; }
.team__fine { margin: var(--sp-5) 0 0; max-width: 56ch; font-size: var(--fs-sm); line-height: 1.55; color: var(--c-text-faint); }
.team__note {
    display: flex; align-items: flex-start; gap: var(--sp-2);
    margin: var(--sp-4) 0 0; padding: 10px 14px;
    border-left: 3px solid var(--c-action); border-radius: 0 var(--r-sm) var(--r-sm) 0;
    background: color-mix(in srgb, var(--c-action) 6%, transparent);
    font-size: var(--fs-sm); line-height: 1.5; color: var(--c-text-soft);
}
.team__note svg { flex: none; margin-top: 2px; color: var(--c-action); }
.team__cta { margin: var(--sp-5) 0 0; }

/* ---- Stage: the overlapping composition ---- */
.team__stage { position: relative; width: min(100%, 520px); margin-inline: auto; padding-top: 44px; }
.team__stage::before {
    content: ""; position: absolute; inset: 6% -12% 0; z-index: 0; pointer-events: none;
    background: radial-gradient(closest-side, color-mix(in srgb, var(--c-action) 13%, transparent), transparent 72%);
}
.team__stage .phone { position: relative; z-index: 2; margin-left: auto; margin-right: 0; }
.team__stage .hrs { position: absolute; top: 0; left: 0; z-index: 1; width: min(268px, 58%); }
.team__stage .sync { position: relative; z-index: 3; width: min(100%, 460px); margin: -22px auto 0; }

/* ---- Working-hours card ---- */
.hrs {
    position: relative;
    padding: 14px 16px 12px 14px;
    background: var(--c-surface); border: 1px solid var(--c-border); border-radius: var(--r-lg);
    box-shadow: var(--shadow-lift);
    font-family: var(--font-body); color: var(--c-text);
}
.hrs__head { display: grid; grid-template-columns: minmax(0, 1fr) auto; row-gap: 4px; column-gap: 8px; align-items: center; margin-bottom: 10px; }
.hrs__title { font-weight: 700; font-size: 12px; color: var(--c-ink); letter-spacing: -0.01em; }
.hrs__legend { display: inline-flex; align-items: center; gap: 6px; font-size: 9.5px; color: var(--c-text-faint); }

/* Month mini-strip (five weeks) in the head's right corner: odd weeks tinted, even weeks plain, so the parity idea is visible. */
.hrs__weeks { grid-column: 2; grid-row: 1 / span 2; display: flex; gap: 3px; align-self: start; }
.hrs__weeks i { display: block; width: 7px; height: 20px; border-radius: 3px; background: var(--c-surface-high); }
.hrs__weeks i:nth-child(odd) { background: color-mix(in srgb, var(--c-action) 32%, transparent); }

.hrs__rows { display: flex; flex-direction: column; gap: 5px; }
.hrs__row {
    display: grid; grid-template-columns: 22px 24px minmax(0, 1fr); column-gap: 8px; align-items: center;
    padding: 4px 0; border-bottom: 1px solid var(--c-border);
}
.hrs__row:last-child { border-bottom: 0; }
.hrs__row--off { opacity: .6; }
.hrs__switch { position: relative; width: 22px; height: 12px; border-radius: var(--r-full); background: var(--c-surface-high); }
.hrs__switch::after {
    content: ""; position: absolute; top: 2px; left: 2px; width: 8px; height: 8px; border-radius: 50%;
    background: var(--c-surface); box-shadow: var(--shadow-card);
}
.hrs__switch.is-on { background: var(--c-action); }
.hrs__switch.is-on::after { transform: translateX(10px); }
.hrs__day { font-size: 10px; font-weight: 700; color: var(--c-text-soft); text-transform: uppercase; letter-spacing: .02em; }
.hrs__tl { display: flex; align-items: center; min-width: 0; }
.hrs__int {
    flex: 0 1 auto; min-width: 0; padding: 3px 6px; border-radius: 6px;
    background: color-mix(in srgb, var(--c-action) 12%, transparent); color: var(--c-primary);
    font-family: var(--font-mono); font-size: 9px; font-weight: 600; letter-spacing: 0; line-height: 1.3;
    font-variant-numeric: tabular-nums; white-space: nowrap;
}
/* The automatic lunch gap: a hatched break between two intervals. */
.hrs__lunch {
    flex: 0 0 14px; height: 8px; border-radius: 3px;
    background: repeating-linear-gradient(135deg, color-mix(in srgb, var(--c-text-faint) 50%, transparent) 0 2px, transparent 2px 5px);
}
.hrs__lunch--legend { flex: none; width: 18px; }
.hrs__off { font-size: 9.5px; font-style: italic; color: var(--c-text-faint); }
.hrs__tags { grid-column: 3; display: flex; margin-top: 2px; }
.hrs__tags--end { justify-content: flex-end; }
.hrs__tag {
    display: inline-flex; align-items: center; gap: 4px; padding: 1px 6px; border-radius: var(--r-full);
    background: var(--c-primary-tint); color: var(--c-primary); font-size: 8.5px; font-weight: 600; white-space: nowrap;
}
.hrs__tag::before { content: ""; width: 4px; height: 4px; border-radius: 50%; background: currentColor; }
.hrs__foot { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 10px; padding-top: 10px; border-top: 1px dashed var(--c-border-strong); }
.hrs__note {
    display: inline-flex; align-items: center; gap: 5px; padding: 3px 8px; border-radius: var(--r-full);
    font-size: 9px; font-weight: 600; line-height: 1.3;
}
.hrs__note svg { flex: none; }
.hrs__note--off { background: var(--c-warning-tint); color: var(--c-warning); }
.hrs__note--holiday { background: var(--c-info-tint); color: var(--c-info); }

/* ---- Phone: a neutral native-looking calendar ---- */
.ph-native {
    --team-svc-1: #635bff;
    --team-svc-2: #f09300;
    --team-svc-3: #039be5;
    position: absolute; inset: 0; display: flex; flex-direction: column;
    background: var(--c-surface); color: var(--c-text); font-family: var(--font-body);
}
.ph-native__bar { display: flex; align-items: center; justify-content: space-between; padding: 46px 16px 6px; }
.ph-native__title { font-size: 15px; font-weight: 700; letter-spacing: -0.01em; color: var(--c-ink); }
.ph-native__btns { display: flex; gap: 6px; }
.ph-native__btn { width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; background: var(--c-surface-low); color: var(--c-text-soft); }
.ph-native__week { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); padding: 4px 10px 8px; text-align: center; border-bottom: 1px solid var(--c-border); }
.ph-native__day { display: flex; flex-direction: column; align-items: center; gap: 3px; }
.ph-native__wd { font-size: 9px; font-weight: 600; color: var(--c-text-faint); }
.ph-native__num { width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; font-size: 13px; font-weight: 600; font-variant-numeric: tabular-nums; }
.ph-native__day.is-today .ph-native__num { background: var(--c-ink); color: var(--c-surface); }
.ph-native__mark { width: 4px; height: 4px; border-radius: 50%; background: var(--c-action); opacity: 0; }
.ph-native__mark.is-on { opacity: 1; }
.ph-native__cal { display: flex; align-items: center; gap: 9px; margin: 10px 12px 6px; padding: 8px 10px; border-radius: 12px; background: var(--c-surface-low); }
.ph-native__cal-ic { flex: none; width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; background: color-mix(in srgb, var(--c-action) 14%, transparent); color: var(--c-action); }
.ph-native__cal-txt { display: flex; flex-direction: column; gap: 1px; min-width: 0; flex: 1; }
.ph-native__cal-name { font-size: 12px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ph-native__cal-sub { font-size: 9.5px; color: var(--c-text-faint); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ph-native__cal-dot { flex: none; width: 10px; height: 10px; border-radius: 50%; background: var(--c-action); box-shadow: 0 0 0 3px color-mix(in srgb, var(--c-action) 18%, transparent); }
.ph-native__h { padding: 6px 16px 2px; font-size: 9.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--c-text-faint); }
.ph-native__list { display: flex; flex-direction: column; gap: 10px; padding: 2px 10px 0; }
.ph-native__row {
    position: relative; display: grid; grid-template-columns: 34px 8px minmax(0, 1fr); column-gap: 8px; align-items: start;
    padding: 7px 6px; border-radius: 10px;
}
.ph-native__row::after { content: ""; position: absolute; inset: 0; border-radius: 10px; background: color-mix(in srgb, var(--c-action) 10%, transparent); opacity: 0; pointer-events: none; }
.ph-native__time { font-size: 11px; font-weight: 600; font-variant-numeric: tabular-nums; color: var(--c-text-soft); line-height: 1.4; }
.ph-native__time--flip { display: grid; }
.ph-native__time-a, .ph-native__time-b { grid-area: 1 / 1; }
.ph-native__time-b { opacity: 0; }
.ph-native__dot { width: 8px; height: 8px; border-radius: 50%; margin-top: 4px; }
.ph-native__dot--1 { background: var(--team-svc-1); }
.ph-native__dot--2 { background: var(--team-svc-2); }
.ph-native__dot--3 { background: var(--team-svc-3); }
.ph-native__txt { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.ph-native__name { font-size: 12px; font-weight: 600; line-height: 1.3; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ph-native__sub { font-size: 10px; color: var(--c-text-faint); line-height: 1.3; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ph-native__sub--link { display: inline-flex; align-items: center; gap: 4px; color: var(--c-info); }
.ph-native__toast {
    position: absolute; left: 16px; right: 16px; bottom: 44px; z-index: 2;
    display: flex; align-items: center; justify-content: center; gap: 6px; padding: 9px 12px; border-radius: 12px;
    background: var(--c-ink); color: var(--c-text-invert); font-size: 11px; font-weight: 600; box-shadow: var(--shadow-lift);
    opacity: 0; transform: translateY(8px);
}
.ph-native__toast svg { color: var(--c-cyan); }
.ph-native__home { position: absolute; bottom: 8px; left: 50%; width: 96px; height: 4px; border-radius: 4px; background: var(--c-surface-high); transform: translateX(-50%); }

/* One 9 s loop: at 3 s the 11:30 visit is moved to 12:00 in DEK; the row slides,
   the time flips, a tint flashes and the toast confirms. Transform/opacity only. */
.ph-native__row--moves { animation: team-move 9s var(--ease-out) infinite; }
.ph-native__row--moves::after { animation: team-flash 9s var(--ease-out) infinite; }
.ph-native__time-a { animation: team-time-a 9s var(--ease-out) infinite; }
.ph-native__time-b { animation: team-time-b 9s var(--ease-out) infinite; }
.ph-native__toast { animation: team-toast 9s var(--ease-out) infinite; }
@keyframes team-move { 0%, 33% { transform: translateY(0); } 38%, 93% { transform: translateY(10px); } 100% { transform: translateY(0); } }
@keyframes team-flash { 0%, 33% { opacity: 0; } 37% { opacity: 1; } 62%, 100% { opacity: 0; } }
@keyframes team-time-a { 0%, 33% { opacity: 1; } 37%, 93% { opacity: 0; } 100% { opacity: 1; } }
@keyframes team-time-b { 0%, 33% { opacity: 0; } 37%, 93% { opacity: 1; } 100% { opacity: 0; } }
@keyframes team-toast {
    0%, 36% { opacity: 0; transform: translateY(8px); }
    41%, 74% { opacity: 1; transform: translateY(0); }
    80%, 100% { opacity: 0; transform: translateY(8px); }
}

/* ---- Calendar sync card (the real team-member form) ---- */
.sync {
    display: flex; flex-direction: column; gap: 8px; padding: 12px 14px;
    background: var(--c-surface); border: 1px solid var(--c-border); border-radius: var(--r-lg);
    box-shadow: var(--shadow-lift); font-family: var(--font-body); color: var(--c-text);
}
.sync__head { display: flex; align-items: center; gap: 8px; }
.sync__ic { width: 24px; height: 24px; border-radius: 7px; display: grid; place-items: center; background: color-mix(in srgb, var(--c-action) 12%, transparent); color: var(--c-action); }
.sync__title { font-size: 12px; font-weight: 700; color: var(--c-ink); }
.sync__row { display: flex; align-items: center; gap: 6px; min-width: 0; }
.sync__link {
    flex: 1; min-width: 0; padding: 6px 10px; border: 1px solid var(--c-border-strong); border-radius: var(--r-sm);
    font-family: var(--font-mono); font-size: 10.5px; color: var(--c-text-soft); letter-spacing: .02em;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.sync__actions { display: flex; flex-wrap: wrap; gap: 6px; }
.sync .sync__btn { padding: 5px 10px; font-size: 10.5px; border-radius: 7px; pointer-events: none; }

/* ---- Responsive ---- */
@media (max-width: 1100px) {
    .team__grid { grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: var(--sp-6); }
    .team__stage .hrs { width: min(236px, 62%); }
    .hrs__row { grid-template-columns: 20px 22px minmax(0, 1fr); column-gap: 6px; }
    .hrs__switch { width: 20px; }
    .hrs__switch.is-on::after { transform: translateX(8px); }
    .hrs__int { font-size: 8.5px; padding: 3px 5px; }
    .hrs__lunch { flex-basis: 10px; }
}
@media (max-width: 900px) {
    .team { padding-block: var(--sp-8); }
    .team__grid { grid-template-columns: minmax(0, 1fr); gap: var(--sp-6); }
    .team__copy { max-width: none; }
    .team__stage { display: flex; flex-direction: column; align-items: center; gap: var(--sp-5); width: 100%; padding-top: 0; }
    .team__stage::before { inset: 0 -12%; }
    .team__stage .phone { order: 1; margin: 0; }
    .team__stage .hrs { order: 2; position: static; width: min(320px, 100%); }
    .team__stage .sync { order: 3; margin: 0; width: min(100%, 420px); }
    .hrs__row { grid-template-columns: 22px 26px minmax(0, 1fr); column-gap: 8px; }
    .hrs__switch { width: 22px; }
    .hrs__switch.is-on::after { transform: translateX(10px); }
    .hrs__int { font-size: 9.5px; padding: 3px 7px; }
    .hrs__lunch { flex-basis: 16px; }
}
@media (max-width: 640px) {
    .team { padding-block: var(--sp-7); }
    .team__stage { gap: var(--sp-4); }
    .sync__actions .sync__btn { flex: 1 1 auto; justify-content: center; }
}

/* ---- Reduced motion: the moved visit's final state, no loops ---- */
@media (prefers-reduced-motion: reduce) {
    .ph-native__row--moves, .ph-native__row--moves::after,
    .ph-native__time-a, .ph-native__time-b, .ph-native__toast { animation: none !important; }
    .ph-native__row--moves { transform: translateY(10px); }
    .ph-native__row--moves::after { opacity: 0; }
    .ph-native__time-a { opacity: 0; }
    .ph-native__time-b { opacity: 1; }
    .ph-native__toast { opacity: 1; transform: none; }
}


/* ==== campaigns ==== */
/* Email campaigns: a replica of the composer (editor + live preview) in a
   browser window on the left, the copy on the right. One 6 s loop: the {fname}
   tag in the editor resolves into the client's name in the preview, then the
   unsubscribe link is ringed once. Under 640px only the preview pane shows. */

/* ---- Section + grid ---- */
.camp { padding: clamp(var(--sp-8), 7vw, var(--sp-10)) 0; overflow: hidden; }
.camp__grid {
    display: grid;
    grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
    gap: clamp(var(--sp-6), 5vw, var(--sp-9));
    align-items: center;
}
.camp__copy { display: flex; flex-direction: column; gap: var(--sp-5); min-width: 0; }
.camp__intro .ticks { margin-top: var(--sp-2); }
.camp__intro .ticks li { line-height: 1.5; }
.camp__intro .sec-lead { margin-bottom: var(--sp-4); }

/* Plan note: a small soft panel so the limits read as a fact, not fine print. */
.camp__note {
    display: flex; align-items: flex-start; gap: var(--sp-3);
    margin: 0; padding: var(--sp-3) var(--sp-4);
    border-radius: var(--r-md); border: 1px solid var(--c-border);
    background: color-mix(in srgb, var(--c-action) 6%, var(--c-surface));
    color: var(--c-text-soft); font-size: var(--fs-sm); line-height: 1.55;
}
.camp__note svg { flex: 0 0 auto; margin-top: 2px; color: var(--c-action); }

.camp__links { display: flex; flex-wrap: wrap; gap: var(--sp-2) var(--sp-5); margin: var(--sp-3) 0 0; }
.camp__link {
    display: inline-flex; align-items: center; gap: 6px;
    color: var(--c-action); font-weight: 600; font-size: var(--fs-sm);
    text-decoration: underline; text-underline-offset: 3px; text-decoration-color: color-mix(in srgb, var(--c-action) 40%, transparent);
    transition: text-decoration-color var(--t-fast) var(--ease-out);
}
.camp__link:hover { text-decoration-color: var(--c-action); }
.camp__link svg { flex: 0 0 auto; color: var(--c-text-faint); }

/* ---- Mockup wrapper ---- */
.camp__demo { min-width: 0; }
.camp__mock { position: relative; }
.camp__mock::before {
    content: ""; position: absolute; inset: 8% -6% -4% -6%; z-index: 0; pointer-events: none;
    border-radius: var(--r-xl);
    background: radial-gradient(60% 60% at 30% 40%, color-mix(in srgb, var(--c-action) 14%, transparent), transparent 70%),
                radial-gradient(50% 60% at 80% 70%, color-mix(in srgb, var(--c-cyan) 10%, transparent), transparent 70%);
    filter: blur(10px);
}
.camp__win { position: relative; z-index: 1; width: 100%; max-width: 100%; }

/* ---- Composer: two panes inside the window ---- */
.camp-ed {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    min-width: 0;
}
.camp-ed__editor {
    display: flex; flex-direction: column; gap: 10px;
    padding: 14px;
    border-right: 1px solid var(--c-border);
    min-width: 0;
}

.camp-ed__field { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.camp-ed__label {
    font-size: 10px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
    color: var(--c-text-faint);
}
.camp-ed__input {
    display: block; padding: 6px 9px; min-width: 0;
    border: 1px solid var(--c-border-strong); border-radius: var(--r-sm);
    background: var(--c-surface); color: var(--c-text);
    font-size: 11.5px; font-weight: 500; line-height: 1.3;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

/* Audience: a locked pill (the audience is fixed to consented clients). */
.camp-ed__aud { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.camp-ed__aud-pill {
    display: inline-flex; align-items: center; gap: 5px; align-self: flex-start; max-width: 100%;
    padding: 4px 9px; border-radius: var(--r-full);
    background: var(--c-info-tint); color: var(--c-info);
    font-size: 11px; font-weight: 600; line-height: 1.3;
}
.camp-ed__aud-pill svg { flex: 0 0 auto; }
.camp-ed__aud-note { font-size: 10px; color: var(--c-text-faint); line-height: 1.4; }

/* Blocks: the same bar + body shape as the real block editor. */
.camp-ed__blocks { display: flex; flex-direction: column; gap: 6px; }
.camp-ed__block {
    border: 1px solid var(--c-border); border-radius: var(--r-sm);
    background: var(--c-surface); overflow: hidden; min-width: 0;
}
.camp-ed__block-bar {
    display: flex; align-items: center; gap: 5px;
    padding: 4px 8px; background: var(--c-surface-low); border-bottom: 1px solid var(--c-border);
    font-size: 10px; font-weight: 600; color: var(--c-text-soft);
}
.camp-ed__block-bar svg { color: var(--c-text-faint); }
.camp-ed__block-body { display: block; padding: 7px 8px; font-size: 11px; line-height: 1.45; color: var(--c-text); }
.camp-ed__block-body--h { font-weight: 800; font-size: 12px; color: var(--c-ink); }
.camp-ed__btn-field {
    display: inline-block; padding: 4px 10px; border-radius: var(--r-sm);
    background: var(--c-primary-tint); color: var(--c-primary); font-weight: 600; font-size: 10.5px;
}

/* The merge tag: a small chip, in the editor and in the preview alike. */
.camp-ed__tag {
    display: inline-block; padding: 1px 6px; border-radius: 5px;
    background: var(--c-primary-tint); color: var(--c-primary);
    font-family: var(--font-mono); font-size: 10px; font-weight: 600; line-height: 1.5;
    vertical-align: 1px;
}
.camp-ed__tag--pulse { animation: camp-tag-pulse 6s var(--ease-out) infinite; }

/* ---- Preview pane: the email on the mail client's grey backdrop ---- */
.camp-ed__preview { padding: 14px; background: var(--c-surface-low); min-width: 0; display: flex; }
.camp-ed__mail {
    width: 100%; align-self: flex-start; min-width: 0;
    display: flex; flex-direction: column; gap: 8px;
    padding: 16px 16px 12px;
    background: var(--c-surface); border-radius: var(--r-md); border: 1px solid var(--c-border);
    box-shadow: var(--shadow-card);
    font-size: 11.5px; line-height: 1.5; color: var(--c-text);
}
.camp-ed__brand { display: flex; align-items: center; gap: 8px; padding-bottom: 8px; border-bottom: 1px solid var(--c-border); }
.camp-ed__logo {
    flex: 0 0 auto; width: 26px; height: 26px; border-radius: 50%;
    display: grid; place-items: center;
    background: var(--grad-primary); color: var(--c-surface);
    font-family: var(--font-heading); font-weight: 800; font-size: 12px;
}
.camp-ed__salon { font-weight: 700; font-size: 11.5px; color: var(--c-ink); }
.camp-ed__eh { font-family: var(--font-heading); font-weight: 800; font-size: 15px; letter-spacing: -0.01em; color: var(--c-ink); margin-top: 2px; }

/* Greeting: two layers in one slot, cross-faded by the loop. */
.camp-ed__hello { position: relative; min-height: 1.6em; }
.camp-ed__hello-tag, .camp-ed__hello-name { position: absolute; left: 0; top: 0; white-space: nowrap; }
.camp-ed__hello-tag { animation: camp-hello-tag 6s var(--ease-out) infinite; }
.camp-ed__hello-name { font-weight: 600; animation: camp-hello-name 6s var(--ease-out) infinite; }
.camp-ed__body { margin: 0; color: var(--c-text-soft); }
.camp-ed__btn {
    align-self: flex-start; margin-top: 2px; padding: 7px 14px; border-radius: var(--r-sm);
    background: var(--c-action); color: var(--c-surface); font-weight: 600; font-size: 11px;
    box-shadow: var(--shadow-btn);
}
.camp-ed__foot { margin-top: auto; padding-top: 12px; border-top: 1px solid var(--c-border); }
.camp-ed__unsub-wrap { position: relative; display: inline-flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.camp-ed__unsub {
    position: relative; font-size: 10.5px; color: var(--c-text-faint);
    text-decoration: underline; text-underline-offset: 2px;
}
/* The one-shot ring: a green outline that appears once per loop. */
.camp-ed__unsub::after {
    content: ""; position: absolute; inset: -4px -6px; border-radius: 6px;
    border: 2px solid var(--c-success); opacity: 0;
    animation: camp-ring 6s var(--ease-out) infinite;
}
.camp-ed__unsub-label {
    display: inline-flex; align-items: center; gap: 3px;
    padding: 2px 7px; border-radius: var(--r-full);
    background: var(--c-success-tint); color: var(--c-success);
    font-size: 9.5px; font-weight: 700; letter-spacing: .02em; white-space: nowrap;
}

/* ---- Stats strip under the window ---- */
.camp__stats { position: relative; z-index: 1; display: flex; flex-wrap: wrap; justify-content: center; gap: var(--sp-2); margin-top: var(--sp-4); }
.camp__stat {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 6px 12px; border-radius: var(--r-full);
    background: var(--c-surface); border: 1px solid var(--c-border); box-shadow: var(--shadow-card);
    font-size: 12px; font-weight: 600; color: var(--c-ink); font-variant-numeric: tabular-nums;
}
.camp__stat svg { flex: 0 0 auto; }
.camp__stat--sent svg { color: var(--c-success); }
.camp__stat--open svg { color: var(--c-info); }
.camp__stat--click svg { color: var(--c-action); }

/* ---- Motion (6 s loop; transform/opacity only) ---- */
@keyframes camp-tag-pulse {
    0%, 22% { transform: scale(1); }
    28% { transform: scale(1.12); }
    34%, 100% { transform: scale(1); }
}
@keyframes camp-hello-tag {
    0%, 30% { opacity: 1; transform: translateY(0); }
    38%, 92% { opacity: 0; transform: translateY(-6px); }
    100% { opacity: 1; transform: translateY(0); }
}
@keyframes camp-hello-name {
    0%, 30% { opacity: 0; transform: translateY(6px); }
    38%, 92% { opacity: 1; transform: translateY(0); }
    100% { opacity: 0; transform: translateY(6px); }
}
@keyframes camp-ring {
    0%, 56% { opacity: 0; transform: scale(0.92); }
    62%, 74% { opacity: 1; transform: scale(1); }
    80%, 100% { opacity: 0; transform: scale(1.06); }
}

/* ---- Responsive ---- */
@media (max-width: 1100px) {
    .camp-ed__editor { padding: 12px; }
    .camp-ed__preview { padding: 12px; }
}
@media (max-width: 900px) {
    .camp__grid { grid-template-columns: minmax(0, 1fr); gap: var(--sp-6); }
    /* Copy first, the window next, the note and links last. */
    .camp__copy { display: contents; }
    .camp__intro { order: -1; }
    .camp__demo { order: 0; }
    .camp__foot { order: 1; }
    .camp__intro .sec-lead { max-width: none; }
    .camp__mock::before { inset: 8% 0 -4% 0; }
}
@media (max-width: 640px) {
    .camp { padding: var(--sp-7) 0; }
    /* Only the email preview fits a phone: the editor pane is hidden. */
    .camp-ed { grid-template-columns: minmax(0, 1fr); }
    .camp-ed__editor { display: none; }
    .camp-ed__preview { padding: 14px 12px; }
    .camp-ed__mail { padding: 14px 14px 12px; }
    .camp__stat { font-size: 11px; padding: 5px 10px; }
}

/* ---- Reduced motion: the resolved state, the ring shown as a still outline ---- */
@media (prefers-reduced-motion: reduce) {
    .camp-ed__tag--pulse, .camp-ed__hello-tag, .camp-ed__hello-name, .camp-ed__unsub::after { animation: none !important; }
    .camp-ed__tag--pulse { transform: none; }
    .camp-ed__hello-tag { opacity: 0; }
    .camp-ed__hello-name { opacity: 1; transform: none; }
    .camp-ed__unsub::after { opacity: 1; transform: none; }
}


/* ==== start ==== */
/* Three steps (kept .how / .how__steps / .how__step / .how__num) drawn as
   cards, then the two-column band with the /app/help mockup (.help-card)
   and the manual copy, then the centred CTA row with the micro line. */

/* ---- Heading ---- */
.start__lead { margin-inline: auto; max-width: 52ch; }

/* ---- Step cards ---- */
.start__step {
    padding: var(--sp-6);
    background: var(--c-bg);
    border: 1px solid var(--c-border);
    border-radius: var(--r-xl);
    transition: border-color var(--t-med) var(--ease-out), transform var(--t-med) var(--ease-out), box-shadow var(--t-med) var(--ease-out);
}
.start__step:hover { border-color: var(--c-primary-tint); transform: translateY(-2px); box-shadow: var(--shadow-card); }
.start__step-head { position: relative; height: 40px; }
.start__step h3 { margin: var(--sp-5) 0 var(--sp-2); }
.start__step p { margin: 0; font-size: var(--fs-body); }

/* ---- Two-column band ---- */
.start__band {
    display: grid;
    grid-template-columns: minmax(0, 11fr) minmax(0, 9fr);
    gap: clamp(var(--sp-6), 5vw, var(--sp-9));
    align-items: center;
    margin-top: clamp(var(--sp-7), 6vw, var(--sp-9));
}

/* The stage: a soft gradient plate under the mockup; the lock badge sits on
   the plate and overlaps the card corner. Everything stays inside the plate. */
.start__stage {
    --start-pad: clamp(20px, 4vw, 44px);
    position: relative;
    overflow: hidden;
    padding: var(--start-pad);
    border-radius: var(--r-xl);
    background: var(--grad-primary-soft);
    border: 1px solid var(--c-border);
}
.start__stage::before {
    content: "";
    position: absolute;
    inset: auto -20% -40% auto;
    width: 70%;
    aspect-ratio: 1;
    border-radius: 50%;
    background: color-mix(in srgb, var(--c-action) 14%, transparent);
    filter: blur(60px);
    pointer-events: none;
}

.start__lock {
    position: absolute;
    top: calc(var(--start-pad) - 14px);
    right: calc(var(--start-pad) - 14px);
    z-index: 2;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 7px 12px;
    border-radius: var(--r-full);
    background: var(--grad-ink);
    color: var(--c-text-invert);
    font-family: var(--font-mono);
    font-size: 12px;
    font-weight: 500;
    letter-spacing: 0.02em;
    white-space: nowrap;
    box-shadow: var(--shadow-lift);
}
.start__lock svg { flex: none; }

/* ---- Help-panel mockup (drawn like /app/help) ---- */
.help-card {
    position: relative;
    z-index: 1;
    width: 100%;
    max-width: 560px;
    margin-inline: auto;
    padding: var(--sp-4);
    background: var(--c-surface);
    border: 1px solid var(--c-border);
    border-radius: var(--r-lg);
    box-shadow: var(--shadow-lift);
    font-size: var(--fs-sm);
    color: var(--c-text);
    overflow: hidden;
}

.help-card__search {
    display: flex;
    align-items: center;
    gap: var(--sp-2);
    height: 44px;
    padding: 0 6px 0 14px;
    border: 1px solid var(--c-border-strong);
    border-radius: var(--r-md);
    background: var(--c-surface);
    color: var(--c-text-faint);
    box-shadow: var(--focus-ring);
}
.help-card__search > svg { flex: none; color: var(--c-text-faint); }
.help-card__ph { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: var(--fs-sm); color: var(--c-text-faint); }
.help-card__go {
    flex: none;
    display: grid;
    place-items: center;
    width: 32px;
    height: 32px;
    border-radius: var(--r-sm);
    background: var(--grad-primary);
    color: var(--c-text-invert);
    box-shadow: var(--shadow-btn);
}

.help-card__meta { display: flex; flex-wrap: wrap; gap: var(--sp-2); margin-top: var(--sp-3); }
.help-card__count { max-width: 100%; white-space: normal; text-align: left; }

.help-card__cats { display: flex; flex-wrap: wrap; gap: 6px; margin-top: var(--sp-3); padding-bottom: var(--sp-3); border-bottom: 1px solid var(--c-border); }
.help-card__cat {
    padding: 5px 11px;
    border-radius: var(--r-full);
    background: var(--c-surface-low);
    color: var(--c-text-soft);
    font-size: 12px;
    font-weight: 600;
    line-height: 1.2;
    white-space: nowrap;
}
.help-card__cat.is-active { background: var(--c-ink); color: var(--c-text-invert); }

.help-card__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.help-card__row {
    display: flex;
    align-items: center;
    gap: var(--sp-3);
    padding: var(--sp-3) 0;
    border-bottom: 1px solid var(--c-border);
}

/* Grey thumbnail placeholder, 120 x 70 on desktop, scales down with the card. */
.help-card__thumb {
    position: relative;
    flex: none;
    width: min(120px, 30%);
    aspect-ratio: 12 / 7;
    border-radius: var(--r-sm);
    background: var(--c-surface-mid);
    border: 1px solid var(--c-border);
    overflow: hidden;
}
.help-card__thumb-bar { position: absolute; left: 0; right: 0; top: 0; height: 18%; background: var(--c-surface-high); }
.help-card__thumb-block { position: absolute; border-radius: 3px; background: color-mix(in srgb, var(--c-action) 22%, var(--c-surface-high)); }
.help-card__thumb-block--1 { left: 10%; top: 32%; width: 46%; height: 42%; }
.help-card__thumb-block--2 { left: 10%; top: 32%; width: 80%; height: 18%; }
.help-card__thumb-block--3 { left: 58%; top: 32%; width: 32%; height: 52%; }

.help-card__text { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.help-card__q { font-weight: 600; color: var(--c-ink); line-height: 1.3; }
.help-card__skel { display: flex; flex-direction: column; gap: 4px; }
.help-card__skel-bar { display: block; height: 6px; border-radius: var(--r-full); background: var(--c-surface-mid); }
.help-card__chev { flex: none; color: var(--c-text-faint); }

.help-card__foot {
    display: flex;
    align-items: center;
    gap: var(--sp-2);
    margin: var(--sp-3) calc(-1 * var(--sp-4)) calc(-1 * var(--sp-4));
    padding: var(--sp-3) var(--sp-4);
    background: var(--grad-primary-soft);
    border-top: 1px solid var(--c-primary-tint);
}
.help-card__about { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; color: var(--c-ink); min-width: 0; }
.help-card__about svg { flex: none; color: var(--c-action); }
.help-card__role { flex: none; margin-left: auto; }
.help-card__caret { flex: none; color: var(--c-text-faint); }

/* ---- Manual copy ---- */
.start__copy { min-width: 0; }
.start__copy .chip { margin-bottom: var(--sp-4); }
.start__title {
    margin: 0 0 var(--sp-3);
    font-size: clamp(1.5rem, 2.6vw, 2rem);
    line-height: 1.15;
    letter-spacing: -0.02em;
}
.start__ticks li { color: var(--c-text-soft); font-weight: 500; line-height: 1.5; }
.start__ticks li:last-child { color: var(--c-ink); font-weight: 600; }

/* ---- CTA row ---- */
.start__cta { margin-top: clamp(var(--sp-7), 6vw, var(--sp-8)); text-align: center; }
.start__micro { margin: var(--sp-3) 0 0; font-size: var(--fs-sm); color: var(--c-text-faint); }

/* ---- Responsive ---- */
@media (max-width: 900px) {
    .start__band { grid-template-columns: minmax(0, 1fr); gap: var(--sp-6); }
    .start__copy { max-width: 560px; margin-inline: auto; }
}
@media (max-width: 640px) {
    .start__step { padding: var(--sp-5); border-radius: var(--r-lg); }
    .start__stage { --start-pad: 14px; padding-top: 30px; border-radius: var(--r-lg); }
    .start__lock { top: 8px; right: 8px; font-size: 11px; padding: 6px 10px; }
    .help-card { padding: var(--sp-3); }
    .help-card__count { font-size: 11px; letter-spacing: 0; }
    .help-card__foot { margin: var(--sp-3) calc(-1 * var(--sp-3)) calc(-1 * var(--sp-3)); padding: var(--sp-3); }
    .help-card__thumb { width: min(96px, 28%); }
    .start__btn { width: 100%; }
}

/* ---- Reduced motion: no lifts, nothing moves ---- */
@media (prefers-reduced-motion: reduce) {
    .start__step { transition: none; }
    .start__step:hover { transform: none; }
}


/* ==== trust ==== */
/* "Built in Lithuania" + the industries cloud (#industries), now two sections.
   The band used to be white, directly under another white band, with a centred
   two-column grid whose short copy column left ~260px of nothing above and
   below it, four cards whose text ran 114 to 492 characters, and a faint
   company line stranded between two hairlines that read as a second footer.
   Now: the page's own tinted ground so the white cards actually lift off it,
   a centred head that carries the company as its byline, three equal cards,
   and one wide card for the contract, which is a legal paragraph with three
   documents attached and never fitted a tile. */

/* ---- Band ---- */
/* One ground for the band and the industries cloud that follows it: a hair of
   indigo over the page colour, so the white cards lift off it and the white
   band above (start) ends at a visible edge instead of running on. */
.trust, .ind { background: color-mix(in srgb, var(--c-action) 4%, var(--c-bg)); }
.trust {
    position: relative;
    padding: clamp(var(--sp-8), 7vw, var(--sp-10)) 0 clamp(var(--sp-6), 5vw, var(--sp-7));
    overflow: hidden;
}
/* A faint indigo bloom, so the ground behind the cards is not flat. */
.trust::before {
    content: '';
    position: absolute;
    top: -10%;
    right: -8%;
    width: min(620px, 60vw);
    aspect-ratio: 1;
    border-radius: var(--r-full);
    background: radial-gradient(closest-side, color-mix(in srgb, var(--c-action) 9%, transparent), transparent);
    pointer-events: none;
}
.trust > .container { position: relative; }

/* ---- Head ---- */
.trust__head { text-align: center; margin-bottom: clamp(var(--sp-6), 5vw, var(--sp-7)); }
.trust__head .chip { margin-bottom: var(--sp-4); }
.trust__head .sec-lead { margin-bottom: 0; max-width: 56ch; }

/* The company's own name as a byline under the claim: a bordered strip, the
   same shape the pricing section uses for a single row of facts, so it reads
   as a credential rather than as a footer that wandered up the page. */
.trust__co {
    display: inline-flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: var(--sp-1) var(--sp-3);
    margin: var(--sp-5) 0 0;
    padding: var(--sp-2) var(--sp-5);
    background: var(--c-surface);
    border: 1px solid var(--c-border);
    border-radius: var(--r-full);
    box-shadow: var(--shadow-card);
    color: var(--c-text-soft);
    font-size: var(--fs-sm);
    text-align: left;
}
.trust__co-name { display: inline-flex; align-items: center; gap: var(--sp-2); }
.trust__co-name svg { flex: 0 0 auto; color: var(--c-text-faint); }
.trust__co-sep { color: var(--c-border-strong); }
.trust__co-link { color: var(--c-ink); font-weight: 600; text-decoration: none; min-height: 28px; display: inline-flex; align-items: center; }
.trust__co-link:hover { color: var(--c-action); text-decoration: underline; text-underline-offset: 3px; }

/* ---- Cards ---- */
.trust__cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--sp-4); }
.trust__card,
.trust__pact {
    background: var(--c-surface);
    border: 1px solid var(--c-border);
    border-radius: var(--r-xl);
    box-shadow: var(--shadow-card);
    transition: transform var(--t-med) var(--ease-out), box-shadow var(--t-med) var(--ease-out);
}
.trust__card { padding: var(--sp-5); }
.trust__card:hover,
.trust__pact:hover { transform: translateY(-3px); box-shadow: var(--shadow-lift); }
.trust__ct { font-family: var(--font-heading); font-size: var(--fs-h3); line-height: 1.3; margin: var(--sp-4) 0 var(--sp-2); color: var(--c-ink); }
.trust__cs { color: var(--c-text-soft); font-size: var(--fs-sm); line-height: 1.6; margin: 0; }

.trust__ic {
    flex: 0 0 auto;
    width: 44px;
    height: 44px;
    display: grid;
    place-items: center;
    border-radius: var(--r-full);
    background: var(--c-primary-tint);
    color: var(--c-primary);
    transition: transform var(--t-med) var(--ease-spring);
}
.trust__ic svg { display: block; }
.trust__ic-dot { fill: var(--c-error); stroke: var(--c-error); }
.trust__card:hover .trust__ic,
.trust__pact:hover .trust__ic { transform: scale(1.08) rotate(-4deg); }

/* ---- The contract, and the three documents that back it ---- */
.trust__pact {
    display: grid;
    grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr);
    gap: clamp(var(--sp-5), 4vw, var(--sp-7));
    align-items: center;
    margin-top: var(--sp-4);
    padding: clamp(var(--sp-5), 4vw, var(--sp-6));
}
.trust__pact-copy { display: flex; align-items: flex-start; gap: var(--sp-4); }
.trust__pact-copy .trust__ct { margin-top: 0; }
.trust__links {
    list-style: none;
    margin: 0;
    padding: var(--sp-2);
    display: flex;
    flex-direction: column;
    gap: 2px;
    background: color-mix(in srgb, var(--c-action) 5%, transparent);
    border-radius: var(--r-lg);
}
.trust__links a {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--sp-3);
    min-height: 44px;
    padding: 0 var(--sp-3);
    border-radius: var(--r-md);
    font-size: var(--fs-sm);
    font-weight: 600;
    color: var(--c-action);
    text-decoration: none;
    transition: background var(--t-fast) var(--ease-out);
}
.trust__links a svg { flex: 0 0 auto; transition: transform var(--t-fast) var(--ease-out); }
.trust__links a:hover { background: var(--c-surface); color: var(--c-action-hover); }
.trust__links a:hover svg { transform: translateX(2px); }

/* ---- Industries ---- */
.ind { padding: 0 0 clamp(var(--sp-8), 7vw, var(--sp-10)); text-align: center; }
.ind .sec-title { max-width: 24ch; }
.ind__lead { max-width: 62ch; margin-bottom: 0; }
/* Equal cells rather than centred pills: eighteen chips fill six columns in
   three full rows, instead of a ragged last row inside an 860px island. The
   cap has to clear six tracks plus five gaps (6*170 + 5*8 = 1060) or auto-fit
   silently settles for five and the last row goes ragged again. */
.ind__grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
    gap: var(--sp-2);
    max-width: 1080px;
    margin: var(--sp-6) auto 0;
}

/* The kept .cat-chip is now a link: keep the ink colour, drop the underline,
   give it a 44px tap target. */
.ind__chip {
    justify-content: center;
    min-height: 44px;
    color: var(--c-ink);
    text-decoration: none;
    line-height: 1.3;
}
.ind__chip:hover, .ind__chip:focus-visible { color: var(--c-action); text-decoration: none; }
.ind__chip:focus-visible { outline: none; box-shadow: var(--focus-ring); border-color: var(--c-action); }
.ind__chip .cat-chip__emoji { line-height: 1; }
.ind__chip-label { text-align: center; }

.ind__note {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--sp-2);
    max-width: 60ch;
    margin: var(--sp-5) auto 0;
    color: var(--c-text-faint);
    font-size: var(--fs-sm);
    line-height: 1.5;
    text-align: left;
}
.ind__note svg { flex: 0 0 auto; color: var(--c-action); }

/* ---- Responsive ---- */
@media (max-width: 900px) {
    .trust__cards { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
    .trust__pact { grid-template-columns: minmax(0, 1fr); align-items: start; }
    .trust::before { right: -30%; top: 20%; }
}
@media (max-width: 640px) {
    .trust__cards { grid-template-columns: minmax(0, 1fr); gap: var(--sp-3); }
    .trust__card { padding: var(--sp-4); border-radius: var(--r-lg); }
    .trust__pact { border-radius: var(--r-lg); }
    .trust__ic { width: 40px; height: 40px; }
    .trust__co { justify-content: flex-start; }
    .trust__co-sep { display: none; }
    /* Chips: two per row, 44px tap height, labels may wrap to a second line. */
    .ind__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
    .ind__chip { padding-inline: var(--sp-3); }
    .ind__note { text-align: center; align-items: flex-start; }
}

/* ---- Reduced motion ---- */
@media (prefers-reduced-motion: reduce) {
    .trust__card, .trust__pact, .trust__ic, .trust__links a svg { transition: none; }
    .trust__card:hover, .trust__pact:hover { transform: none; }
    .trust__card:hover .trust__ic, .trust__pact:hover .trust__ic { transform: none; }
    .trust__links a:hover svg { transform: none; }
}


/* ==== pricing ==== */
/* Kept rules (.pricing .plans .plan .plan__name/.price/.per/.features/.badge,
   .plan--premium, .plan--vip) stay as they are in marketing.css; everything
   below is additive. */

/* ---- "In every plan" strip ---- */
.pricing__inc {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: var(--sp-2) var(--sp-4);
    max-width: 1080px;
    margin: 0 auto;
    padding: var(--sp-3) var(--sp-5);
    background: var(--c-surface);
    border: 1px solid var(--c-border);
    border-radius: var(--r-full);
    box-shadow: var(--shadow-card);
}
.pricing__inc-label {
    font-family: var(--font-mono);
    font-size: var(--fs-label);
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--c-text-faint);
    white-space: nowrap;
}
.pricing__inc-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--sp-2);
    min-width: 0;
}
.pricing__inc-list li { display: flex; min-width: 0; }
.pricing__inc-list .chip { max-width: 100%; gap: 6px; padding-block: 5px; line-height: 1.35; text-align: left; }
.pricing__inc-list .chip svg { flex: 0 0 auto; }

/* ---- Plan cards: additive polish on the kept .plan family ---- */
.pricing .plan__features li > span { min-width: 0; }
.pricing .plan .btn { margin-top: var(--sp-5); }

/* Premium: lifted, soft indigo wash so it reads as the default choice */
.pricing .plan--premium {
    background:
        linear-gradient(180deg, color-mix(in srgb, var(--c-action) 7%, var(--c-surface)) 0%, var(--c-surface) 42%);
}
.pricing .plan--premium .plan__price { color: var(--c-primary); }

/* Premium unit explainer under the price (two avatars and a pin) */
.plan__unit {
    display: flex;
    align-items: flex-start;
    gap: var(--sp-2);
    margin: var(--sp-2) 0 0;
    font-size: var(--fs-label);
    line-height: 1.45;
    color: var(--c-text-faint);
}
.plan__unit svg { flex: 0 0 auto; color: var(--c-action); margin-top: 1px; }
.plan__unit > span { min-width: 0; }

/* VIP one-liner under the price */
.plan__note {
    margin: var(--sp-2) 0 0;
    font-size: var(--fs-label);
    line-height: 1.45;
    color: var(--c-text-faint);
}
/* The same note as a footnote under the VIP list (how Premium SMS are counted) */
.plan__features + .plan__note { margin-top: var(--sp-4); }

/* Premium: the long tail of the list behind a native <details> */
.plan__more { margin-top: var(--sp-3); }
.plan__more > summary {
    list-style: none;
    display: inline-flex;
    align-items: center;
    gap: var(--sp-1);
    padding: var(--sp-1) 0;
    font-size: var(--fs-sm);
    font-weight: 600;
    color: var(--c-action);
    cursor: pointer;
    border-radius: var(--r-sm);
    -webkit-user-select: none;
    user-select: none;
}
.plan__more > summary::-webkit-details-marker { display: none; }
.plan__more > summary::marker { content: ""; }
.plan__more > summary:hover { color: var(--c-action-hover); }
.plan__more > summary:focus-visible { outline: 2px solid var(--c-action); outline-offset: 3px; }
.plan__more > summary svg { flex: 0 0 auto; transition: transform var(--t-med) var(--ease-out); }
.plan__more[open] > summary svg { transform: rotate(180deg); }
.plan__more > .plan__features { margin-top: var(--sp-3); }

/* ---- VAT and billing note under the grid ---- */
.pricing__vat {
    max-width: 72ch;
    margin: var(--sp-5) auto 0;
    text-align: center;
    font-size: var(--fs-sm);
    line-height: 1.6;
    color: var(--c-text-faint);
}

/* ---- Responsive ---- */
@media (min-width: 901px) {
    /* Premium stands a little proud of its neighbours on desktop */
    .pricing .plan--premium { margin-top: calc(-1 * var(--sp-3)); }
}
@media (max-width: 900px) {
    /* Cards stack (kept rule); Premium goes first */
    .pricing .plan--premium { order: -1; }
    .pricing__inc { border-radius: var(--r-xl); padding: var(--sp-3) var(--sp-4); }
}
@media (max-width: 640px) {
    .pricing__inc { gap: var(--sp-2) var(--sp-3); }
    .pricing__inc-label { width: 100%; text-align: center; }
    .pricing__vat { text-align: left; }
}

/* ---- Reduced motion ---- */
@media (prefers-reduced-motion: reduce) {
    .plan__more > summary svg { transition: none; }
}


/* ==== faq ==== */
/* The kept .faq / .faq__list / .faq__item rules (padding-block, 720px,
   card items, chevron rotation on [open]) stay as they are in marketing.css.
   This fragment only ADDS: a centred lead, comfortable tap targets, hover /
   open / focus states and the closing "write to us" line. */

/* ---- Heading: the lead stays centred below 900px (the kept rule resets
   .sec-lead margin-inline there) ---- */
.faq .sec-lead.center { margin-inline: auto; text-align: center; }

/* ---- Items: states layered on the kept card ---- */
.faq .faq__item { transition: border-color var(--t-fast), box-shadow var(--t-fast); }
.faq .faq__item:hover { border-color: color-mix(in srgb, var(--c-action) 28%, transparent); }
.faq .faq__item[open] { border-color: color-mix(in srgb, var(--c-action) 40%, transparent); box-shadow: var(--shadow-card); }
.faq .faq__item summary { min-height: 48px; line-height: 1.4; color: var(--c-ink); font-family: var(--font-heading); font-size: var(--fs-body); }
.faq .faq__item summary > span { flex: 1 1 auto; min-width: 0; overflow-wrap: anywhere; }
.faq .faq__item summary:hover svg { color: var(--c-action); }
.faq .faq__item[open] summary svg { color: var(--c-action); }
.faq .faq__item summary:focus-visible { outline: none; box-shadow: 0 0 0 3px color-mix(in srgb, var(--c-action) 35%, transparent); border-radius: var(--r-sm); }
.faq .faq__item p { font-size: var(--fs-sm); max-width: 62ch; overflow-wrap: anywhere; }

/* ---- Closing line: lead text + mailto link ---- */
.faq__write { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: var(--sp-1) var(--sp-2); margin: var(--sp-6) 0 0; text-align: center; color: var(--c-text-soft); line-height: 1.6; }
.faq__write-link { display: inline-flex; align-items: center; min-height: 44px; padding: 0 var(--sp-2); font-weight: 600; color: var(--c-action); text-decoration: underline; text-decoration-color: color-mix(in srgb, var(--c-action) 35%, transparent); text-underline-offset: 0.2em; transition: text-decoration-color var(--t-fast); }
.faq__write-link:hover { text-decoration-color: var(--c-action); }

/* ---- Phone ---- */
@media (max-width: 640px) {
    .faq .faq__item summary { font-size: var(--fs-sm); gap: var(--sp-2); }
    .faq__write { margin-top: var(--sp-5); }
}

/* ---- Reduced motion: no state transitions, chevron snaps ---- */
@media (prefers-reduced-motion: reduce) {
    .faq .faq__item, .faq .faq__item summary svg, .faq__write-link { transition: none; }
    .faq .faq__item[open] summary svg { transform: rotate(180deg); }
}


/* ==== final-cta ==== */
/* The dark ink panel (.mk-cta, .mk-cta__inner, .mk-wl*) is kept as-is in the
   shared sheet; everything below only adds the new pieces: the closing copy
   block, the demo trio, the micro row and the decorative calendar strip. */

/* Real service colours of the product calendar, for the ghost cards only */
.mk-cta {
    --mk-svc-1: #635bff;
    --mk-svc-2: #33b679;
    --mk-svc-3: #f09300;
    --mk-svc-4: #039be5;
}

/* ---- Copy ---- */
.mk-cta__title { max-width: 18ch; margin-inline: auto; text-wrap: balance; letter-spacing: -0.02em; }
.mk-cta__lead { max-width: 58ch; margin-inline: auto; text-wrap: pretty; }
.mk-cta__primary { gap: var(--sp-2); }
.mk-cta__primary svg { transition: transform var(--t-fast) var(--ease-out); }
.mk-cta__primary:hover svg { transform: translateX(3px); }

/* ---- Demo trio: three ghost links on the dark ground ---- */
.mk-cta__demos {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--sp-3);
    margin-top: var(--sp-6);
}
.mk-cta__demos .btn--ghost {
    background: color-mix(in srgb, var(--c-surface) 7%, transparent);
    border-color: color-mix(in srgb, var(--c-surface) 22%, transparent);
    color: var(--c-surface);
    padding: 11px 20px;
    font-weight: 500;
    backdrop-filter: blur(6px);
}
.mk-cta__demos .btn--ghost svg { color: color-mix(in srgb, var(--c-surface) 70%, var(--c-action)); }
.mk-cta__demos .btn--ghost:hover,
.mk-cta__demos .btn--ghost:focus-visible {
    background: color-mix(in srgb, var(--c-surface) 14%, transparent);
    border-color: color-mix(in srgb, var(--c-surface) 45%, transparent);
    box-shadow: 0 8px 24px color-mix(in srgb, var(--c-action) 30%, transparent);
}
.mk-cta__demos .btn--ghost:focus-visible { outline: 2px solid var(--c-surface); outline-offset: 3px; }

/* ---- Micro assurances ---- */
.mk-cta__micro {
    list-style: none;
    margin: var(--sp-6) 0 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--sp-2) var(--sp-5);
    font-size: var(--fs-sm);
    color: color-mix(in srgb, var(--c-surface) 65%, transparent);
}
.mk-cta__micro li { display: inline-flex; align-items: center; gap: var(--sp-2); }
.mk-cta__micro svg { flex: none; color: var(--c-cyan); }

/* Closed state: the demo trio sits under the waiting-list form */
.mk-wl + .mk-cta__demos { margin-top: var(--sp-7); }

/* ---- Decorative calendar strip ----
   In flow at the bottom of the panel, bleeding into its padding with
   negative margins so it hugs the rounded corners without touching the
   kept .mk-cta__inner rule. Static, faint, aria-hidden. */
.mk-cta__ghost {
    position: relative;
    height: 112px;
    margin: var(--sp-7) calc(-1 * var(--sp-6)) calc(-1 * var(--sp-9));
    padding: 0 clamp(var(--sp-4), 6vw, var(--sp-9));
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--sp-3);
    border-radius: 0 0 var(--r-xl) var(--r-xl);
    overflow: hidden;
    opacity: .15;
    pointer-events: none;
    background:
        repeating-linear-gradient(180deg, transparent 0 27px, color-mix(in srgb, var(--c-surface) 50%, transparent) 27px 28px);
    -webkit-mask-image: linear-gradient(180deg, transparent 0, var(--c-ink) 22%, var(--c-ink) 70%, transparent 100%);
    mask-image: linear-gradient(180deg, transparent 0, var(--c-ink) 22%, var(--c-ink) 70%, transparent 100%);
}
.mk-cta__ghost-col { position: relative; display: block; min-width: 0; border-left: 1px solid color-mix(in srgb, var(--c-surface) 40%, transparent); }
.mk-cta__ghost-col:last-child { border-right: 1px solid color-mix(in srgb, var(--c-surface) 40%, transparent); }
.mk-cta__ghost-card {
    position: absolute;
    left: 8%;
    right: 8%;
    display: block;
    border-radius: 6px;
    background: var(--mk-c, var(--mk-svc-1));
    border-left: 3px solid var(--c-surface);
}
.mk-cta__ghost-card::before,
.mk-cta__ghost-card::after {
    content: "";
    position: absolute;
    left: 10px;
    height: 3px;
    border-radius: 2px;
    background: var(--c-surface);
}
.mk-cta__ghost-card::before { top: 7px; width: 55%; }
.mk-cta__ghost-card::after { top: 15px; width: 32%; opacity: .6; }

/* ---- Responsive ---- */
@media (max-width: 640px) {
    .mk-cta__inner > .mk-cta__primary { width: 100%; }
    .mk-cta__demos { flex-direction: column; align-items: stretch; margin-top: var(--sp-5); }
    .mk-cta__demos .btn--ghost { width: 100%; }
    .mk-cta__micro { flex-direction: column; align-items: center; gap: var(--sp-2); }
    .mk-cta__ghost { height: 84px; margin-top: var(--sp-6); }
}

/* ---- Reduced motion: the strip is static; only the hover nudges go ---- */
@media (prefers-reduced-motion: reduce) {
    .mk-cta__primary svg,
    .mk-cta__demos .btn--ghost { transition: none; }
    .mk-cta__primary:hover svg { transform: none; }
    .mk-cta__demos .btn--ghost:hover { transform: none; }
}

/* ==== review fixes ==== */
/* Anchors land under the sticky header without this. */
.hero, .demo, .feat, .msg, .team, .camp, .start, .trust, .pricing, .faq, .mk-cta, #calendar, #industries { scroll-margin-top: 88px; }
.mk-footer__h { font-size: var(--fs-sm); color: var(--c-ink); font-weight: 700; margin: 0 0 var(--sp-3); }
.demo__like { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: var(--sp-2) var(--sp-3); }
/* Phones: the three demo doors fit one screen without their thumbnails. */
@media (max-width: 640px) {
    .dm-thumb { display: none; }
}
/* The phone must not cover the working-hours card it is proving. */
@media (min-width: 1100px) {
    .team__stage { width: min(100%, 560px); }
}
@media (prefers-reduced-motion: reduce) {
    .mk-beta-dot, .mk-wl__count-dot, .mk-wl__icon { animation: none !important; opacity: 1; }
}