/*
 * Shared styling for the plugin's first-impression and conversion admin screens:
 * getting started, the legacy upgrade page, post-activation, the Live chat promo,
 * the PRO upgrade page and the Agency upgrade page. Which pages load it is decided
 * in CallNowButton::get_admin_style_handles().
 *
 * All rules are scoped under .cnb-onboarding so nothing here can leak
 * into the rest of wp-admin.
 */

@font-face {
    font-family: 'CNB Icons';
    font-style: normal;
    font-weight: 400;
    src: url("../font/cnb.woff") format('woff');
}

.cnb-onboarding {
    --cnb-color-primary: #0ea449;
    --cnb-color-primary-hover: #0d8e3d;
    /* The brand green is only 3.27:1 on white, so it fails WCAG AA at the
       11-14px sizes used for labels, links and checkmarks. This darker step
       is 5.25:1 on white and 5.02:1 on --cnb-color-primary-light; use it for
       green TEXT, and keep --cnb-color-primary for fills and borders. */
    --cnb-color-primary-text: #0a7d35;
    --cnb-color-primary-light: #f0fdf4;
    --cnb-color-primary-border: #dcfce7;

    --cnb-color-text: #111827;
    /* 4.5:1 on white is effectively the ceiling for a "light" grey, so the
       tertiary step cannot be lighter than this and still be readable; the
       secondary step moves down one to keep the three levels distinct.
       17.7:1 / 7.6:1 / 4.8:1 on white -- all clear WCAG AA. */
    --cnb-color-text-secondary: #4b5563;
    --cnb-color-text-muted: #6b7280;

    --cnb-color-bg: #ffffff;
    --cnb-color-bg-subtle: #f9fafb;
    --cnb-color-border: #e5e7eb;
    --cnb-color-border-light: #f3f4f6;

    --cnb-font-body: 'DM Sans', -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    --cnb-font-display: 'Fraunces', Georgia, serif;

    --cnb-radius-sm: 6px;
    --cnb-radius-md: 10px;
    --cnb-radius-lg: 14px;
    --cnb-radius-full: 100px;

    --cnb-shadow-primary: 0 4px 14px rgba(14, 164, 73, .3);
    --cnb-shadow-regular: 0 4px 14px rgba(0, 0, 0, 0.3);

    max-width: 860px;
    margin: 24px auto 60px;
    padding-right: 20px;
    font-family: var(--cnb-font-body);
    color: var(--cnb-color-text);
}

@media screen and (max-width: 782px) {
    .cnb-onboarding {
        padding-right: 10px;
    }
}

.cnb-onboarding * {
    box-sizing: border-box;
}

.cnb-onboarding .cnb-font-icon i {
    font-family: 'CNB Icons';
    outline: none;
    font-style: normal;
    letter-spacing: normal;
    text-transform: none;
    display: inline-block;
    white-space: nowrap;
    word-wrap: normal;
    direction: ltr;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
    font-feature-settings: 'liga';
    font-size: 26px;
}

/* wp-admin's own link colour is a blue that belongs to the dashboard chrome, not
   to these pages, and it reasserts itself on any link that has not been given a
   colour of its own. Setting it once here means a link added later comes out
   green by default rather than quietly blue. The exceptions are the things that
   are links only structurally: buttons, and pictures wrapped in an anchor. */
.cnb-onboarding a:not(.button):not(.cnb-onb-plan-cta):not(.cnb-onb-chat-button):not(.cnb-onb-feature-shot):not(.cnb-onb-pro-button-shot) {
    color: var(--cnb-color-primary-text);
}

/* ---------- layout ---------- */

.cnb-onb-card {
    background: var(--cnb-color-bg);
    border: 1px solid var(--cnb-color-border);
    border-radius: var(--cnb-radius-lg);
    padding: 32px 36px;
    margin-bottom: 24px;
}

.cnb-onb-section-label {
    display: block;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1.2px;
    color: var(--cnb-color-primary-text);
    margin: 0 0 8px;
}

/* "PRO" is a plan name, not a section heading, so it reads as a tier badge.
   A badge stays quiet through its size and placement rather than through low
   contrast -- washed-out grey text looks unfinished rather than restrained,
   and at 11px uppercase it was 2.54:1, below even the large-text threshold. */
.cnb-onb-section-label--muted,
.cnb-onb-section-label--accent {
    display: inline-block;
    padding: 3px 9px;
    border-radius: var(--cnb-radius-full);
    letter-spacing: 1px;
    line-height: 1.5;
}

.cnb-onb-section-label--muted {
    background: var(--cnb-color-border-light);
    border: 1px solid var(--cnb-color-border);
    color: #374151;
}

/* On the post-activation page PRO is the only thing to act on, so the badge
   carries the brand colour instead of staying deliberately out of the way. */
.cnb-onb-section-label--accent {
    background: var(--cnb-color-primary-light);
    border: 1px solid var(--cnb-color-primary-border);
    color: var(--cnb-color-primary-text);
}

/* ---------- second-screen chrome (getting-started) ----------
 * The two post-install screens are setup followed by an offer, not a wizard:
 * screen 2 is ours, not a step the reader has to complete. So there is no step
 * indicator and no "back to step 1" - the confirmation bar carries the way back.
 */

/* Confirms screen 1 landed, at the top of screen 2. The plugin's own "settings
   updated" notice cannot appear on this screen, and moving someone on without
   saying the save worked leaves them checking their own site to be sure. */
.cnb-onb-done {
    display: flex;
    align-items: baseline;
    gap: 10px;
    margin: 0 0 20px;
    padding: 14px 20px;
    background: var(--cnb-color-primary-light);
    border: 1px solid var(--cnb-color-primary-border);
    border-radius: var(--cnb-radius-md);
    font-size: 13.5px;
    line-height: 1.6;
    color: var(--cnb-color-text);
}

.cnb-onb-done-mark {
    flex: none;
    color: var(--cnb-color-primary-text);
    font-weight: 700;
}

.cnb-onb-done a {
    margin-left: 4px;
    color: var(--cnb-color-primary-text);
    white-space: nowrap;
}

/* Screen 2's heading is the page's h1 and carries a full sentence, so it wants a
   little less size, and a looser line than the display font's default: Fraunces
   has long descenders that ran into the line below once the title wrapped. */
.cnb-onboarding--steps .cnb-onb-hero h1 {
    font-size: 24px;
    line-height: 1.3;
}

/* ---------- the first milestone (getting-started screen 2) ----------
 * A working call button is the reason they installed the plugin, so it gets
 * the biggest statement on the screen: a tinted card, a larger tick, and a
 * display-size headline. Confetti (enqueued by the view) does the rest.
 */

.cnb-onb-celebrate {
    padding: 44px 36px 36px;
    background: linear-gradient(180deg, var(--cnb-color-primary-light) 0%, var(--cnb-color-bg) 70%);
    border-color: var(--cnb-color-primary-border);
}

.cnb-onb-hero-icon--celebrate {
    width: 88px;
    height: 88px;
    margin-bottom: 20px;
    animation: cnb-onb-pop .5s cubic-bezier(.34, 1.56, .64, 1) both;
}

.cnb-onb-hero-icon--celebrate svg {
    width: 44px;
    height: 44px;
}

@keyframes cnb-onb-pop {
    from { transform: scale(.4); opacity: 0; }
    to   { transform: scale(1);  opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
    .cnb-onb-hero-icon--celebrate {
        animation: none;
    }
}

/* Outranks the smaller .cnb-onboarding--steps h1 size below, which is meant
   for the full-sentence offer heading, not this one. */
.cnb-onboarding--steps .cnb-onb-celebrate h1 {
    font-size: clamp(30px, 5vw, 42px);
    font-weight: 800;
    line-height: 1.15;
    margin-bottom: 12px;
}

.cnb-onb-hero h1 em,
.cnb-onb-hero h2 em {
    font-style: italic;
    color: var(--cnb-color-primary-text);
}

.cnb-onb-hero p.cnb-onb-celebrate-lead {
    font-size: 16px;
    max-width: 520px;
    color: var(--cnb-color-text);
}

/* The number itself is the way to change it. The pencil only appears on hover
   or focus, so the sentence reads cleanly; on touch screens there is no hover
   to reveal it, so there it stays visible. */
.cnb-onb-celebrate-lead a.cnb-onb-number-edit {
    white-space: nowrap;
    text-decoration: none;
}

/* Dotted at rest to say "this does something", solid once pointed at. */
.cnb-onb-celebrate-lead a.cnb-onb-number-edit strong {
    text-decoration: underline dotted;
    text-decoration-thickness: 1.5px;
    text-underline-offset: 3px;
}

.cnb-onb-celebrate-lead a.cnb-onb-number-edit:hover strong,
.cnb-onb-celebrate-lead a.cnb-onb-number-edit:focus strong {
    text-decoration-style: solid;
}

/* Takes no width while hidden, so the sentence has no gap in it; on hover it
   opens up to its full width. */
.cnb-onb-number-edit .dashicons {
    width: 0;
    height: 16px;
    margin-left: 0;
    overflow: hidden;
    font-size: 16px;
    vertical-align: -2px;
    opacity: 0;
    transition: opacity .15s, width .15s, margin-left .15s;
}

.cnb-onb-number-edit:hover .dashicons,
.cnb-onb-number-edit:focus .dashicons {
    width: 16px;
    margin-left: 4px;
    opacity: 1;
}

@media (hover: none) {
    .cnb-onb-number-edit .dashicons {
        width: 16px;
        margin-left: 4px;
        opacity: 1;
    }
}

/* What to do next with the button they already have, one tile per settings tab. */
.cnb-onb-quicklinks {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
    margin-top: 28px;
    text-align: left;
}

.cnb-onboarding a.cnb-onb-quicklink {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 16px;
    background: var(--cnb-color-bg);
    border: 1px solid var(--cnb-color-border);
    border-radius: var(--cnb-radius-md);
    color: var(--cnb-color-text);
    text-decoration: none;
    transition: border-color .15s, box-shadow .15s;
}

.cnb-onboarding a.cnb-onb-quicklink:hover,
.cnb-onboarding a.cnb-onb-quicklink:focus {
    border-color: var(--cnb-color-primary);
    box-shadow: 0 2px 10px rgba(14, 164, 73, .15);
    color: var(--cnb-color-text);
}

.cnb-onb-quicklink-icon.dashicons {
    width: 32px;
    height: 32px;
    margin-bottom: 6px;
    border-radius: var(--cnb-radius-sm);
    background: var(--cnb-color-primary-light);
    color: var(--cnb-color-primary-text);
    font-size: 18px;
    line-height: 32px;
    text-align: center;
}

.cnb-onb-quicklink-title {
    font-size: 14px;
    font-weight: 700;
}

.cnb-onb-quicklink-title::after {
    content: " \2192";
    color: var(--cnb-color-primary-text);
}

.cnb-onb-quicklink-text {
    font-size: 12.5px;
    line-height: 1.5;
    color: var(--cnb-color-text-secondary);
}

@media screen and (max-width: 600px) {
    .cnb-onb-celebrate {
        padding: 32px 20px 24px;
    }

    .cnb-onb-quicklinks {
        grid-template-columns: 1fr;
    }
}

/* The free-account card: its badge sits above the heading like the label above
   the celebration's, so the two cards read as a pair. */
.cnb-onb-offer .cnb-onb-section-label--accent {
    margin-bottom: 12px;
}

/* ---------- hero ---------- */

.cnb-onb-hero {
    text-align: center;
}

.cnb-onb-hero-icon {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--cnb-color-primary), var(--cnb-color-primary-hover));
    box-shadow: var(--cnb-shadow-primary);
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 18px;
}

.cnb-onb-hero-icon i {
    color: var(--cnb-color-primary-light);
}

/* Progressive enhancement: evens out the line lengths of the display
   headings so they stop dropping a single word onto the last line. Browsers
   without it just wrap as before. */
.cnb-onb-hero h1,
.cnb-onb-hero h2,
.cnb-onb-why h2,
.cnb-onb-pro h2,
.cnb-onb-compare h2 {
    text-wrap: balance;
}

.cnb-onb-hero h1,
.cnb-onb-hero h2 {
    font-family: var(--cnb-font-display);
    font-size: 26px;
    font-weight: 700;
    color: var(--cnb-color-text);
    margin: 0 0 8px;
}

.cnb-onb-hero p {
    font-size: 14px;
    line-height: 1.65;
    color: var(--cnb-color-text-secondary);
    max-width: 460px;
    margin: 0 auto;
}

.cnb-onb-hero .notice p {
    margin:0;
    max-width: 100%;
}

.cnb-onb-hero h1,
.cnb-onb-hero h2 {
    line-height: 1.3;
}

/* ---------- signup form (wraps CnbHeaderNotices::cnb_settings_email_activation_input()) ---------- */

.cnb-onb-signup {
    background: var(--cnb-color-bg-subtle);
    border-radius: var(--cnb-radius-md);
    padding: 22px 24px;
    margin-top: 26px;
}

.cnb-onb-signup form.cnb_email_activation {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    align-items: flex-start;
    text-align: left;
}

/* The field used to be identified by its placeholder alone, which disappears the
   moment anyone types and is skipped by some screen readers. */
.cnb-onb-signup .cnb_activation_input_label {
    flex-basis: 100%;
    margin: 0 0 2px;
    font-size: 12px;
    font-weight: 700;
    color: var(--cnb-color-text);
}

.cnb-onb-signup .cnb_activation_input_field {
    /* Overrides the sitewide input.cnb_activation_input_field rule's
       max-width: 25em, written for a narrower admin-notice context. Here
       the field should grow to fill the row next to the button. */
    max-width: none;
    flex: 1 1 220px;
    height: 44px;
    padding: 0 14px;
    border: 2px solid var(--cnb-color-border);
    border-radius: var(--cnb-radius-md);
    font-size: 13px;
    font-family: var(--cnb-font-body);
    background: var(--cnb-color-bg);
}

.cnb-onb-signup .cnb_activation_input_field:focus {
    border-color: var(--cnb-color-primary);
    outline: none;
    box-shadow: 0 0 0 4px rgba(14, 164, 73, .12);
}

.cnb-onb-signup input.button.button-primary {
    height: 44px;
    padding: 0 22px;
    background: var(--cnb-color-primary) linear-gradient(135deg, var(--cnb-color-primary), var(--cnb-color-primary-hover));
    border: none;
    border-radius: var(--cnb-radius-md);
    color: #fff;
    font-size: 13px;
    font-weight: 700;
    box-shadow: var(--cnb-shadow-primary);
    white-space: nowrap;
}

.cnb-onb-signup input.button.button-primary:hover,
.cnb-onb-signup input.button.button-primary:focus {
    background: var(--cnb-color-primary-hover);
    color: #fff;
}

/* "No card, no password, cancel any time" answers the objection this audience
   actually has about a free account, so it reads at body size and body contrast
   rather than being folded into the legal line underneath. */
.cnb-onb-signup p.cnb_activation_reassurance {
    flex-basis: 100%;
    max-width: none;
    margin: 6px 0 0;
    font-size: 12.5px;
    line-height: 1.65;
    color: var(--cnb-color-text-secondary);
}

.cnb-onb-signup p.nonessential {
    flex-basis: 100%;
    margin: 8px 0 0;
    font-size: 11.5px;
    line-height: 1.6;
    color: var(--cnb-color-text-muted);
    max-width: none;
    padding-left: 0;
}

.cnb-onb-signup-foot {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 14px;
    margin-top: 22px;
}

.cnb-onb-skip {
    font-size: 12.5px;
    line-height: 1.6;
    color: var(--cnb-color-text-secondary);
    text-decoration: underline;
}

/* ---------- phone number quick form (getting-started, step 1) ----------
 * A call button needs one value, so the welcome screen takes it directly
 * instead of pointing at the settings screen. Same visual weight as the email
 * signup below it, because the two are the page's two steps.
 */

.cnb-onb-number {
    background: var(--cnb-color-bg-subtle);
    border-radius: var(--cnb-radius-md);
    padding: 22px 24px;
    margin-top: 26px;
}

.cnb-onb-number-form {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    align-items: flex-start;
    text-align: left;
}

.cnb-onb-number-form label {
    flex-basis: 100%;
    margin: 0 0 2px;
    font-size: 12px;
    font-weight: 700;
    color: var(--cnb-color-text);
}

.cnb-onb-number-form input[type="tel"] {
    flex: 1 1 220px;
    max-width: none;
    height: 44px;
    margin: 0;
    padding: 0 14px;
    border: 2px solid var(--cnb-color-border);
    border-radius: var(--cnb-radius-md);
    font-size: 13px;
    font-family: var(--cnb-font-body);
    background: var(--cnb-color-bg);
}

.cnb-onb-number-form input[type="tel"]:focus {
    border-color: var(--cnb-color-primary);
    outline: none;
    box-shadow: 0 0 0 4px rgba(14, 164, 73, .12);
}

.cnb-onb-number-form input.button.button-primary {
    height: 44px;
    padding: 0 22px;
    background: var(--cnb-color-primary) linear-gradient(135deg, var(--cnb-color-primary), var(--cnb-color-primary-hover));
    border: none;
    border-radius: var(--cnb-radius-md);
    color: #fff;
    font-size: 13px;
    font-weight: 700;
    box-shadow: var(--cnb-shadow-primary);
    white-space: nowrap;
}

.cnb-onb-number-form input.button.button-primary:hover,
.cnb-onb-number-form input.button.button-primary:focus {
    background: var(--cnb-color-primary-hover);
    color: #fff;
}

.cnb-onb-number .cnb-onb-number-help {
    flex-basis: 100%;
    max-width: none;
    margin: 6px 0 0;
    font-size: 12.5px;
    line-height: 1.65;
    color: var(--cnb-color-text-secondary);
}

.cnb-onb-number .cnb-onb-number-help a {
    color: var(--cnb-color-primary-text);
}

/* Shown instead of the form once a number is saved and the button is on, so
   the welcome screen confirms the state rather than asking again. */
.cnb-onb-number .cnb-onb-number-live {
    max-width: none;
    margin: 0;
    font-size: 14px;
    line-height: 1.6;
    color: var(--cnb-color-text);
}

.cnb-onb-number-live-mark {
    color: var(--cnb-color-primary-text);
    font-weight: 700;
}

.cnb-onb-number .cnb-onb-number-live-sub {
    max-width: none;
    margin: 8px 0 0;
    font-size: 12.5px;
    line-height: 1.6;
    color: var(--cnb-color-text-secondary);
}

.cnb-onb-number-live-sub a {
    color: var(--cnb-color-primary-text);
}

/* The call to action is the next thing to do, not a footnote on the status text
   above it, so it gets its own gap and a rule to separate the two. */
.cnb-onb-number .cnb-onb-number-next {
    max-width: none;
    margin: 20px 0 0;
    padding-top: 20px;
    border-top: 1px solid var(--cnb-color-border);
}

.cnb-onb-number-next .button.button-primary {
    display: inline-block;
    height: auto;
    padding: 13px 26px;
    /* A fixed line-height equal to the height is what made this label sit off
       centre as soon as it grew past one word. */
    line-height: 1.3;
    background: var(--cnb-color-primary) linear-gradient(135deg, var(--cnb-color-primary), var(--cnb-color-primary-hover));
    border: none;
    border-radius: var(--cnb-radius-md);
    color: #fff;
    font-size: 13px;
    font-weight: 700;
    text-decoration: none;
    box-shadow: var(--cnb-shadow-primary);
}

.cnb-onb-number-next .button.button-primary:hover,
.cnb-onb-number-next .button.button-primary:focus {
    background: var(--cnb-color-primary-hover);
    color: #fff;
}

/* ---------- getting started, screen 1: layout ----------
 * Activating the plugin changes nothing on the site, so the screen opens by
 * saying so (the confirmation bar), then sets expectations (one step, about
 * 30 seconds) and shows the result before it is asked for (the phone preview).
 * Form on the left, preview on the right; the preview drops under the form on
 * narrow screens.
 */

.cnb-onb-installed p {
    margin: 0;
    font-size: inherit;
    line-height: inherit;
    color: inherit;
}

.cnb-onb-installed strong {
    color: var(--cnb-color-primary-text);
}

.cnb-onb-start {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 36px;
}

.cnb-onb-start-main {
    flex: 1 1 340px;
    min-width: 0;
}

.cnb-onb-start h1 {
    margin: 0 0 10px;
    padding: 0;
    font-family: var(--cnb-font-display);
    font-size: 30px;
    font-weight: 800;
    line-height: 1.2;
    color: var(--cnb-color-text);
    text-wrap: balance;
}

.cnb-onb-start-main > p {
    margin: 0;
    font-size: 14px;
    line-height: 1.65;
    color: var(--cnb-color-text-secondary);
}

.cnb-onb-start .cnb-onb-number {
    margin-top: 22px;
}

.cnb-onb-start .cnb-onb-number .cnb-onb-number-help + .cnb-onb-number-help {
    margin-top: 0;
}

.cnb-onb-start-main > p.cnb-onb-start-skip {
    display: flex;
    flex-direction: column;
    gap: 2px;
    margin-top: 20px;
    padding-top: 16px;
    border-top: 1px solid var(--cnb-color-border-light);
    font-size: 12.5px;
    line-height: 1.6;
}

.cnb-onb-start-skip a {
    font-size: 13px;
    font-weight: 600;
}

/* The phone. Grey bars stand in for any website; the green circle is the
   default call button, bottom right, using the plugin's own phone icon. */
.cnb-onb-preview {
    flex: 0 0 200px;
    margin: 0 auto;
    text-align: center;
}

.cnb-onb-preview-phone {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 10px;
    width: 200px;
    height: 380px;
    margin: 0 auto;
    padding: 26px 16px;
    border: 9px solid #1f2937;
    border-radius: 32px;
    background: var(--cnb-color-bg);
    overflow: hidden;
}

.cnb-onb-preview-line {
    display: block;
    flex: none;
    height: 8px;
    border-radius: 4px;
    background: var(--cnb-color-border);
}

.cnb-onb-preview-line--title {
    width: 60%;
    height: 12px;
}

.cnb-onb-preview-line--short {
    width: 70%;
}

.cnb-onb-preview-block {
    display: block;
    flex: none;
    height: 72px;
    border-radius: 8px;
    background: var(--cnb-color-border-light);
}

.cnb-onb-preview-block--small {
    height: 48px;
}

.cnb-onb-preview-button {
    position: absolute;
    right: 14px;
    bottom: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 52px;
    height: 52px;
    border-radius: 50%;
    background: var(--cnb-color-primary);
    box-shadow: var(--cnb-shadow-regular);
}

.cnb-onboarding .cnb-onb-preview-button i {
    color: #fff;
    font-size: 24px;
}

.cnb-onb-preview figcaption {
    margin-top: 10px;
    font-size: 12.5px;
    line-height: 1.5;
    color: var(--cnb-color-text-secondary);
}

@media screen and (max-width: 600px) {
    .cnb-onb-start {
        gap: 28px;
    }

    .cnb-onb-start h1 {
        font-size: 26px;
    }

    .cnb-onb-preview {
        flex-basis: 100%;
    }
}

/* Screen 2: a nudge to test the button where it actually shows, on a phone. */
.cnb-onb-hero p.cnb-onb-try {
    max-width: 480px;
    margin: 18px auto 0;
    padding: 12px 16px;
    background: var(--cnb-color-bg);
    border: 1px solid var(--cnb-color-border);
    border-radius: var(--cnb-radius-md);
    font-size: 13px;
    line-height: 1.6;
    color: var(--cnb-color-text);
}

/* Screen 2: the way out, after every card, so someone who has read to the
   end without signing up has somewhere to go. Not in a card: it's the page's
   ending, not another offer. */
.cnb-onboarding p.cnb-onb-decline {
    margin: 8px 0 0;
    text-align: center;
    font-size: 13.5px;
    line-height: 1.6;
}

.cnb-onb-decline a {
    font-weight: normal;
    text-decoration: none;
}

/* Screen 2: the PRO link on its own line, centered, so it reads as the card's
   one action rather than the tail of a paragraph. */
.cnb-onb-pro--compact p.cnb-onb-pro-more {
    margin: 18px 0 0;
    text-align: center;
    font-size: 14px;
}

/* Screen 2: the channel grid in two labelled groups. Brand apps keep their
   own colors; the generic actions are a neutral slate (set in
   CnbOnboardingActions), so green stays the color of things to click. The
   tighter items fit all ten "ways to reach you" on one row of the card. */
.cnb-onb-hero p.cnb-onb-action-group-label {
    max-width: none;
    margin: 28px 0 0;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 1.2px;
    text-transform: uppercase;
    color: var(--cnb-color-text-secondary);
}

.cnb-onb-actions-grid--wide.cnb-onb-actions-grid--grouped {
    gap: 18px 8px;
    margin-top: 14px;
}

.cnb-onb-actions-grid--wide.cnb-onb-actions-grid--grouped .cnb-onb-action-item {
    flex: 0 0 66px;
}

/* Where the prefilled email came from, so the wrong owner notices it. */
.cnb-onb-signup p.cnb_activation_prefill_hint {
    flex-basis: 100%;
    max-width: none;
    margin: 2px 0 0;
    font-size: 12.5px;
    line-height: 1.6;
    color: var(--cnb-color-text-secondary);
}

/* ---------- "already have an account" disclosure ----------
 * Native <details>, collapsed: the API key route matters to a small minority
 * (second site, agency, reinstall) and would only add noise for everyone else,
 * but it should not be reachable solely through an error notice.
 */

.cnb-onb-existing {
    width: 100%;
    text-align: left;
}

.cnb-onb-existing > summary {
    cursor: pointer;
    font-size: 12px;
    color: var(--cnb-color-text-secondary);
    text-decoration: underline;
    text-align: center;
    list-style: none;
}

.cnb-onb-existing > summary::-webkit-details-marker {
    display: none;
}

/* Once it is open the question has been answered, so the link that asked it goes
   away and the panel below carries the heading instead. Keeps one line of text on
   screen rather than the same sentence twice, one above the other. */
.cnb-onb-existing[open] > summary {
    display: none;
}

.cnb-onb-existing-body {
    max-width: 460px;
    margin: 0 auto;
    padding: 16px 20px;
    background: var(--cnb-color-bg-subtle);
    border-radius: var(--cnb-radius-md);
    text-align: center;
}

.cnb-onb-existing-body h3 {
    margin: 0 0 6px;
    padding: 0;
    font-family: var(--cnb-font-body);
    font-size: 13px;
    font-weight: 700;
    line-height: 1.4;
    color: var(--cnb-color-text);
}

.cnb-onb-existing-body p {
    max-width: none;
    margin: 0;
    font-size: 12.5px;
    line-height: 1.65;
    color: var(--cnb-color-text-secondary);
}

.cnb-onb-existing-body a {
    color: var(--cnb-color-primary-text);
}

/* ---------- action unlock grid ---------- */

.cnb-onb-actions-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(78px, 1fr));
    gap: 18px 8px;
    margin-top: 18px;
}

/* On the wizard's second screen the grid IS the pitch rather than a supporting
   card, so it sits full width in a centered hero and the labels read at body
   size instead of caption size. */
/* Flex rather than grid so a short last row is centered under the others
   instead of hanging off the left edge: thirteen icons rarely divide evenly. */
.cnb-onb-actions-grid--wide {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 22px 10px;
    margin-top: 28px;
    margin-bottom: 4px;
}

.cnb-onb-actions-grid--wide .cnb-onb-action-item {
    flex: 0 0 88px;
}

.cnb-onb-actions-grid--wide .cnb-onb-action-item span {
    font-size: 12px;
    line-height: 1.4;
}

/* Bigger badges here too: thirteen icons are the whole argument on this card,
   not a supporting row. */
.cnb-onb-actions-grid--wide .cnb-onb-action-badge {
    width: 52px;
    height: 52px;
}

.cnb-onb-actions-grid--wide .cnb-onb-action-badge.cnb-font-icon i {
    font-size: 34px;
}

.cnb-onb-action-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    text-align: center;
}

.cnb-onb-action-badge {
    width: 40px;
    height: 40px;
    flex: none;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--cnb-color-bg-subtle);
}

.cnb-onb-action-badge.cnb-font-icon i {
    font-size: 28px;
}

.cnb-onb-action-item span {
    font-size: 11px;
    font-weight: 500;
    color: var(--cnb-color-text-secondary);
    line-height: 1.35;
}

/* ---------- "why an account" ---------- */

/* One heading treatment for every card that isn't the centered hero, so the
   display font and weight don't change from card to card. Without this the
   comparison table's and the FAQ's headings fall back to wp-admin's own h2/h3
   styling, which is a different family, size and colour. */
.cnb-onb-why h2,
.cnb-onb-pro h2,
.cnb-onb-compare h2 {
    font-family: var(--cnb-font-display);
    font-size: 20px;
    font-weight: 700;
    color: var(--cnb-color-text);
    line-height: 1.3;
    margin: 0 0 8px;
    padding: 0;
}

.cnb-onb-why p {
    font-size: 13.5px;
    line-height: 1.6;
    color: var(--cnb-color-text-secondary);
    margin: 0;
}

/* A second paragraph in the same answer needs a gap, or the two run together as
   one block of text. */
.cnb-onb-why p + p {
    margin-top: 12px;
}

/* The bold lead-in of each answer carries the answer itself, so it reads in
   the text color rather than the paragraph's grey. */
.cnb-onb-why p strong {
    color: var(--cnb-color-text);
}

/* FAQ question/answer pairs: the gap between one answer and the next question
   should be clearly bigger than the gap inside a pair. */
.cnb-onb-why h3 {
    font-size: 14px;
    font-weight: 700;
    font-family: var(--cnb-font-body);
    color: var(--cnb-color-text);
    line-height: 1.4;
    margin: 24px 0 6px;
    padding: 0;
}

.cnb-onb-why h2 + h3 {
    margin-top: 16px;
}

/* wp-admin's link blue is the one colour on these pages that isn't part of the
   palette; prose links pick up the brand green instead. */
.cnb-onb-why a {
    color: var(--cnb-color-primary-text);
    text-decoration: underline;
}

.cnb-onb-why a:hover,
.cnb-onb-why a:focus {
    color: var(--cnb-color-text);
}

/* ---------- PRO teaser ----------
 * Deliberately quieter than the rest of the page: this page's one job is the
 * free Starter signup above, and PRO is a low-pressure "by the way", not a
 * second competing CTA. Every current PRO feature gets a slot (grouped, not
 * curated down to a "best of", since the one feature that matters to a given
 * visitor is as unpredictable as which action-type icon they came here for).
 * Purely informational: no CTA here, inbound or outbound, so the next
 * actionable thing on the page stays the closing free-account signup below.
 */

.cnb-onb-pro-intro {
    font-size: 13.5px;
    color: var(--cnb-color-text-secondary);
    margin: 0 0 20px;
}

.cnb-onb-pro-groups {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px 32px;
}

.cnb-onb-pro-group h4 {
    font-size: 12px;
    font-weight: 700;
    color: var(--cnb-color-text);
    margin: 0 0 4px;
}

.cnb-onb-pro-group p {
    font-size: 12.5px;
    line-height: 1.6;
    color: var(--cnb-color-text-secondary);
    margin: 0;
}

/* On the welcome screen PRO is a footnote, not an offer: the page's job there is
   the free signup, and a full four-group feature dump in front of someone who has
   not made their first button yet reads as "this is complicated". The upgrade
   page still carries the full version. */
.cnb-onb-pro--compact .cnb-onb-pro-intro {
    margin: 0;
}

.cnb-onb-pro--compact a {
    color: var(--cnb-color-primary-text);
    font-weight: 600;
}

/* ---------- PRO button types ----------
 * The four names in the "More buttons" group describe placement and behaviour,
 * which words cannot carry: a closed Multibutton and a closed Button Flower look
 * identical, and "full width across the bottom" only means something against a
 * page. The thumbnails are the button editor's own type pictures, transparent on
 * a 284x304 canvas with the button sitting where it would sit on a real page, so
 * each tile is given a page-like surface to sit on.
 */

.cnb-onb-pro-buttons {
    margin-top: 26px;
    padding-top: 22px;
    border-top: 1px solid var(--cnb-color-border-light);
}

.cnb-onb-pro-buttons-intro {
    margin: 0 0 14px;
    font-size: 12.5px;
    font-weight: 700;
    color: var(--cnb-color-text);
}

.cnb-onb-pro-buttons-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.cnb-onb-pro-buttons-grid li {
    margin: 0;
    text-align: center;
}

/* The images are transparent and their content hugs the bottom edge, so without
   a surface behind them a Buttonbar reads as a green stripe floating in the card
   rather than as a bar at the foot of a page. */
.cnb-onb-pro-button-shot {
    display: block;
    background: var(--cnb-color-bg-subtle);
    border: 1px solid var(--cnb-color-border);
    border-radius: var(--cnb-radius-sm);
    overflow: hidden;
}

.cnb-onb-pro-button-shot img {
    display: block;
    width: 100%;
    height: auto;
}

.cnb-onb-pro-button-label {
    display: block;
    margin-top: 8px;
    font-size: 11.5px;
    font-weight: 600;
    line-height: 1.4;
    color: var(--cnb-color-text-secondary);
}

.cnb-onb-pro-link {
    margin: 24px 0 0;
    padding-top: 18px;
    border-top: 1px solid var(--cnb-color-border-light);
}

.cnb-onb-pro-link a {
    font-size: 13px;
    font-weight: 700;
    color: var(--cnb-color-primary-text);
    text-decoration: none;
}

.cnb-onb-pro-link a:hover,
.cnb-onb-pro-link a:focus {
    color: var(--cnb-color-text);
    text-decoration: underline;
}

/* ---------- status icon variants (post-activation page) ---------- */

.cnb-onb-hero-icon--muted {
    /* bg-subtle alone is all but invisible on the white card, which left the
       failure state's icon looking like a rendering glitch. */
    background: var(--cnb-color-border-light);
    border: 1px solid var(--cnb-color-border);
    box-shadow: none;
}

.cnb-onb-hero-icon svg {
    width: 26px;
    height: 26px;
    fill: #fff;
}

.cnb-onb-hero-icon--muted svg {
    fill: var(--cnb-color-text-secondary);
}

/* ---------- "let's get started" steps (post-activation page) ---------- */

.cnb-onb-steps {
    display: flex;
    gap: 16px;
    margin-top: 18px;
}

.cnb-onb-step {
    flex: 1 1 0;
    min-width: 0;
    display: flex;
    flex-direction: column;
    background: var(--cnb-color-bg-subtle);
    border-radius: var(--cnb-radius-md);
    padding: 18px;
}

.cnb-onb-step h3 {
    font-size: 13px;
    font-weight: 700;
    line-height: 1.35;
    margin: 0 0 14px;
}

/* The control of each step (select or button stack) is pushed to the bottom of
   the card, so the three steps line up on one baseline even though their
   headings and controls differ in height. */
.cnb-onb-step > p,
.cnb-onb-step > select {
    margin-top: auto;
    margin-bottom: 0;
}

.cnb-onb-step .button {
    display: block;
    width: 100%;
    min-height: unset;
    height: 38px;
    line-height: 36px;
    padding: 0 16px;
    border-radius: var(--cnb-radius-sm);
    font-size: 12.5px;
    font-weight: 600;
    text-align: center;
    text-decoration: none;
    margin: 0;
}

.cnb-onb-step .button + .button {
    margin-top: 8px;
}

/* The solid colour under the gradient matters: WordPress transitions background
   on hover, and a gradient cannot transition, so without it the colour fades in
   from transparent and the button flickers. */
.cnb-onb-step .button-primary {
    background: var(--cnb-color-primary) linear-gradient(135deg, var(--cnb-color-primary), var(--cnb-color-primary-hover));
    border: none;
    color: #fff;
}

/* WordPress core styles these states with .wp-core-ui, which outranks the rules
   above, so without these the buttons turn WordPress blue on hover and focus. */
.cnb-onb-step .button.button-primary:hover,
.cnb-onb-step .button.button-primary:focus,
.cnb-onb-step .button.button-primary:active {
    background: var(--cnb-color-primary-hover);
    border: none;
    color: #fff;
}

.cnb-onb-step .button.button-primary:focus {
    box-shadow: 0 0 0 1px #fff, 0 0 0 3px var(--cnb-color-primary);
}

.cnb-onb-step .button:not(.button-primary) {
    background: var(--cnb-color-bg);
    border: 1.5px solid var(--cnb-color-border);
    color: var(--cnb-color-text);
}

.cnb-onb-step .button:not(.button-primary):hover,
.cnb-onb-step .button:not(.button-primary):focus,
.cnb-onb-step .button:not(.button-primary):active {
    background: var(--cnb-color-bg-subtle);
    border-color: var(--cnb-color-primary);
    color: var(--cnb-color-primary-text);
}

.cnb-onb-step .button:not(.button-primary):focus {
    box-shadow: 0 0 0 1px var(--cnb-color-primary);
}

.cnb-onb-step select.cnb_timezone_picker {
    width: 100%;
    max-width: none;
    height: 38px;
    padding: 0 8px;
    border: 1.5px solid var(--cnb-color-border);
    border-radius: var(--cnb-radius-sm);
    font-size: 12.5px;
    font-family: var(--cnb-font-body);
    line-height: 36px;
    background-color: var(--cnb-color-bg);
}

.cnb-onb-step select.cnb_timezone_picker:focus {
    border-color: var(--cnb-color-primary);
    box-shadow: 0 0 0 3px rgba(14, 164, 73, .12);
}

.cnb-onb-step .description {
    font-size: 11px;
    color: var(--cnb-color-text-muted);
    margin: 8px 0 0;
}

/* getTimezoneSelect() always emits the description paragraph, even when there
   is nothing to say; an empty one would otherwise add stray space under the
   select and break the shared baseline. */
.cnb-onb-step .description:empty {
    display: none;
}

/* ---------- onboarding carousel (post-activation page) ----------
 * A <details>/<summary> element: collapsed by default so it doesn't compete
 * with the "let's get started" actions above it, no JS beyond the browser's
 * native disclosure toggle.
 */

.cnb-onb-carousel > summary {
    cursor: pointer;
    list-style: none;
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 16px;
}

.cnb-onb-carousel > summary .cnb-onb-section-label {
    margin: 0 0 3px;
}

.cnb-onb-carousel > summary::-webkit-details-marker {
    display: none;
}

.cnb-onb-carousel-summary-sub {
    display: block;
    font-size: 12px;
    color: var(--cnb-color-text-muted);
}

.cnb-onb-carousel-chevron {
    flex-shrink: 0;
    font-size: 12px;
    font-weight: 700;
    color: var(--cnb-color-primary-text);
}

.cnb-onb-carousel-chevron-open {
    display: none;
}

.cnb-onb-carousel[open] .cnb-onb-carousel-chevron-open {
    display: inline;
}

.cnb-onb-carousel[open] .cnb-onb-carousel-chevron-closed {
    display: none;
}

/* Overrides the sitewide `.cnb-slides-outer { display: flex }`, which put the
   prev/next buttons in columns beside the slide and so indented every slide
   past the card's own padding. Here the slide fills the card and the two
   buttons sit together in a footer row underneath it. */
.cnb-onb-carousel .cnb-slides-outer {
    display: block;
    margin-top: 24px;
    padding-top: 22px;
    border-top: 1px solid var(--cnb-color-border-light);
}

.cnb-onb-carousel .cnb-slide h2 {
    font-family: var(--cnb-font-display);
    font-size: 17px;
    font-weight: 700;
    margin: 0 0 6px;
}

.cnb-onb-carousel .cnb-slide p {
    font-size: 13px;
    line-height: 1.6;
    color: var(--cnb-color-text-secondary);
    margin: 0 0 8px;
}

.cnb-onb-carousel .cnb-slide .cnb_screenshot {
    margin-top: 16px;
}

.cnb-onb-carousel .cnb_screenshot img {
    width: 100%;
    height: auto;
    border-radius: var(--cnb-radius-md);
    border: 1px solid var(--cnb-color-border-light);
}

.cnb-onb-carousel .cnb-slides-inner {
    min-width: 0;
}

.cnb-onb-carousel .cnb-onb-carousel-nav {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    padding: 0;
    margin-top: 18px;
}

.cnb-onb-carousel .cnb-slide-controls button {
    width: 34px;
    height: 34px;
    padding: 0;
    border-radius: 50%;
    background: var(--cnb-color-bg-subtle);
    border: 1px solid var(--cnb-color-border);
    color: var(--cnb-color-text);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}

.cnb-onb-carousel .cnb-slide-controls button:hover,
.cnb-onb-carousel .cnb-slide-controls button:focus {
    background: var(--cnb-color-primary-light);
    border-color: var(--cnb-color-primary-border);
    color: var(--cnb-color-primary-text);
}

.cnb-onb-carousel .cnb-slide-controls .dashicons {
    width: auto;
    height: auto;
    line-height: 1;
}

/* ---------- feature comparison table (upgrade page) ---------- */

/* The table sits inside an already-bordered, already-rounded .cnb-onb-card,
   so it carries no frame of its own; the wrapper is here for the horizontal
   scroll it takes on narrow screens. */
.cnb-onb-table-wrap {
    background: var(--cnb-color-bg);
    margin-top: 18px;
}

.cnb-onb-table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    font-size: 13px;
    font-family: var(--cnb-font-body);
}

.cnb-onb-table thead th {
    padding: 12px 16px;
    text-align: center;
    vertical-align: bottom;
    background: var(--cnb-color-bg-subtle);
    border-bottom: 1px solid var(--cnb-color-border);
}

.cnb-onb-table thead th:first-child {
    border-top-left-radius: var(--cnb-radius-sm);
    border-bottom-left-radius: var(--cnb-radius-sm);
}

.cnb-onb-table thead th:last-child {
    border-top-right-radius: var(--cnb-radius-sm);
    border-bottom-right-radius: var(--cnb-radius-sm);
}

/* The row labels are now full sentences rather than one or two words, so the
   label column is given a fixed share; left to itself the table handed it most
   of the width and wrapped the plan headings instead. */
.cnb-onb-table thead th:first-child {
    text-align: left;
    width: 44%;
}

.cnb-onb-table-plan {
    display: block;
    font-size: 14px;
    font-weight: 800;
    color: var(--cnb-color-text);
}

.cnb-onb-table-plan-note {
    display: block;
    font-size: 10.5px;
    font-weight: 500;
    color: var(--cnb-color-text-muted);
    margin-top: 2px;
}

.cnb-onb-table tbody th,
.cnb-onb-table tbody td {
    padding: 10px 16px;
    border-bottom: 1px solid var(--cnb-color-border-light);
    text-align: center;
}

.cnb-onb-table tbody th {
    text-align: left;
    font-weight: 500;
    color: var(--cnb-color-text);
}

.cnb-onb-table tbody tr:last-child th,
.cnb-onb-table tbody tr:last-child td {
    border-bottom: none;
}

.cnb-onb-table tbody tr.cnb-onb-table-section th {
    padding-top: 20px;
    padding-bottom: 6px;
    font-size: 10.5px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.8px;
    color: var(--cnb-color-text-muted);
}

.cnb-onb-table tbody tr.cnb-onb-table-section th,
.cnb-onb-table tbody tr.cnb-onb-table-section td {
    border-bottom: none;
}

.cnb-onb-compare-intro {
    font-size: 13.5px;
    line-height: 1.6;
    color: var(--cnb-color-text-secondary);
    margin: 0;
}

/* The parity between the two plans is a reassurance ("you lose nothing"), not a
   comparison, so it reads as one sentence under the table instead of seven rows
   of identical ticks that made the table look like nothing much changes. */
.cnb-onb-compare-foot {
    margin: 16px 0 0;
    padding-top: 14px;
    border-top: 1px solid var(--cnb-color-border-light);
    font-size: 12.5px;
    line-height: 1.6;
    color: var(--cnb-color-text-muted);
}

/* Some cells carry words rather than a tick; they need to stay readable at the
   width two content columns leave them. */
.cnb-onb-table tbody td {
    font-size: 12.5px;
    line-height: 1.45;
}

.cnb-onb-check-yes {
    color: var(--cnb-color-primary-text);
    font-weight: 700;
}

/* An en dash read as an empty or broken cell next to the bold green ticks. A
   cross is unambiguous; muted text colour keeps it from competing. */
.cnb-onb-check-no {
    color: var(--cnb-color-text-muted);
    font-weight: 700;
}

/* A quiet tint down the Starter column so a row can be read across without
   losing which plan it belongs to. */
.cnb-onb-table thead th:last-child,
.cnb-onb-table tbody td:last-child {
    background: var(--cnb-color-primary-light);
}

.cnb-onb-table tbody tr:last-child td:last-child {
    border-bottom-right-radius: var(--cnb-radius-sm);
}

@media screen and (max-width: 600px) {
    .cnb-onb-pro-buttons-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .cnb-onboarding {
        margin: 12px 12px 40px;
    }

    .cnb-onb-card {
        padding: 24px 20px;
    }

    .cnb-onb-table-wrap {
        /* A safety net only: the rules below shrink the table enough to fit a
           narrow screen, so the columns being compared stay on screen instead
           of hiding behind a horizontal scroll the reader has to find. */
        overflow-x: auto;
    }

    .cnb-onb-table {
        min-width: 0;
        font-size: 12px;
    }

    /* The desktop share of the width is there to stop the label column eating
       the plan headings; on a phone there is not enough width for that to help,
       so the browser's own layout does a better job of balancing the three. */
    .cnb-onb-table thead th:first-child {
        width: auto;
    }

    .cnb-onb-table tbody td {
        font-size: 11.5px;
    }

    .cnb-onb-table thead th,
    .cnb-onb-table tbody th,
    .cnb-onb-table tbody td {
        padding-left: 8px;
        padding-right: 8px;
    }

    .cnb-onb-table-plan {
        font-size: 12.5px;
    }

    .cnb-onb-signup form.cnb_email_activation,
    .cnb-onb-number-form {
        flex-direction: column;
    }

    .cnb-onb-signup .cnb_activation_input_field,
    .cnb-onb-signup input.button.button-primary,
    .cnb-onb-number-form input[type="tel"],
    .cnb-onb-number-form input.button.button-primary {
        flex: none;
        width: 100%;
    }

    .cnb-onb-steps {
        flex-direction: column;
    }

    .cnb-onb-pro-groups {
        grid-template-columns: 1fr;
    }
}
.cnb_email_activation_message {
    width: 100%;
}
.cnb_email_activation_message .notice {
    margin-left: 0;
    margin-right: 0;
}
/* ---------- PRO upgrade page (CnbDomainViewUpgradeOverview) ----------
 * This page sits inside the plugin's normal admin chrome, which already loads
 * call-now-button.css, so the old pricing classes (.cnb-price-plans,
 * .cnb-pricebox, .cnb-pro-tile, .cnb-nb-plans, .cnb-welcome-blocks) are still
 * in scope here. Rather than unpick them globally -- they are used by the
 * post-checkout and payment screens too -- this page uses its own .cnb-onb-*
 * markup, and the few shared hooks the JS insists on (.currency-box-eur/-usd,
 * .cnb-currency-toggle-cb, .cnb-starter) are re-dressed below.
 */

/* The page is the whole screen here, not a panel inside it, so the plugin
   header's own h1 is the one title and the card headings sit under it. */
.cnb-onboarding--upgrade .cnb-onb-card h2 {
    font-family: var(--cnb-font-display);
    font-size: 21px;
    line-height: 1.25;
    font-weight: 700;
    margin: 0 0 10px;
    color: var(--cnb-color-text);
}

.cnb-onboarding--upgrade .cnb-onb-card p {
    font-size: 13.5px;
    line-height: 1.6;
    color: var(--cnb-color-text-secondary);
}

/* ---------- plan picker ---------- */

/* The trial, the price and the button are one decision, so they sit in the
   hero card rather than in a pricing strip further down; the second copy at
   the foot of the page exists because the page is long, not because there is
   a second choice to make. */
.cnb-onb-plans-form {
    margin: 22px 0 0;
}

/* Both switches change what the prices say rather than what you get, so they
   share one row above the cards. On a wide card they sit side by side with the
   interval first, since that is the one most people touch. */
.cnb-onb-plan-controls {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 10px 20px;
    margin: 0 0 20px;
}

/* ---------- segmented switch ----------
 * Shared by the billing-interval and currency switches. Both answer "which
 * prices am I looking at", so they look and behave identically; only the data
 * attribute on each option says which one it drives.
 *
 * The look is deliberately not the look of a price card: everything in the row
 * underneath is purchasable, and nothing down there is secretly a tab.
 *
 * .cnb-onb-switch-option carries the appearance while .cnb-onb-term and
 * .cnb-onb-currency carry the behaviour, kept apart so the interval handler's
 * "clear every option" sweep cannot reach into the currency switch.
 */
.cnb-onb-switch {
    display: inline-flex;
    padding: 3px;
    background: var(--cnb-color-bg-subtle);
    border: 1px solid var(--cnb-color-border);
    border-radius: var(--cnb-radius-full);
}

.cnb-onboarding--upgrade button.cnb-onb-switch-option {
    display: inline-flex;
    align-items: baseline;
    justify-content: center;
    gap: 6px;
    padding: 7px 16px;
    border: none;
    border-radius: var(--cnb-radius-full);
    background: transparent;
    color: var(--cnb-color-text-secondary);
    font-family: var(--cnb-font-body);
    font-size: 12.5px;
    font-weight: 600;
    line-height: 1.2;
    cursor: pointer;
}

.cnb-onboarding--upgrade button.cnb-onb-switch-option:hover {
    color: var(--cnb-color-text);
}

.cnb-onboarding--upgrade button.cnb-onb-switch-option.is-active {
    background: var(--cnb-color-bg);
    color: var(--cnb-color-text);
    box-shadow: 0 1px 3px rgba(0, 0, 0, .12);
}

/* Two letters against two words, so the currency options get a floor width;
   left to themselves they made a switch half the size of the one beside it. */
.cnb-onboarding--upgrade .cnb-onb-currency {
    min-width: 62px;
}


.cnb-onb-plans {
    display: flex;
    gap: 16px;
    align-items: stretch;
    text-align: left;
}

.cnb-onb-plan {
    position: relative;
    flex: 1 1 0;
    min-width: 0;
    padding: 20px 22px 22px;
    background: var(--cnb-color-bg);
    border: 1px solid var(--cnb-color-border);
    border-radius: var(--cnb-radius-md);
}

/* Both intervals are rendered; the switch above decides which pair shows. Doing
   it in CSS rather than by rebuilding the row means no reflow on switch and no
   second trip for prices that were already on the page. */
.cnb-onb-plans[data-cnb-term-active="yearly"] .cnb-onb-plan[data-cnb-term="monthly"],
.cnb-onb-plans[data-cnb-term-active="monthly"] .cnb-onb-plan[data-cnb-term="yearly"] {
    display: none;
}

/* One recommended option, marked once. Everything else about the two boxes is
   identical, so the border and the flag carry the whole recommendation. */
.cnb-onb-plan--best {
    border-color: var(--cnb-color-primary);
    box-shadow: 0 0 0 1px var(--cnb-color-primary);
}

.cnb-onb-plan-flag {
    position: absolute;
    top: -10px;
    left: 22px;
    padding: 3px 10px;
    border-radius: var(--cnb-radius-full);
    background: var(--cnb-color-primary);
    color: #fff;
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: 0.4px;
    text-transform: uppercase;
    white-space: nowrap;
}

/* The bundle's per-site saving is a real number and worth showing, but the
   single-website card is the one most readers want; a second solid green flag
   made the row look like two competing recommendations. */
.cnb-onb-plan-flag--quiet {
    background: var(--cnb-color-primary-light);
    border: 1px solid var(--cnb-color-primary-border);
    color: var(--cnb-color-primary-text);
}

.cnb-onboarding--upgrade .cnb-onb-plan h3 {
    margin: 0 0 10px;
    font-family: var(--cnb-font-body);
    font-size: 13px;
    font-weight: 700;
    color: var(--cnb-color-text);
}

.cnb-onb-plan-price {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 2px;
    margin: 0 0 2px !important;
    font-family: var(--cnb-font-display);
    font-weight: 700;
    color: var(--cnb-color-text) !important;
    line-height: 1.1;
}

.cnb-onb-plan-amount {
    font-size: 34px;
}

.cnb-onb-plan-currency {
    font-size: 20px;
}

.cnb-onb-plan-cents {
    font-size: 17px;
}

.cnb-onb-plan-period {
    margin-left: 4px;
    font-family: var(--cnb-font-body);
    font-size: 12.5px;
    font-weight: 500;
    color: var(--cnb-color-text-muted);
}

.cnb-onb-plan-sub {
    margin: 0 0 16px !important;
    font-size: 12px !important;
    line-height: 1.5;
    color: var(--cnb-color-text-muted) !important;
    min-height: 18px;
}

.cnb-onboarding--upgrade a.cnb-onb-plan-cta {
    display: block;
    width: 100%;
    padding: 11px 16px;
    border: none;
    border-radius: var(--cnb-radius-full);
    background: var(--cnb-color-primary);
    color: #fff;
    font-family: var(--cnb-font-body);
    font-size: 13.5px;
    font-weight: 700;
    line-height: 1.2;
    text-align: center;
    text-decoration: none;
    box-shadow: var(--cnb-shadow-primary);
    cursor: pointer;
}

.cnb-onboarding--upgrade a.cnb-onb-plan-cta:hover,
.cnb-onboarding--upgrade a.cnb-onb-plan-cta:focus {
    background: var(--cnb-color-primary-hover);
    color: #fff;
}

/* The second plan is the same product on a different rhythm, so its button is
   an alternative rather than a competing call to action. */
.cnb-onboarding--upgrade a.cnb-onb-plan-cta--quiet {
    background: var(--cnb-color-bg);
    color: var(--cnb-color-primary-text);
    border: 1px solid var(--cnb-color-border);
    box-shadow: none;
}

.cnb-onboarding--upgrade a.cnb-onb-plan-cta--quiet:hover,
.cnb-onboarding--upgrade a.cnb-onb-plan-cta--quiet:focus {
    background: var(--cnb-color-primary-light);
    border-color: var(--cnb-color-primary-border);
    color: var(--cnb-color-primary-text);
}

/* What the price actually buys, and how to get out of it. Both are the first
   thing this reader wants to know and neither belongs inside a price box.
   The hero caps its paragraphs at 460px, which is a sensible measure for the
   centred intro sentence but leaves this one wrapping over three ragged lines
   under a pair of cards twice that wide, so it takes the full width instead. */
.cnb-onboarding--upgrade .cnb-onb-plans-foot {
    max-width: none;
    margin: 16px 0 0;
    font-size: 12px;
    line-height: 1.6;
    color: var(--cnb-color-text-muted);
}

.cnb-onboarding--upgrade .cnb-onb-plans-foot strong {
    color: var(--cnb-color-text-secondary);
}

/* ---------- feature sections ---------- */

/* Each PRO feature is a picture with a sentence under it. The product names
   ("Multibutton", "Buttonbar") mean nothing on their own to someone who has
   not seen one, so the picture leads and the name follows it. */
.cnb-onb-feature + .cnb-onb-feature {
    margin-top: 28px;
    padding-top: 28px;
    border-top: 1px solid var(--cnb-color-border-light);
}

.cnb-onboarding--upgrade .cnb-onb-feature h3 {
    margin: 0 0 6px;
    font-size: 14.5px;
    font-weight: 700;
    color: var(--cnb-color-text);
}

.cnb-onb-feature-shot {
    display: block;
    margin: 14px 0 0;
    background: var(--cnb-color-bg-subtle);
    border: 1px solid var(--cnb-color-border);
    border-radius: var(--cnb-radius-md);
    overflow: hidden;
}

.cnb-onb-feature-shot img {
    display: block;
    width: 100%;
    height: auto;
}

/* The four shapes are described here in words and pictured in the strip below
   (.cnb-onb-pro-buttons), so this grid carries the copy only. */
.cnb-onb-shapes {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
    margin-top: 18px;
}

.cnb-onb-shape {
    margin: 0;
}

.cnb-onboarding--upgrade .cnb-onb-shape h4 {
    margin: 0 0 4px;
    font-size: 13px;
    font-weight: 700;
    color: var(--cnb-color-text);
}

.cnb-onboarding--upgrade .cnb-onb-shape p {
    margin: 0;
    font-size: 12.5px !important;
    line-height: 1.55;
}

/* ---------- "and also" grid ---------- */

.cnb-onb-extras {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 18px 28px;
    margin-top: 18px;
}

.cnb-onboarding--upgrade .cnb-onb-extra h4 {
    margin: 0 0 3px;
    font-size: 12.5px;
    font-weight: 700;
    color: var(--cnb-color-text);
}

.cnb-onboarding--upgrade .cnb-onb-extra p {
    margin: 0;
    font-size: 12.5px !important;
    line-height: 1.55;
}

/* ---------- full comparison ---------- */

/* Row labels here carry an explanation under the name, which needs more of the
   width than the two-word labels the base table was sized for. */
.cnb-onboarding--upgrade .cnb-onb-table thead th:first-child {
    width: 58%;
}

.cnb-onb-table-note {
    display: block;
    margin-top: 2px;
    font-size: 11.5px;
    font-weight: 400;
    line-height: 1.45;
    color: var(--cnb-color-text-muted);
}

/* The rows a free plan already covers are hidden until asked for: the question
   this table answers is "what do I get that I have not got", and answering it
   alongside twenty rows of two identical ticks made the answer look small.
   cnbShowStarterFeatures() (domain-upgrade.js) reveals them inline. */
.cnb-onboarding--upgrade tr.cnb-starter,
.cnb-onboarding--upgrade td.cnb-starter,
.cnb-onboarding--upgrade th.cnb-starter {
    display: none;
}

.cnb-onboarding--upgrade .cnb-onb-table-reveal {
    margin: 16px 0 0 !important;
}

.cnb-onboarding--upgrade a.cnbShowStarterFeatures {
    font-size: 12.5px;
    font-weight: 600;
    color: var(--cnb-color-primary-text);
    text-decoration: underline;
    cursor: pointer;
}

/* ---------- more than one website ---------- */

.cnb-onb-bundle {
    background: var(--cnb-color-bg-subtle);
}

.cnb-onboarding--upgrade .cnb-onb-bundle .cnb-onb-plan {
    background: var(--cnb-color-bg);
}

/* ---------- payment cancelled ---------- */

.cnb-onb-cancelled {
    border-color: #fde68a;
    background: #fffbeb;
}

.cnb-onb-cancelled iframe {
    margin-top: 10px;
}

@media screen and (max-width: 782px) {
    .cnb-onb-plans {
        flex-direction: column;
    }

    /* Each switch takes the full width and splits it evenly, so the two sides
       stay the same size and "Pay yearly" stops breaking across two lines while
       "Pay monthly" sits on one. */
    .cnb-onb-switch {
        display: flex;
        width: 100%;
    }

    .cnb-onboarding--upgrade button.cnb-onb-switch-option {
        flex: 1 1 0;
        padding: 8px 10px;
        white-space: nowrap;
    }

    .cnb-onb-shapes,
    .cnb-onb-extras {
        grid-template-columns: 1fr;
    }

    .cnb-onboarding--upgrade .cnb-onb-table thead th:first-child {
        width: auto;
    }
}

/* ---------- post-checkout templates strip (CnbDomainViewUpgradeFinished) ----------
 * Three template screenshots rather than the four button-type thumbnails the
 * grid was written for, and these are links, so the surface needs to carry the
 * anchor as well.
 */
.cnb-onb-templates-grid {
    grid-template-columns: repeat(3, 1fr);
}

.cnb-onboarding a.cnb-onb-pro-button-shot {
    text-decoration: none;
}

.cnb-onboarding a.cnb-onb-pro-button-shot:hover,
.cnb-onboarding a.cnb-onb-pro-button-shot:focus {
    border-color: var(--cnb-color-primary);
}

@media screen and (max-width: 600px) {
    .cnb-onb-templates-grid {
        grid-template-columns: 1fr;
    }
}

/* ---------- checklist (agency upgrade) ----------
 * A list of what you get, which wants ticks rather than bullets: the reader is
 * weighing an offer, and a tick says "included" in a way a disc does not.
 */
.cnb-onboarding .cnb-onb-checklist {
    margin: 14px 0 0;
    padding: 0;
    list-style: none;
}

.cnb-onboarding .cnb-onb-checklist li {
    position: relative;
    margin: 0 0 10px;
    padding-left: 26px;
    font-size: 13.5px;
    line-height: 1.6;
    color: var(--cnb-color-text-secondary);
}

.cnb-onboarding .cnb-onb-checklist li:last-child {
    margin-bottom: 0;
}

.cnb-onboarding .cnb-onb-checklist li::before {
    content: '\2713';
    position: absolute;
    left: 0;
    top: 0;
    font-weight: 700;
    color: var(--cnb-color-primary-text);
}

.cnb-onboarding .cnb-onb-checklist strong {
    color: var(--cnb-color-text);
}

/* A checklist is a block of its own; running text that follows it needs the
   same air a paragraph after a paragraph gets, or the last tick and the next
   sentence read as one item. */
.cnb-onboarding .cnb-onb-checklist + p {
    margin-top: 18px;
}

/* The one button on the cancelled page, which is a card of running text rather
   than a row of price boxes, so the CTA sizes to its own label. */
.cnb-onb-checklist-cta {
    margin: 22px 0 0 !important;
    text-align: center;
}

.cnb-onboarding--upgrade .cnb-onb-checklist-cta a.cnb-onb-plan-cta {
    display: inline-block;
    width: auto;
    padding-left: 28px;
    padding-right: 28px;
}

/* ---------- live chat promo (CnbChatMarketingView) ----------
 * The page is cards of running text and a single opt-in, so it needs the
 * upgrade page's heading treatment and card measure but none of its pricing
 * machinery. Three things are its own: the beta consent block, the one
 * button on the page, and the feedback notice that button writes into.
 */

.cnb-onboarding--chat .cnb-onb-card h2 {
    font-family: var(--cnb-font-display);
    font-size: 21px;
    line-height: 1.25;
    font-weight: 700;
    margin: 0 0 10px;
    color: var(--cnb-color-text);
}

.cnb-onboarding--chat .cnb-onb-card p {
    font-size: 13.5px;
    line-height: 1.6;
    color: var(--cnb-color-text-secondary);
}

/* Eight headings and eight paragraphs in two columns is a grey wall, and every
   one of these is something the reader gets rather than something they have to
   do, so each takes the same green tick the checklists elsewhere use. It hangs
   outside the text so the headings still line up on one left edge. */
.cnb-onboarding--chat .cnb-onb-extra {
    position: relative;
    padding-left: 22px;
}

.cnb-onboarding--chat .cnb-onb-extra::before {
    content: '\2713';
    position: absolute;
    left: 0;
    top: 0;
    font-size: 13px;
    font-weight: 700;
    line-height: 1.35;
    color: var(--cnb-color-primary-text);
}

.cnb-onboarding--chat .cnb-onb-extra h4 {
    margin: 0 0 3px;
    font-size: 12.5px;
    font-weight: 700;
    color: var(--cnb-color-text);
}

.cnb-onboarding--chat .cnb-onb-extra p {
    margin: 0;
    font-size: 12.5px !important;
    line-height: 1.55;
}

/* The three steps here are an explanation rather than a row of controls, so
   the paragraph sits under its heading instead of being pushed to the bottom
   of the card the way the getting-started steps push their button. */
.cnb-onboarding--chat .cnb-onb-step > p {
    margin-top: 0;
    font-size: 12.5px !important;
    line-height: 1.55;
}

.cnb-onboarding--chat .cnb-onb-step h3 {
    margin-bottom: 8px;
}

/* The three steps are a sequence, and nothing in a row of three identical grey
   panels says so. A numbered green disc says it at a glance and gives the
   middle of the page the brand colour it otherwise has nowhere to appear. */
.cnb-onboarding--chat .cnb-onb-step-number {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    margin: 0 0 10px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--cnb-color-primary), var(--cnb-color-primary-hover));
    color: #fff;
    font-size: 13px;
    font-weight: 700;
    line-height: 1;
}

/* ---------- beta consent ---------- */

/* What the tick box records, kept next to the tick box. Left-aligned inside a
   centred card, because it is the one thing here that has to be read rather
   than skimmed. */
.cnb-onboarding--chat .cnb-onb-chat-consent {
    max-width: 560px;
    margin: 22px auto 0;
    padding: 18px 20px;
    text-align: left;
    background: var(--cnb-color-primary-light);
    border: 1px solid var(--cnb-color-primary-border);
    border-radius: var(--cnb-radius-md);
}

.cnb-onboarding--chat .cnb-onb-chat-consent-check {
    display: flex;
    align-items: flex-start;
    gap: 12px;
}

.cnb-onboarding--chat .cnb-onb-chat-consent-check input[type="checkbox"] {
    flex: none;
    margin: 2px 0 0;
}

.cnb-onboarding--chat .cnb-onb-chat-consent-check label {
    font-size: 13px;
    font-weight: 700;
    line-height: 1.5;
    color: var(--cnb-color-text);
}

.cnb-onboarding--chat .cnb-onb-chat-consent-check label ul {
    margin: 8px 0 0 18px;
    padding: 0;
    list-style: disc;
}

.cnb-onboarding--chat .cnb-onb-chat-consent-check label li {
    margin: 0 0 5px;
    font-weight: 400;
    font-size: 12.5px;
    line-height: 1.55;
    color: var(--cnb-color-text-secondary);
}

.cnb-onboarding--chat .cnb-onb-chat-consent-check label li:last-child {
    margin-bottom: 0;
}

/* Sits under the bullets rather than inside the label: it says what happens
   to other people's messages, which is not something to acknowledge on their
   behalf with a tick. */
/* .cnb-onb-hero p caps its paragraphs at a 460px measure and centres them,
   which is right for the intro sentence above but leaves this one wrapping
   short inside a box half as wide again, so it takes the box's own width. */
.cnb-onboarding--chat p.cnb-onb-chat-consent-note {
    max-width: none;
    margin: 14px 0 0;
    padding-top: 12px;
    border-top: 1px solid var(--cnb-color-primary-border);
    font-size: 12px !important;
    line-height: 1.55;
    color: var(--cnb-color-text-secondary) !important;
}

/* ---------- the one button ---------- */

/* Same inheritance: without the auto margins back, this paragraph keeps the
   hero's 460px width but loses its centring, and the button ends up centred
   in a box sitting against the left edge of the card rather than in the
   card. */
.cnb-onboarding--chat p.cnb-onb-chat-action {
    max-width: none;
    margin: 22px auto 0;
    text-align: center;
}

.cnb-onboarding--chat .cnb-onb-chat-button {
    display: inline-block;
    padding: 12px 28px;
    border: none;
    border-radius: var(--cnb-radius-full);
    background: var(--cnb-color-primary);
    color: #fff;
    font-family: var(--cnb-font-body);
    font-size: 13.5px;
    font-weight: 700;
    line-height: 1.2;
    text-align: center;
    text-decoration: none;
    box-shadow: var(--cnb-shadow-primary);
    cursor: pointer;
}

.cnb-onboarding--chat .cnb-onb-chat-button:hover,
.cnb-onboarding--chat .cnb-onb-chat-button:focus {
    background: var(--cnb-color-primary-hover);
    color: #fff;
}

/* Disabled until the beta box is ticked, which is most of the time this page
   is on screen, so it has to read as "not yet" rather than as broken: the
   shadow goes, the green goes flat, and the cursor says no. */
.cnb-onboarding--chat .cnb-onb-chat-button:disabled,
.cnb-onboarding--chat .cnb-onb-chat-button:disabled:hover {
    background: var(--cnb-color-border);
    color: var(--cnb-color-text-muted);
    box-shadow: none;
    cursor: not-allowed;
}

/* wp-admin's notice, used here for the result of switching chat on. Inside a
   centred card it needs its own left alignment back, and the stripe on the
   left needs to survive the card's own border radius. */
.cnb-onboarding--chat #cnb-enable-chat-feedback.notice {
    max-width: 560px;
    margin: 18px auto 0;
    text-align: left;
}

.cnb-onboarding--chat #cnb-enable-chat-feedback.notice p {
    font-size: 13px !important;
}

@media screen and (max-width: 782px) {
    .cnb-onboarding--chat .cnb-onb-steps {
        flex-direction: column;
    }
}