/* =========================================================================
   POWERED BY OVEBOT — landing page for visitors who clicked the credit
   inside a customer's chat widget.

   Deliberately thin: the hero card, the trust boxes, the section heads, the
   step cards and the closing CTA block are all the site's existing global
   components (styles.css). Everything here is the delta — a centred,
   single-column hero instead of the two-column one the homepage uses, plus
   the demo line and the honeypot.
   ========================================================================= */

/* ===== STRIPPED NAVIGATION BAR =====
   This is a landing page, not a section of the site: the visitor arrived by
   clicking a credit inside somebody's chat widget, and every menu link is a
   way to leave before deciding anything. So the bar keeps exactly two things
   — the logo, which says whose page this is and is the one exit worth
   offering, and the language switcher, which a visitor sent here by a widget
   in the wrong locale still needs.

   The bar itself stays: `.nav-inner` is already `space-between`, so with the
   middle and the buttons gone the two survivors settle left and right on
   their own, at every width. The hamburger and its drawer go too — there is
   no longer a menu behind them.

   Scoped by the layout's own body attribute, so no other page is affected,
   and specific enough (0,2,1) to beat the `display:flex` the ≤1240px
   breakpoint puts on .nav-toggle without reaching for !important. */
body[data-page="powered-by"] .nav-links,
body[data-page="powered-by"] .nav-divider,
body[data-page="powered-by"] .nav-cta .btn,
body[data-page="powered-by"] .nav-toggle,
body[data-page="powered-by"] .mobile-menu {
    display: none;
}

/* The bar sits on the page and scrolls away with it, instead of following the
   visitor down. A sticky bar earns its keep when it carries navigation you
   might want at any moment; two static elements do not, and this page wants
   the eye going down to the form and the screenshot, not held at the top.
   site.js reads this computed position and skips the condense-on-scroll
   behaviour, so no blurred backdrop appears either.

   `relative`, not `static`: the bar carries the language dropdown, which hangs
   below it over <main>. styles.css gives `main` its own `position: relative;
   z-index: 1`, and .nav only outranks it because of the `z-index: 50` that
   comes with being positioned. Make the bar static and that z-index is
   dropped, so <main> paints over the open menu and no language can be
   clicked. `relative` keeps the stacking order and is still not `sticky`. */
body[data-page="powered-by"] .nav {
    position: relative;
}

/* 84px of bar is sized for six menu links, a divider and two buttons. What is
   left here is a logo and a language chip, so most of that height was empty
   space stacked on top of the hero's own padding — together they pushed the
   headline a long way down for no reason. */
body[data-page="powered-by"] .nav-inner,
body[data-page="powered-by"] .nav.scrolled .nav-inner {
    min-height: 62px;
}

/* Almost nothing: the bar above already ends in ~14px of its own padding, and
   the pill only needs enough room not to touch it. */
.pb-hero {
    padding-top: 4px;
    padding-bottom: 8px;
}

/* Single column, centred. The homepage hero pairs its copy with an animated
   chat preview; here the visitor has *just come from* a live chat, so a
   mock-up of one would be a downgrade of what they already saw.

   Nothing fills the right half, so the column has to carry the width on its
   own: at the ~760px a text column normally wants, the 52px headline wrapped
   into a narrow stack floating in the middle of a 1240px .wrap. The measures
   below step down — column, headline, lede — so each block still has a
   comfortable line length inside a page that reads full-width. */
.pb-hero-inner {
    max-width: 1020px;
    margin: 0 auto;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.pb-h1 {
    margin-top: 18px;
    max-width: 900px;
}

.pb-lede {
    margin: 0 auto;
    max-width: 780px;
}

/* The widget-and-panel illustration. It already ships with its own labels and
   a tinted backdrop the same family as the page, so all it needs is an edge
   and a shadow to lift it off the background — no browser chrome, which would
   claim it is one screen when it is two. */
.pb-shot {
    width: 100%;
    margin: 34px 0 0;
    border-radius: 22px;
    overflow: hidden;
    border: 1px solid var(--line-strong);
    background: #ffffff;
    box-shadow:
        0 30px 80px -30px rgba(62, 31, 163, 0.35),
        0 10px 24px -16px rgba(62, 31, 163, 0.18);
    /* An <img> is inline by default and reserves room for a descender under
       it; zeroing the line box removes the sliver of white below the picture. */
    line-height: 0;
}

.pb-shot img {
    display: block;
    width: 100%;
    height: auto;
}

/* The trust row is capped at 540px globally, sized for the homepage's
   narrower headline column. Here it sits under a full-width hero and would
   read as a small huddle off-centre of everything above it.

   It is a sibling of the screenshot now, not a child of the copy column, so
   it has to centre itself. */
.pb-trust.hero-trust {
    max-width: 780px;
    width: 100%;
    margin: 34px auto 0;
}

/* The form is the page's single conversion point, so it gets the width and
   sits directly under the promise.

   The card is wider than the input it holds, on purpose. The label above the
   field is a full sentence and was wrapping onto three lines inside a 560px
   card; 640px gives it one. Any wider and the card starts competing with the
   headline for the eye — it is a field with a sentence over it, not a panel.

   The input row is pinned to 520px, which is exactly what it measured before
   the card grew (560px card minus its 20px padding either side). A 600px
   email field looks like a search bar, and the visitor has to read the whole
   sentence before deciding to type in it.

   Everything inside is centred rather than left-aligned: the row is narrower
   than the card, so a left-aligned label over a centred row would read as a
   misalignment. Centring also survives the other 27 languages, where the
   label's length varies a lot. */
.pb-form {
    width: 100%;
    max-width: 640px;
    text-align: center;
}

/* Shorter than the shared component. The homepage version is the hero's
   centrepiece and can afford the air; here it sits between a headline and a
   screenshot, and every pixel it spends pushes the proof further down the
   page. Vertical longhands only on the input, so the mobile rule's horizontal
   padding still applies — a shorthand here would win on specificity and
   silently undo it. */
.pb-form.hero-url-form {
    padding: 15px 20px 11px;
}

.pb-form .hero-url-label {
    justify-content: center;
    font-size: 16px;
    padding-bottom: 10px;
}

.pb-form .hero-url-input {
    padding-top: 8px;
    padding-bottom: 8px;
}

.pb-form .hero-url-foot {
    padding-top: 9px;
    padding-bottom: 0;
    min-height: 18px;
}

.pb-form .hero-url-row {
    max-width: 520px;
    margin: 0 auto;
    /* Inputs inherit text-align — without this the typed address would sit
       centred in the field. */
    text-align: left;
}

.pb-demo-line {
    margin: 18px 0 0;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 8px;
    font-size: 15px;
    color: var(--ink-muted);
}

.pb-demo-link {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    color: var(--violet-700);
    font-weight: 600;
    text-decoration: none;
    border-bottom: 1px solid transparent;
    transition: color .18s ease, border-color .18s ease;
}

.pb-demo-link:hover {
    color: var(--violet-500);
    border-bottom-color: currentColor;
}

.pb-demo-link svg {
    transition: transform .18s ease;
}

.pb-demo-link:hover svg {
    transform: translateX(2px);
}

/* Honeypot: off-screen rather than display:none. Some bots skip fields that
   are explicitly hidden, and screen readers skip this one anyway because the
   wrapper carries aria-hidden. */
.pb-hp {
    position: absolute;
    left: -9999px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

.pb-section {
    padding: 48px 0;
}

/* Section heads are capped at 760px / 620px globally — right for a
   left-aligned head sitting next to something else, too narrow for a centred
   one over a full-width three-card row. Match the hero's measures so the page
   reads as one column width from top to bottom. */
.pb-section .sec-head.center {
    max-width: 900px;
}

.pb-section .sec-head.center .sec-lede {
    max-width: 780px;
}

/* Equal-height cards, so the two rows read as one list on the way down. */
.pb-section .steps {
    align-items: stretch;
}

/* Icon beside the text rather than above it. That buys vertical compactness
   but costs horizontal room — in a three-across grid the text column drops
   from ~317px to ~265px — so the padding, the badge and the heading all come
   down a notch to pay for it. Below 860px the grid is a single column and
   the layout has room to spare. */
.pb-section .step {
    display: flex;
    align-items: flex-start;
    gap: 15px;
    padding: 26px 24px;
}

/* Without this the body column refuses to shrink below its longest word and
   pushes the card wider than its grid track. */
.pb-card-body {
    min-width: 0;
}

/* Typography for a ~275px column. The global 22px heading and 15px/1.55 body
   are set for a full-width card; at this measure the heading eats three lines
   and the body's lines sit too close for how short they are. */
.pb-section .step h3 {
    font-size: 18px;
    line-height: 1.25;
    margin-bottom: 7px;
}

.pb-section .step p {
    font-size: 14.5px;
    line-height: 1.6;
}

/* ===== ICON BADGES =====
   Six cards, six colours. The site's badge is a single violet gradient
   everywhere else, which is right on pages where the icons are secondary —
   here they are the only thing distinguishing six otherwise identical white
   cards, so each one gets its own hue.

   Both stops of every gradient are dark enough to hold a white icon: the
   135deg ramp puts the light stop in the top-left corner, and the glyph
   crosses the middle. Kept inside the same cool-to-warm family as the brand
   so the row reads as a set rather than a paint chart.

   The glow under each badge is tinted to match — a violet shadow under an
   emerald badge is the detail that makes a coloured set look accidental.

   Fallbacks are the site's own violet: add a seventh card to the lang file
   without a matching .pb-ico-* class and it gets the standard badge, not a
   transparent hole. */
.pb-section .step-icon-circle {
    width: 44px;
    height: 44px;
    border-radius: 13px;
    /* The badge is taller than the heading's first line, so top-aligning the
       two boxes leaves it looking like it has slipped down. Two pixels puts
       its optical centre back on the line. */
    margin-top: 2px;
    background: var(--pb-ico-bg, linear-gradient(135deg, #a88aff 0%, #3e1fa3 100%));
    box-shadow:
        0 8px 20px -6px var(--pb-ico-glow, rgba(62, 31, 163, 0.45)),
        inset 0 1px 0 rgba(255, 255, 255, 0.25);
}

.pb-section .step-icon-circle svg {
    width: 22px;
    height: 22px;
}

/* Row 1 — what you were talking to */
.pb-ico-1 {  /* catalogue — brand violet */
    --pb-ico-bg: linear-gradient(135deg, #a88aff 0%, #3e1fa3 100%);
    --pb-ico-glow: rgba(62, 31, 163, 0.45);
}

.pb-ico-2 {  /* languages — sky */
    --pb-ico-bg: linear-gradient(135deg, #38bdf8 0%, #075985 100%);
    --pb-ico-glow: rgba(7, 89, 133, 0.42);
}

.pb-ico-3 {  /* handover — emerald */
    --pb-ico-bg: linear-gradient(135deg, #34d399 0%, #065f46 100%);
    --pb-ico-glow: rgba(6, 95, 70, 0.42);
}

/* Row 2 — how it is set up */
.pb-ico-4 {  /* your site — indigo */
    --pb-ico-bg: linear-gradient(135deg, #818cf8 0%, #312e81 100%);
    --pb-ico-glow: rgba(49, 46, 129, 0.45);
}

.pb-ico-5 {  /* name and tone — amber */
    --pb-ico-bg: linear-gradient(135deg, #fbbf24 0%, #92400e 100%);
    --pb-ico-glow: rgba(146, 64, 14, 0.4);
}

.pb-ico-6 {  /* one line of code — rose */
    --pb-ico-bg: linear-gradient(135deg, #fb7185 0%, #9f1239 100%);
    --pb-ico-glow: rgba(159, 18, 57, 0.4);
}

/* =========================================================================
   NARROW SCREENS

   The card grid is already stacked by the global 960px breakpoint, so what
   is left here is what this page adds on top of the shared components: a
   centred hero built for a wide column, and a trust row whose global 3-up
   grid was sized for the homepage's much shorter labels.
   ========================================================================= */

@media (max-width: 960px) {
    .pb-section {
        padding: 34px 0;
    }
}

@media (max-width: 640px) {
    .pb-hero {
        padding-bottom: 0;
    }

    /* The frame's radius and shadow are sized for a 1020px card; at a third of
       that they read as a heavy border around a small picture. */
    .pb-shot {
        margin-top: 26px;
        border-radius: 16px;
        box-shadow: 0 16px 40px -22px rgba(62, 31, 163, 0.35);
    }

    /* Three columns inside a ~330px container leaves about four words per
       line of an 11.5px label — a wall of hyphenation. One per row instead,
       laid out sideways: the number leads and the label takes the width it
       needs. */
    .pb-trust.hero-trust {
        grid-template-columns: 1fr;
        gap: 10px;
        margin-top: 26px;
    }

    .pb-trust .trust-box {
        flex-direction: row;
        align-items: baseline;
        gap: 12px;
        padding: 12px 14px;
        text-align: left;
    }

    /* Wide enough for the longest of the three values ("5 min"), so all three
       labels start on the same vertical line instead of stepping. */
    .pb-trust .trust-num {
        flex-shrink: 0;
        min-width: 58px;
    }

    /* .wrap keeps 28px either side on phones, so every pixel the card spends
       on its own padding comes straight out of the text column. */
    .pb-section .step {
        padding: 22px 20px;
        gap: 14px;
    }

    /* Full-width buttons in the closing CTA — two pill buttons side by side
       wrap into an off-centre stack at this width. */
    .pb-section .cta-block-actions {
        display: flex;
        width: 100%;
    }

    .pb-section .cta-block-actions .btn {
        flex: 1 1 100%;
        justify-content: center;
    }
}

/* Below 560px the shared form component gives the input `flex-basis: 100%`,
   which breaks the row into three stacked lines and strands the envelope
   icon alone on the first one. That is the right call for the homepage form,
   where the field holds a full URL and needs the whole width to show it —
   here it holds an email address, which fits beside the icon. So: icon and
   field share line one exactly as on desktop, and only the button wraps.

   The row's own 6px padding plus the icon's 8px reproduce the 13px inset the
   desktop row has, so nothing else needs touching. */
@media (max-width: 560px) {
    .pb-form .hero-url-input {
        flex: 1 1 auto;
    }

    /* Stated rather than left to the component's `width: 100%`, so the wrap
       survives any future change to that rule. */
    .pb-form .hero-url-submit {
        flex-basis: 100%;
    }
}