* { margin: 0; padding: 0; box-sizing: border-box; }

body {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    /* WowSplash.com art as background on every page and every screen size;
       the dark overlay keeps the cards readable. #0f172a behind it covers
       load time and overscroll. */
    background: linear-gradient(rgba(15, 23, 42, 0.5), rgba(15, 23, 42, 0.5)),
                url('/bg-onedo.webp') center / cover no-repeat #0f172a;
    color: #e2e8f0;
    padding: 24px;
}
/* Fixed backgrounds jank on iOS — only pin it on wide screens. */
@media (min-width: 1100px) {
    body { background-attachment: fixed; }
}

/* Owner's custom background image: a full-viewport layer above the default site
   art but behind the card (z-index -1 keeps it below body content). Its opacity
   is set inline from the saved value, and the slider live-updates it. The card
   stays a solid blurred panel on top, so text is readable at any opacity. */
/* The owner's picture is never cropped: the ::after layer shows it whole
   (contain) over the page's quiet light base colour. The div itself paints
   nothing (size 0); it only carries the inline background-image the photo
   layer inherits, plus the owner's --bg-op visibility setting. That setting
   only dims the photo where it sits BEHIND the card (small screens) — beside
   the column it covers no text, so it always shows at full strength. */
.bg-backdrop {
    position: fixed;
    inset: 0;
    z-index: -1;
    background-size: 0 0;
    pointer-events: none;
    overflow: hidden;
}
.bg-backdrop::after {
    content: '';
    position: absolute;
    inset: 0;
    background: inherit;
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    opacity: var(--bg-op, 1);
}
/* A lone background image (no second one) covers the whole screen instead of
   sitting beside the column — cropped as needed, dimmable at every size since
   it is behind the text everywhere. */
.bg-backdrop.bg-cover::after { background-size: cover; }

/* Optional second owner image, right of the centre column. Hidden until the
   wide-screen layout below places it. */
.bg-backdrop .bg-right {
    display: none;
    position: absolute;
    inset: 0;
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
}

/* Wide screens, two-image pages only: the centre column (card, max-width
   480px) leaves real estate either side, so the first uncropped photo moves
   left of it and the second takes the right. Single-image (.bg-cover) pages
   keep the full-screen cover at every size. */
@media (min-width: 1000px) {
    .bg-backdrop:not(.bg-cover)::after {
        left: 16px;
        right: calc(50% + 256px);
        opacity: 1;
    }
    .bg-backdrop .bg-right {
        display: block;
        left: calc(50% + 256px);
        right: 16px;
    }
}

.card {
    width: 100%;
    max-width: 480px;
    background: rgba(15, 23, 42, 0.8);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 20px;
    padding: 40px 32px;
    backdrop-filter: blur(8px);
}

/* Pages with an owner background: the photos sit beside the column on wide
   screens, and everything else rests on a quiet light blue-grey — calm, not
   in-your-face, and it flatters most photos. Replaces the default site art
   (bg-home.jpg) so nothing shows through below the photos. */
body.has-backdrop {
    background: #c8d2e0;
}

/* Room pages stack the business card and the subtle "Powered by OneDo.me" footer
   below it, so the card stays 100% the client's while the growth bar lives in the
   page background zone underneath. */
body.roomview {
    flex-direction: column;
}

/* The card sits on the light base now, so it needs to be closer to solid for
   the white text to stay crisp; the blur still softens whatever photo edge
   slides underneath on small screens. */
body.has-backdrop .card {
    background: rgba(15, 23, 42, 0.85);
    border-color: rgba(255, 255, 255, 0.16);
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
    box-shadow: 0 8px 32px rgba(2, 6, 23, 0.35);
}

/* Footer texts sit directly on the light base on backdrop pages — flip them
   dark there; the .powered pill keeps its own dark backing so it stays as-is. */
body.has-backdrop .site-footer .legal,
body.has-backdrop .site-footer .legal a { color: #475569; }

/* Homepage: banner header in the card; woman/man side images on desktop only. */
.banner-img {
    display: block;
    width: 100%;
    /* The banner art sits on pure black; screen-blending makes that black
       invisible so only the glowing logo shows — no visible rectangle. */
    mix-blend-mode: screen;
    /* The glow fades out above and below the logo box; pull the surroundings
       into it so the page doesn't waste vertical space on invisible pixels. */
    margin-top: -26px;
    margin-bottom: -18px;
}
/* Less air above the banner: the logo should sit close to the browser bar. */
body.home { padding-top: 12px; }
body.home .card { padding-top: 24px; }
.side-pic { display: none; }
@media (min-width: 1100px) {
    body.home { gap: 28px; align-items: flex-start; }
    .side-pic {
        display: block;
        /* Fill the space beside the card: half of what's left after card + gaps. */
        width: min(calc(50vw - 292px), 620px);
        border-radius: 20px;
        border: 1px solid rgba(255, 255, 255, 0.1);
        /* Top edge level with the banner's under-edge: card padding-top (24)
           + banner margin-top (-26) + visible banner bottom in the image (~142). */
        margin-top: 140px;
    }
}

.brand {
    font-size: 0.85rem;
    color: #64748b;
    text-align: center;
    margin-bottom: 4px;
}
.brand a { color: #38bdf8; text-decoration: none; }
.brand-slug { color: #94a3b8; }

/* Sign-in status on claimed pages */
.auth-line {
    font-size: 0.8rem;
    color: #94a3b8;
    text-align: center;
    margin: 0 0 10px;
}
.auth-line a { color: #38bdf8; }
.auth-line .auth-pic { width: 18px; height: 18px; border-radius: 50%; vertical-align: -4px; }
.intro a, .card ul a, .status a { color: #38bdf8; }

h1 {
    font-size: 2.1rem;
    letter-spacing: -0.02em;
    text-align: center;
    margin-bottom: 6px;
}
h1 .accent { color: #38bdf8; }

.beta-tag {
    display: block;
    width: fit-content;
    margin: 0 auto 18px;
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: #38bdf8;
    border: 1px solid #38bdf8;
    border-radius: 999px;
    padding: 2px 10px;
}

.intro {
    font-size: 0.95rem;
    line-height: 1.55;
    color: #94a3b8;
    margin-bottom: 24px;
    text-align: center;
}

h2 {
    font-size: 0.8rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: #38bdf8;
    margin: 28px 0 10px;
}

ul, ol {
    list-style-position: outside;
    padding-left: 22px;
    color: #cbd5e1;
    font-size: 0.95rem;
    line-height: 1.7;
}

/* --- Call UI --- */
.status {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    min-height: 28px;
    font-size: 1rem;
    margin-bottom: 20px;
    color: #cbd5e1;
    text-align: center;
}

.dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: #64748b;
    flex-shrink: 0;
}
.dot.waiting { background: #fbbf24; animation: pulse 1.4s ease-in-out infinite; }
.dot.connecting { background: #38bdf8; animation: pulse 0.8s ease-in-out infinite; }
.dot.connected { background: #34d399; }
.dot.error { background: #f87171; }

@keyframes pulse {
    0%, 100% { opacity: 1; transform: scale(1); }
    50% { opacity: 0.4; transform: scale(0.8); }
}

button {
    font-family: inherit;
    font-size: 1.05rem;
    font-weight: 600;
    border: none;
    border-radius: 12px;
    padding: 14px 28px;
    cursor: pointer;
    transition: transform 0.1s ease, background 0.2s ease;
}
button:active { transform: scale(0.97); }
button:disabled { opacity: 0.6; cursor: default; }

#joinBtn {
    width: 100%;
    background: #38bdf8;
    color: #0f172a;
}
#joinBtn:hover { background: #7dd3fc; }

.call-controls { display: none; gap: 12px; justify-content: center; }
.call-controls button { flex: 1; max-width: 160px; }

#muteBtn { background: rgba(255, 255, 255, 0.1); color: #e2e8f0; }
#muteBtn:hover { background: rgba(255, 255, 255, 0.18); }
#muteBtn.muted { background: #fbbf24; color: #0f172a; }

#leaveBtn { background: #f87171; color: #0f172a; }
#leaveBtn:hover { background: #fca5a5; }

.share-line {
    margin-top: 14px;
    font-size: 0.85rem;
    color: #94a3b8;
    text-align: center;
}
.share-line strong { color: #e2e8f0; font-weight: 600; }

.footnote {
    margin-top: 20px;
    font-size: 0.88rem;
    color: #94a3b8;
    line-height: 1.6;
    text-align: center;
}

/* The footnote sits folded under a "Good to know" toggle so the page stays
   light; the advice is there for whoever wants it. */
.footnote-box { margin-top: 20px; text-align: center; }
.footnote-box summary {
    cursor: pointer;
    color: #e2e8f0;
    font-size: 0.88rem;
    list-style-position: inside;
    text-decoration: underline;
}
.footnote-box .footnote { margin-top: 8px; }

#authBox a { color: #38bdf8; }
.auth-pic {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    vertical-align: -4px;
    margin-right: 2px;
}

.pricing-note {
    margin-top: 14px;
    font-size: 0.85rem;
    color: #94a3b8;
    border-left: 3px solid #38bdf8;
    padding-left: 12px;
    line-height: 1.5;
}

/* --- Claim box --- */
/* --- Business landing (front page): hero, steps, pricing cards, free band --- */
/* Mobile hero: below the wide-screen breakpoint the receptionist picture
   opens the page, with the brand and its promise under it. It replaces the
   small brand line, the kicker and the h1 there — same message, nicer entry.
   Wide screens hide it and show the picture beside the card (.side-pic). */
.m-hero { text-align: center; margin: 0 0 20px; }
.m-hero-pic {
    display: block;
    width: 100%;
    border-radius: 14px;
    border: 1px solid rgba(255, 255, 255, 0.1);
}
.m-hero-brand {
    font-size: 1.7rem;
    font-weight: 800;
    letter-spacing: -0.02em;
    margin: 14px 0 2px;
}
.m-hero-brand a { color: #38bdf8; text-decoration: none; }
.m-hero-tag {
    font-size: 1.05rem;
    font-weight: 600;
    color: #e2e8f0;
}
/* The price is the hero's call to action: underlined so it reads as
   "tap here to order", straight to the pricing page's buy buttons. */
.m-hero-price { font-size: 0.95rem; margin-top: 6px; }
.m-hero-price a { color: #38bdf8; text-decoration: underline; }
@media (max-width: 1099.98px) {
    body.home .brand,
    body.home .hero-kicker,
    body.home .hero-h1 { display: none; }
}
@media (min-width: 1100px) {
    .m-hero { display: none; }
}

.hero-kicker {
    font-size: 0.75rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: #94a3b8;
    margin: 10px 0 0;
}
.hero-h1 { font-size: 1.8rem; line-height: 1.2; margin: 6px 0 14px; }
.cta-row { display: flex; gap: 10px; flex-wrap: wrap; margin: 16px 0 8px; }
.cta-btn {
    background: #38bdf8;
    color: #0f172a;
    font-weight: 700;
    padding: 12px 18px;
    border-radius: 10px;
    text-decoration: none;
    display: inline-block;
    font-size: 0.95rem;
}
.cta-btn:hover { background: #7dd3fc; }
.cta-btn.alt {
    background: rgba(255, 255, 255, 0.08);
    color: #e2e8f0;
    border: 1px solid rgba(255, 255, 255, 0.2);
}
.cta-btn.alt:hover { background: rgba(255, 255, 255, 0.16); }
/* "Try our live demo now" fans out over two arrows to the two demo buttons. */
.demo-cta { margin: 18px 0 8px; text-align: center; }
.demo-cta-head { font-size: 1.05rem; font-weight: 700; margin: 0; }
.demo-cta-arrows {
    display: flex;
    justify-content: space-around;
    color: #38bdf8;
    font-size: 1.4rem;
    line-height: 1.2;
    margin: 2px 0 4px;
}
.demo-cta-row { display: flex; gap: 10px; justify-content: space-between; flex-wrap: wrap; }
.demo-cta-row .cta-btn { flex: 1; min-width: 180px; text-align: center; }
.cta-note { font-size: 0.8rem; color: #94a3b8; margin: 4px 0 8px; text-align: left; }
.cta-note a { color: #38bdf8; }
.steps { list-style: none; margin: 12px 0; padding: 0; }
.steps li { display: flex; gap: 12px; margin: 12px 0; text-align: left; align-items: flex-start; }
.step-n {
    flex-shrink: 0;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: #38bdf8;
    color: #0f172a;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
}
/* Two stacked images left of the column; the floating pricing window takes
   the right. On narrow screens both hide and #pricingInline shows in-card. */
.side-col, .side-spacer { display: none; }
@media (min-width: 1100px) {
    .side-col {
        display: flex;
        flex-direction: column;
        gap: 24px;
        width: min(calc(50vw - 292px), 620px);
        margin-top: 140px;
    }
    .side-spacer {
        display: block;
        width: min(calc(50vw - 292px), 620px);
        flex-shrink: 0;
    }
    /* Wide screens: the page itself never scrolls — the side image and the
       floating pricing window stay on stage, and the centre column scrolls
       inside itself (slim, unobtrusive scrollbar). */
    body.home {
        height: 100vh;
        overflow: hidden;
    }
    body.home .card {
        max-height: calc(100vh - 36px);
        overflow-y: auto;
        overscroll-behavior: contain;
        scrollbar-width: thin;
        scrollbar-color: rgba(148, 163, 184, 0.35) transparent;
    }
    body.home .card::-webkit-scrollbar { width: 8px; }
    body.home .card::-webkit-scrollbar-thumb {
        background: rgba(148, 163, 184, 0.35);
        border-radius: 4px;
    }
    body.home .card::-webkit-scrollbar-track { background: transparent; }
    .side-col .side-pic { width: 100%; margin-top: 0; }
    #pricingInline { display: none; }
    /* Let the window hug the pricing card instead of the fixed 380px the text
       version uses; resizing still works (inline height wins). 443px keeps the
       width the screenshot used to have — the two price tiles sit side by side
       comfortably at that size. */
    .pricing-panel.home-pricing { height: auto; width: 443px; max-width: 30vw; top: 140px; right: 32px; }
}
#pricingInline { margin: 20px 0 4px; }

/* The pricing window used to be a screenshot (pricing-window.webp). It is real
   markup now, so the price and the VAT line can never drift from /pricing
   again. Used twice on the home page: inline on phones, inside the floating
   panel on desktop. */
.pricing-card {
    display: block;
    text-decoration: none;
    text-align: left;
    background: rgba(15, 23, 42, 0.55);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 10px;
    padding: 14px;
}
.pricing-card:hover { border-color: rgba(56, 189, 248, 0.45); }
.pc-head {
    margin: 0 0 12px !important;
    color: #38bdf8;
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    line-height: 1.4;
}
.pc-tiles { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.pc-tile {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 12px;
    padding: 12px 8px;
    text-align: center;
}
.pc-plan { margin: 0 0 4px !important; color: #94a3b8; font-size: 0.8rem; }
.pc-price { margin: 0 !important; color: #fff; font-size: 1.55rem; font-weight: 700; }
.pc-price span { font-size: 0.72rem; font-weight: 400; color: #cbd5e1; }
.pc-mins { margin: 4px 0 0 !important; color: #cbd5e1; font-size: 0.72rem; }
.pc-fine {
    margin: 12px 0 0 !important;
    color: #94a3b8;
    font-size: 0.72rem;
    line-height: 1.5;
}
.pc-more { color: #38bdf8; text-decoration: underline; }

/* "One link, three superpowers" tiles. */
.trio { display: grid; gap: 10px; margin: 12px 0; text-align: left; }
.trio-tile {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 12px;
    padding: 12px 14px;
    font-size: 0.85rem;
    line-height: 1.55;
    color: #cbd5e1;
}
.trio-tile p { margin: 0; }
.trio-head { font-weight: 700; color: #e2e8f0; margin: 0 0 4px !important; }
.trio-aside { color: #94a3b8; font-size: 0.8rem; }

/* Without/with comparison: two scannable columns, ✗ muted vs ✓ green. */
.cmp { margin: 12px 0; text-align: left; font-size: 0.8rem; }
.cmp-row {
    display: grid;
    grid-template-columns: 1fr 1.2fr;
    gap: 10px;
    padding: 7px 0;
    border-bottom: 1px solid rgba(148, 163, 184, 0.15);
}
.cmp-row > div:first-child { color: #94a3b8; }
.cmp-row > div:last-child { color: #d1fae5; }
.cmp-head { font-weight: 700; border-bottom-color: rgba(148, 163, 184, 0.4); }
.cmp-head > div:last-child { color: #4ade80; }

.price-row { display: flex; gap: 10px; margin: 12px 0 6px; }
.price-card {
    flex: 1;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: 12px;
    padding: 14px;
    text-align: center;
}
.price-name { font-size: 0.85rem; color: #94a3b8; margin: 0 0 4px; }
.price-eur { font-size: 1.5rem; font-weight: 700; margin: 0; }
.price-eur span { font-size: 0.8rem; font-weight: 400; color: #94a3b8; }
.price-min { font-size: 0.8rem; color: #cbd5e1; margin: 4px 0 0; }
.free-band {
    margin-top: 24px;
    padding: 12px 14px;
    background: rgba(34, 197, 94, 0.1);
    border: 1px solid rgba(34, 197, 94, 0.35);
    border-radius: 12px;
    font-size: 0.85rem;
    text-align: left;
}
.free-band a { color: #38bdf8; }

.claim-row { display: flex; gap: 10px; }

input[type="text"], textarea {
    width: 100%;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 10px;
    color: #e2e8f0;
    font-family: inherit;
    font-size: 0.95rem;
    padding: 12px;
}
input[type="text"]:focus, textarea:focus { outline: 2px solid #38bdf8; border-color: transparent; }

.claim-row button {
    background: #38bdf8;
    color: #0f172a;
    font-size: 0.95rem;
    padding: 12px 18px;
    white-space: nowrap;
}
.claim-row button:hover { background: #7dd3fc; }

#claimMsg { min-height: 22px; margin-top: 8px; font-size: 0.88rem; }

/* --- Presence --- */
/* Struck-through "not valid" answer: brighter text, clear red strike line. */
.presence s {
    color: #94a3b8;
    text-decoration-color: #f87171;
    text-decoration-thickness: 2px;
}
.presence {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    font-size: 0.85rem;
    color: #94a3b8;
    margin: -8px 0 18px;
}
.pdot {
    width: 11px;
    height: 11px;
    border-radius: 50%;
    background: #475569;
    flex-shrink: 0;
}
.pdot.on {
    background: #22c55e;
    box-shadow: 0 0 8px rgba(34, 197, 94, 0.8);
}
/* AI assistant is standing in for the owner: a live violet dot that gently
   pulses to read as "on and listening", distinct from the green direct-call dot. */
.pdot.ai {
    background: #a78bfa;
    box-shadow: 0 0 9px rgba(167, 139, 250, 0.9);
    animation: pulse 1.8s ease-in-out infinite;
}

/* Availability: a small dot + subtle label just above Join, replacing the old
   loud "owner is available" text block. */
.avail {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    min-height: 16px;
    margin: 0 0 10px;
}
.avail-text { font-size: 0.8rem; color: #94a3b8; }

/* Mic-permission overlay: appears only after the visitor taps Join, so the
   landing page itself stays clean. .open flips it on. */
.modal-overlay {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 50;
    align-items: center;
    justify-content: center;
    padding: 24px;
    background: rgba(2, 6, 23, 0.7);
    -webkit-backdrop-filter: blur(3px);
    backdrop-filter: blur(3px);
}
.modal-overlay.open { display: flex; }
.modal-card {
    width: 100%;
    max-width: 380px;
    background: #0f172a;
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 16px;
    padding: 26px 24px;
    text-align: center;
    box-shadow: 0 20px 60px rgba(2, 6, 23, 0.6);
}
.modal-title { font-size: 1.1rem; font-weight: 600; margin-bottom: 10px; }
.modal-card p { font-size: 0.92rem; color: #cbd5e1; line-height: 1.5; }
.modal-card a { color: #38bdf8; }
.modal-sub { margin-top: 8px; color: #94a3b8 !important; font-size: 0.85rem !important; }
.modal-actions { display: flex; flex-direction: column; gap: 8px; margin-top: 18px; }
.modal-actions #micContinue { background: #38bdf8; color: #0f172a; }
.modal-actions #micContinue:hover { background: #7dd3fc; }
.modal-ghost { background: rgba(255, 255, 255, 0.1); color: #e2e8f0; }
.modal-ghost:hover { background: rgba(255, 255, 255, 0.18); }

.owner-panel {
    display: none;
    background: rgba(34, 197, 94, 0.08);
    border: 1px solid rgba(34, 197, 94, 0.4);
    border-radius: 10px;
    padding: 10px 14px;
    margin-bottom: 18px;
    font-size: 0.82rem;
    color: #cbd5e1;
    line-height: 1.5;
}
.owner-panel input { accent-color: #22c55e; margin-right: 4px; }
.owner-panel label { display: block; margin-top: 6px; }
.ring-note { margin: 6px 0 0; font-size: 0.8rem; color: #94a3b8; }
.owner-panel a { color: #38bdf8; }
.qr-row { display: flex; gap: 12px; align-items: center; margin-top: 10px; }
.qr-preview { width: 84px; height: 84px; border-radius: 6px; background: #fff; flex-shrink: 0; }
.qr-row a { color: #38bdf8; }

/* --- The page profile: what the owner chose to show visitors --- */
.p-profile {
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.09);
    border-radius: 12px;
    padding: 16px;
    margin-bottom: 18px;
    text-align: center;
}
/* Images-only part of the profile, shown above the Join button. */
.p-media { margin-bottom: 14px; }
.p-media img:last-child { margin-bottom: 0; }
.p-logo { max-width: 160px; max-height: 70px; margin: 0 auto 12px; display: block; }
.p-photo {
    display: block;
    width: 100%;
    max-height: 240px;
    object-fit: cover;
    border-radius: 10px;
    margin: 0 auto 12px;
}
.p-text { font-size: 0.9rem; color: #cbd5e1; line-height: 1.6; text-align: left; }
.p-text p + p { margin-top: 8px; }
/* Three-line fold for long page text; pTextMore toggles it (page.html). */
.p-text.folded {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    overflow: hidden;
}
.p-text.folded p { margin: 0; }
.p-more {
    background: none;
    border: none;
    color: #38bdf8;
    cursor: pointer;
    font-size: 0.85rem;
    padding: 0;
    margin: 4px 0 0;
    display: block;
}
.p-more:hover { text-decoration: underline; }
.p-contact { margin-top: 12px; font-size: 0.85rem; }
.p-contact a { color: #38bdf8; text-decoration: none; }
.p-contact a:hover { text-decoration: underline; }
.p-sep { color: #475569; margin: 0 8px; }
.p-links { margin-top: 10px; display: flex; gap: 8px; flex-wrap: wrap; justify-content: center; }
.p-links a {
    background: rgba(56, 189, 248, 0.12);
    border: 1px solid rgba(56, 189, 248, 0.35);
    border-radius: 20px;
    padding: 5px 12px;
    font-size: 0.8rem;
    color: #7dd3fc;
    text-decoration: none;
}
.p-links a:hover { background: rgba(56, 189, 248, 0.22); }

/* Owner's editor for the block above (inside .owner-panel). */
.profile-edit { margin-top: 10px; border-top: 1px solid rgba(34, 197, 94, 0.25); padding-top: 8px; }
.profile-form { margin-top: 8px; }
.pf { display: block; margin-bottom: 8px; }
.pf span, .pf-lab { display: block; font-size: 0.75rem; color: #94a3b8; margin: 8px 0 3px; }
.profile-form input[type=text], .profile-form input[type=email],
.profile-form input[type=tel], .profile-form input[type=url], .profile-form textarea {
    width: 100%;
    background: rgba(2, 6, 23, 0.5);
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: 8px;
    padding: 7px 9px;
    color: #e2e8f0;
    font: inherit;
    font-size: 0.82rem;
    margin: 0;
}
.profile-form textarea { min-height: 70px; resize: vertical; }
.pf-media { display: flex; gap: 16px; flex-wrap: wrap; margin: 8px 0; }
.pf-media > div { flex: 1; min-width: 130px; }
.pf-media img { max-width: 100%; max-height: 60px; border-radius: 6px; margin-bottom: 4px; display: block; }
.pf-media input[type=file] { font-size: 0.7rem; color: #94a3b8; max-width: 100%; }
/* The one entry point to the whole editor — kept loud so owners spot it. */
a.owner-link-btn { text-decoration: none; display: inline-block; }
.pf-edit-hint { font-size: 0.75rem; color: #94a3b8; }
.agent-panel-head { margin: 0 0 4px; }
.edit-back { text-align: left; margin: 0 0 12px; font-size: 0.85rem; }
.edit-back a { color: #38bdf8; text-decoration: none; }
.edit-back a:hover { text-decoration: underline; }
.pf-edit-btn {
    font-size: 0.95rem;
    font-weight: 600;
    padding: 10px 18px;
    background: rgba(34, 197, 94, 0.18);
    border: 1px solid rgba(34, 197, 94, 0.5);
}
.pf-edit-btn:hover { background: rgba(34, 197, 94, 0.3); }
/* Import-from-website block at the top of the editor form. */
.pf-import { margin-bottom: 10px; padding-bottom: 8px; border-bottom: 1px solid rgba(148, 163, 184, 0.25); }
.pf-import-row { display: flex; gap: 6px; }
.pf-import-row input[type=url] { flex: 1; min-width: 0; }
.pf-import-row .owner-link-btn { flex-shrink: 0; }
.pf-import-imgs { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 8px; }
.pf-import-imgs > div { display: flex; align-items: center; gap: 8px; }
.pf-import-imgs img {
    height: 40px;
    max-width: 80px;
    object-fit: contain;
    border-radius: 6px;
    background: rgba(255, 255, 255, 0.15);
}
/* ↩ chip under a field the import changed. */
.pf-undo { font-size: 0.7rem; padding: 2px 8px; margin: 2px 0 4px; display: inline-block; }
/* Post-import offer to hand the scraped briefing to the AI assistant. */
.pf-teach { display: block; margin-top: 6px; }
.pf-link { display: flex; gap: 6px; margin-bottom: 6px; }
.pf-link input[type=text] { flex: 1; }
.pf-link input[type=url] { flex: 2; }
.pf-bg { margin: 8px 0; }
.pf-bg img { max-width: 100%; max-height: 90px; border-radius: 6px; margin-bottom: 4px; display: block; }
.pf-bg input[type=file] { font-size: 0.7rem; color: #94a3b8; max-width: 100%; }
.pf-bg-op { display: block; margin-top: 8px; }
.pf-bg-op span { font-size: 0.75rem; color: #94a3b8; }
.pf-bg-op b { color: #e2e8f0; }
.pf-bg-op input[type=range] { width: 100%; display: block; margin-top: 4px; }
#pfSave {
    background: #16a34a;
    color: #fff;
    border: 0;
    border-radius: 8px;
    padding: 8px 14px;
    font: inherit;
    font-size: 0.82rem;
    font-weight: 500;
    cursor: pointer;
    margin-top: 10px;
    width: auto;
}
#pfSave:hover { background: #15803d; }
#pfSave:disabled { opacity: 0.5; cursor: default; }

/* --- AI voice agent --- */
.agent-panel {
    background: rgba(56, 189, 248, 0.08);
    border-color: rgba(56, 189, 248, 0.4);
}
.agent-panel input[type="checkbox"] { accent-color: #38bdf8; }
.agent-panel textarea {
    width: 100%;
    min-height: 80px;
    margin: 8px 0;
    font-size: 0.82rem;
}
.agent-panel button { font-size: 0.82rem; padding: 6px 12px; }
.agent-panel button.save-ok { background: #22c55e; color: #06281a; }
.agent-note { font-size: 0.78rem; color: #94a3b8; margin: 0 0 8px; }
.mic-note { font-size: 0.8rem; color: #94a3b8; text-align: center; margin: 10px 0 0; }
.mic-note a { color: #38bdf8; }
.agent-inbox { margin-top: 10px; }
.agent-inbox details {
    background: rgba(255, 255, 255, 0.05);
    border-radius: 8px;
    padding: 6px 10px;
    margin-top: 6px;
}
.agent-inbox summary { cursor: pointer; }
.inbox-dl { font-size: 0.78rem; padding: 4px 10px; margin: 6px 0 4px; }
#agentDownload { margin-top: 8px; }

.agent-offer {
    background: rgba(56, 189, 248, 0.08);
    border: 1px solid rgba(56, 189, 248, 0.4);
    border-radius: 10px;
    padding: 12px 14px;
    margin: 14px 0;
    text-align: center;
}
.agent-offer p { margin: 0 0 10px; font-size: 0.9rem; color: #cbd5e1; }
.agent-lang-row { display: block; margin: 0 0 10px; font-size: 0.85rem; color: #cbd5e1; text-align: center; }
.agent-lang-row select {
    font-size: 0.85rem;
    padding: 4px 8px;
    margin-left: 4px;
    background: #0f172a;
    color: #e2e8f0;
    border: 1px solid rgba(148, 163, 184, 0.4);
    border-radius: 8px;
}

/* Owner quick switch: who answers calls */
.agent-mode {
    margin: 10px 0 4px;
    padding: 8px 12px;
    background: rgba(255, 255, 255, 0.05);
    border-radius: 8px;
}
.agent-mode input[type="radio"] { accent-color: #38bdf8; }

.agent-box {
    background: rgba(56, 189, 248, 0.08);
    border: 1px solid rgba(56, 189, 248, 0.4);
    border-radius: 10px;
    padding: 12px 14px;
    margin: 14px 0;
}
.agent-title { margin: 0 0 8px; font-weight: 600; }
.agent-live { color: #22c55e; font-size: 0.75rem; margin-left: 6px; }
.agent-captions {
    max-height: 180px;
    overflow-y: auto;
    font-size: 0.85rem;
    line-height: 1.5;
    margin-bottom: 10px;
}
.cap-user { color: #e2e8f0; margin: 4px 0; }
.cap-assistant { color: #7dd3fc; margin: 4px 0; }
.cap-note { color: #94a3b8; font-style: italic; margin: 6px 0 0; }

/* Typed input to the assistant — for details that must be spelled exactly */
.agent-type { display: flex; gap: 8px; margin-bottom: 4px; }
.agent-type-note { margin: 0 0 10px; font-size: 0.82rem; color: #cbd5e1; }
.agent-type input { flex: 1; padding: 9px 12px; font-size: 0.88rem; }
.agent-type button {
    background: #38bdf8;
    color: #0f172a;
    font-size: 0.88rem;
    padding: 9px 14px;
    white-space: nowrap;
}
.agent-type button:hover { background: #7dd3fc; }

/* In-call typed chat between two humans (peer-to-peer, ephemeral) */
.call-chat {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 10px;
    padding: 12px 14px;
    margin: 14px 0;
}
.chat-msgs {
    max-height: 160px;
    overflow-y: auto;
    font-size: 0.85rem;
    line-height: 1.5;
}
.chat-msgs:not(:empty) { margin-bottom: 10px; }
.chat-you { color: #7dd3fc; margin: 4px 0; }
.chat-them { color: #e2e8f0; margin: 4px 0; }
.call-chat form { display: flex; gap: 8px; }
.call-chat input { flex: 1; padding: 9px 12px; font-size: 0.88rem; }
.call-chat form button {
    background: #38bdf8;
    color: #0f172a;
    font-size: 0.88rem;
    padding: 9px 14px;
    white-space: nowrap;
}
.call-chat form button:hover { background: #7dd3fc; }

/* Private owner link (post-claim message and owner panel) */
.owner-link {
    display: block;
    word-break: break-all;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 8px;
    padding: 8px 10px;
    margin: 8px 0;
    font-size: 0.82rem;
    color: #38bdf8;
}
.claim-success {
    display: block;
    text-align: left;
    font-size: 0.9rem;
    line-height: 1.6;
    color: #cbd5e1;
    margin-top: 8px;
}
.claim-success button, .owner-link-btn {
    background: rgba(255, 255, 255, 0.1);
    color: #e2e8f0;
    font-size: 0.85rem;
    padding: 8px 14px;
    border-radius: 8px;
}
.claim-success button:hover, .owner-link-btn:hover { background: rgba(255, 255, 255, 0.18); }
.claim-success .goto-page {
    display: inline-block;
    margin-left: 10px;
    color: #38bdf8;
    text-decoration: none;
    font-weight: 600;
}

/* --- Video --- */
.video-area {
    display: none;
    position: relative;
    margin-bottom: 16px;
    border-radius: 12px;
    overflow: hidden;
    background: #000;
}
#remoteVideo { width: 100%; display: block; min-height: 180px; }
#selfVideo {
    position: absolute;
    right: 10px;
    bottom: 10px;
    width: 26%;
    border-radius: 8px;
    border: 1px solid rgba(255, 255, 255, 0.35);
}

#videoBtn {
    display: none;
    width: 100%;
    margin-top: 12px;
    background: rgba(255, 255, 255, 0.1);
    color: #e2e8f0;
    font-size: 0.95rem;
    padding: 12px;
}
#videoBtn:hover { background: rgba(255, 255, 255, 0.18); }

.video-prompt {
    display: none;
    background: rgba(56, 189, 248, 0.1);
    border: 1px solid #38bdf8;
    border-radius: 12px;
    padding: 14px;
    margin-top: 12px;
    font-size: 0.9rem;
    color: #cbd5e1;
    line-height: 1.5;
}
.prompt-actions { display: flex; gap: 10px; margin-top: 10px; }
.prompt-actions button { flex: 1; font-size: 0.9rem; padding: 10px; }
#videoAccept { background: #38bdf8; color: #0f172a; }
#videoDecline { background: rgba(255, 255, 255, 0.1); color: #e2e8f0; }

#camBtn { background: rgba(255, 255, 255, 0.1); color: #e2e8f0; }
#camBtn.off { background: #fbbf24; color: #0f172a; }

/* --- Post-call rating popup --- */
.rating-popup {
    display: none;
    background: rgba(56, 189, 248, 0.1);
    border: 1px solid #38bdf8;
    border-radius: 12px;
    padding: 14px;
    margin-top: 12px;
    font-size: 0.9rem;
    color: #cbd5e1;
    line-height: 1.5;
}
.rating-q { margin-top: 10px; }
.stars { display: flex; gap: 4px; margin-top: 2px; }
.stars button {
    background: none;
    border: none;
    padding: 0 3px;
    font-size: 1.5rem;
    line-height: 1;
    color: #475569;
    cursor: pointer;
}
.stars button.on { color: #fbbf24; }
#ratingSend { background: #38bdf8; color: #0f172a; }
#ratingSend:disabled { opacity: 0.45; }
#ratingSkip { background: rgba(255, 255, 255, 0.1); color: #e2e8f0; }
#ratingThanks { display: none; color: #34d399; margin-top: 10px; text-align: center; }

/* --- Mic-help screenshots --- */
.help-shot { display: block; margin: 10px 0 4px; }
.help-shot img {
    display: block;
    width: 100%;
    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: 8px;
}

/* --- Roadmap --- */
.roadmap-box { margin-top: 28px; }
.roadmap-box summary {
    cursor: pointer;
    color: #38bdf8;
    font-size: 0.92rem;
}
.roadmap-box summary:hover { text-decoration: underline; }
.roadmap-box h2 { margin-top: 14px; }
/* Done items: brighter text, clear green strike line (= achieved, not removed). */
#roadmap s {
    color: #94a3b8;
    text-decoration-color: #34d399;
    text-decoration-thickness: 2px;
}
.roadmap-date { color: #64748b; font-size: 0.8rem; }
.request-row { display: flex; gap: 8px; margin: 4px 0 2px; }
.request-row input { padding: 8px 10px; font-size: 0.88rem; }
.request-row button {
    background: rgba(255, 255, 255, 0.1);
    color: #e2e8f0;
    font-size: 0.85rem;
    padding: 8px 14px;
    border-radius: 8px;
    white-space: nowrap;
}
.request-row button:hover { background: rgba(255, 255, 255, 0.18); }

.footer {
    margin-top: 28px;
    padding-top: 16px;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    font-size: 0.78rem;
    color: #64748b;
    text-align: center;
    line-height: 1.6;
}
.footer a { color: #38bdf8; text-decoration: none; }

/* --- Site footer: the subtle "Powered by OneDo.me" growth bar below the card --- */
.site-footer {
    width: 100%;
    max-width: 480px;
    margin: 18px auto 0;
    text-align: center;
}
.site-footer .powered {
    display: inline-block;
    font-size: 0.85rem;
    color: #cbd5e1;
    background: rgba(15, 23, 42, 0.55);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 999px;
    padding: 9px 18px;
}
.site-footer .powered a { color: #e2e8f0; text-decoration: none; font-weight: 600; }
.claim-link {
    background: none;
    border: none;
    padding: 0;
    font: inherit;
    font-weight: 600;
    color: #38bdf8;
    cursor: pointer;
    text-decoration: underline;
}
.claim-link:hover { color: #7dd3fc; }
.claim-box {
    max-width: 360px;
    margin: 12px auto 0;
    background: rgba(15, 23, 42, 0.6);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 14px;
    padding: 16px;
    text-align: left;
}
.site-footer .legal {
    margin-top: 14px;
    font-size: 0.72rem;
    color: #e2e8f0;
    line-height: 1.6;
}
.site-footer .legal a { color: #e2e8f0; text-decoration: underline; }

/* Owner-only platform section, tucked inside the hidden owner panel */
.owner-extra { margin-top: 14px; border-top: 1px solid rgba(255, 255, 255, 0.1); padding-top: 10px; }
.owner-extra summary { cursor: pointer; color: #93c5fd; font-size: 0.85rem; }
.owner-extra h3 { font-size: 0.95rem; margin: 10px 0 6px; }

/* --- Feedback --- */
textarea { min-height: 90px; resize: vertical; }
.feedback-btn { margin-top: 10px; width: 100%; background: rgba(255,255,255,0.1); color: #e2e8f0; font-size: 0.95rem; padding: 12px; }
.feedback-btn:hover { background: rgba(255,255,255,0.18); }
#feedbackThanks { display: none; color: #34d399; font-size: 0.95rem; margin-top: 10px; text-align: center; }

/* --- Floating prices window (desktop only) ---
   Hidden by default; only appears on wide screens, same breakpoint as the
   homepage's .side-pic. Drag/resize/persistence live in pricing-panel.js;
   this just supplies the box, the grab handle and native CSS resize. */
.pricing-panel, .pricing-reopen { display: none; }
@media (min-width: 1100px) {
    .pricing-panel {
        display: flex;
        flex-direction: column;
        position: fixed;
        top: 120px;
        right: 24px;
        width: 320px;
        height: 380px;
        min-width: 240px;
        min-height: 160px;
        max-width: 90vw;
        max-height: 80vh;
        background: rgba(15, 23, 42, 0.92);
        border: 1px solid rgba(255, 255, 255, 0.14);
        border-radius: 14px;
        box-shadow: 0 12px 40px rgba(2, 6, 23, 0.45);
        -webkit-backdrop-filter: blur(8px);
        backdrop-filter: blur(8px);
        overflow: hidden;
        resize: both;
        z-index: 40;
    }
    .pricing-panel[hidden] { display: none; }
    .pricing-panel-head {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 10px 12px;
        background: rgba(56, 189, 248, 0.12);
        border-bottom: 1px solid rgba(255, 255, 255, 0.1);
        cursor: grab;
        font-size: 0.85rem;
        font-weight: 600;
        -webkit-user-select: none;
        user-select: none;
        touch-action: none;
    }
    .pricing-panel-head:active { cursor: grabbing; }
    .pricing-panel-close {
        background: none;
        border: none;
        color: #94a3b8;
        font-size: 1.1rem;
        line-height: 1;
        cursor: pointer;
        padding: 2px 4px;
    }
    .pricing-panel-close:hover { color: #e2e8f0; }
    .pricing-panel-body {
        padding: 14px 16px;
        overflow-y: auto;
        flex: 1;
        font-size: 0.88rem;
        line-height: 1.55;
    }
    .pricing-panel-body p { margin: 0 0 10px; }
    .pricing-panel-body p:last-child { margin-bottom: 0; }

    .pricing-reopen.show {
        display: block;
        position: fixed;
        top: 120px;
        right: 24px;
        z-index: 40;
        background: rgba(56, 189, 248, 0.15);
        border: 1px solid rgba(56, 189, 248, 0.5);
        color: #e2e8f0;
        border-radius: 999px;
        padding: 8px 16px;
        font-size: 0.82rem;
        cursor: pointer;
    }
    .pricing-reopen.show:hover { background: rgba(56, 189, 248, 0.25); }

    /* On the light base of backdrop pages the pale pill text disappears —
       flip it dark and bold there. */
    body.has-backdrop .pricing-reopen.show {
        color: #0f172a;
        font-weight: 700;
        border-color: rgba(2, 132, 199, 0.65);
        background: rgba(56, 189, 248, 0.3);
    }
    body.has-backdrop .pricing-reopen.show:hover { background: rgba(56, 189, 248, 0.45); }
}

/* --- Legal documents (/terms, /privacy, /dpa) --- */
/* Long reading text instead of a call card: a wider column, left-aligned, and
   the page pinned to the top so a document taller than the viewport is not
   clipped by the body's vertical centring. */
body.legal-page { align-items: flex-start; }
.card.legal-doc { max-width: 760px; }
.legal-doc h1 { font-size: 1.7rem; text-align: left; margin-bottom: 4px; }
.legal-doc .intro { text-align: left; }
.legal-doc p { font-size: 0.95rem; line-height: 1.7; color: #cbd5e1; margin-bottom: 12px; }
.legal-doc h2 { margin-top: 32px; }
.legal-doc h3 { font-size: 0.98rem; color: #e2e8f0; margin: 22px 0 6px; }
.legal-doc ul, .legal-doc ol { margin-bottom: 12px; }
.legal-doc .footnote { text-align: left; }
.legal-doc .doc-date { font-size: 0.8rem; color: #64748b; }
.legal-doc table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.9rem;
    color: #cbd5e1;
    margin-bottom: 12px;
}
.legal-doc th, .legal-doc td {
    text-align: left;
    padding: 7px 8px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    vertical-align: top;
}
.legal-doc th { color: #94a3b8; font-weight: 600; }
/* Wide tables scroll on their own instead of pushing the page sideways. */
.legal-doc .table-wrap { overflow-x: auto; }

/* --- "Start immediately" declaration, shown wherever something is bought --- */
/* Anyone may subscribe, private individuals included, so the 14-day right of
   withdrawal applies and this tick box is a condition of checkout rather than
   fine print. Used on /pricing and on the top-up button in the owner panel. */
.consent-row {
    display: flex;
    gap: 10px;
    align-items: flex-start;
    font-size: 0.85rem;
    color: #cbd5e1;
    line-height: 1.5;
    text-align: left;
    cursor: pointer;
}
.consent-row input {
    flex: none;
    width: 17px;
    height: 17px;
    margin-top: 2px;
    accent-color: #0ea5e9;
}
.consent-row.needed { color: #fbbf24; }
.consent-row.needed input { outline: 2px solid #fbbf24; outline-offset: 2px; }

/* Team list: one address per row, state and remove beside it. */
.team-row { display: flex; gap: 8px; align-items: center; margin: 6px 0; }
.team-row input { flex: 1 1 auto; min-width: 0; }
.team-row .ring-note { flex: 0 0 auto; margin: 0; white-space: nowrap; }