/*
 * FameUp Onboarding v2 — design tokens + layout primitives + base components.
 *
 * Mockup-driven (docs/new-onb/v2_fameup_us_flow_*.html). Mobile-first; on
 * desktop (>=576px) the flow sits in a centred card shell, and the layout
 * becomes full-screen on mobile.
 *
 * Every class is prefixed `ob2-` to avoid colliding with v1's onboarding_new.css.
 */

/* -------------------------------------------------------------------------- */
/*  Tokens                                                                    */
/* -------------------------------------------------------------------------- */
:root {
    --ob2-primary: #0DBFB5;
    --ob2-primary-rgb: 13, 191, 181;
    --ob2-primary-hover: #0A9991;
    --ob2-primary-soft: #E1F5EE;
    --ob2-primary-tint: #f0fdf8;

    --ob2-accent-warm: #FFB800;
    --ob2-accent-warm-soft: #FFF8E7;
    --ob2-accent-warm-border: #FFE5B4;

    --ob2-danger: #E03131;

    --ob2-ink: #111111;
    --ob2-ink-soft: #444444;
    --ob2-muted: #666666;
    --ob2-muted-2: #888888;
    --ob2-muted-3: #999999;
    --ob2-line: #EEEEEE;
    --ob2-line-strong: #DDDDDD;
    --ob2-surface: #FFFFFF;
    --ob2-surface-alt: #FAFAFA;
    --ob2-stage: #F2F2F2;

    --ob2-radius-sm: 8px;
    --ob2-radius-md: 14px;
    --ob2-radius-lg: 16px;
    --ob2-radius-pill: 50px;
    /* Outer frame radius — shared by the card shell and the brief modal so
       their corners always line up. Card-like, not phone-like. */
    --ob2-frame-radius: 24px;

    --ob2-shadow-card: 0 18px 60px rgba(0, 0, 0, 0.12), 0 2px 8px rgba(0, 0, 0, 0.05);
    --ob2-shadow-cta: 0 4px 14px rgba(13, 191, 181, 0.18);

    --ob2-pad-x: 22px;
    --ob2-pad-y: 24px;

    --ob2-font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
}

/* -------------------------------------------------------------------------- */
/*  Reset (scoped — only enough to reset nested defaults)                     */
/* -------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

.ob2-body {
    margin: 0;
    padding: 0;
    background: var(--ob2-stage);
    color: var(--ob2-ink);
    font-family: var(--ob2-font-family);
    font-size: 14px;
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
    min-height: 100dvh;
    overflow-x: hidden;
}

.ob2-body img { max-width: 100%; display: block; }
/* Generic link colour. `:where()` keeps the rule at zero specificity so any
   class on the link (e.g. `.ob2-btn-primary`) wins without `!important`. */
:where(.ob2-body a) { color: var(--ob2-primary); text-decoration: none; }
:where(.ob2-body a:hover) { color: var(--ob2-primary-hover); }
.ob2-body code {
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 0.85em;
    background: var(--ob2-line);
    padding: 1px 5px;
    border-radius: 4px;
}
.ob2-body button { font-family: inherit; }

/* -------------------------------------------------------------------------- */
/*  Stage / card shell                                                        */
/* -------------------------------------------------------------------------- */
/* On desktop the flow sits in a centred, card-shaped shell — wide enough that
   it reads as a web app surface, not a phone mock-up. On phones (<576px) it
   goes edge-to-edge full-screen (see the media query below). */
.ob2-stage {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100dvh;
    padding: 48px 24px;
    background:
        radial-gradient(1100px 520px at 50% -8%, var(--ob2-primary-tint), transparent 70%),
        var(--ob2-stage);
}

.ob2-phone {
    position: relative;
    background: var(--ob2-surface);
    border-radius: var(--ob2-frame-radius);
    border: 1px solid var(--ob2-line);
    max-width: 640px;
    width: 100%;
    /* Square-ish card; clamps to the viewport so the sticky CTA stays in view. */
    height: min(680px, calc(100dvh - 96px));
    display: flex;
    flex-direction: column;
    overflow: hidden;
    box-shadow: var(--ob2-shadow-card);
}

.ob2-screen {
    flex: 1;
    overflow-y: auto;
    /* Clip any horizontal overflow — edge-bleed elements (e.g. the horizontal
       mini-reviews scroller in benefits) used to leak beyond the viewport on
       narrow phones, making the page feel "out of box". Children that want
       to scroll horizontally still do so internally (their own overflow-x). */
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch;
    display: flex;
    flex-direction: column;
    /* Mobile defaults to top-aligned — centering on a tall phone screen
       creates dead air above the heading. Desktop (>=576px, card form) gets
       safe-center so short steps stay balanced in the wider card. */
}
@media (min-width: 900px) {
    .ob2-screen { justify-content: safe center; }
}

/* Full-bleed below the split breakpoint — the mid-range "card form" left ugly
   margins on tablet/large-phone viewports. Above 900px the split-screen layout
   kicks in (own media query below). */
@media (max-width: 899.98px) {
    /* Full-bleed phone/tablet: the card fills the viewport edge-to-edge and is
       white, so the page chrome behind it must be white too. Otherwise the gray
       stage (#F2F2F2) peeks at the top/bottom whenever iOS Safari's dynamic
       toolbar shifts `100dvh`, and around the home-indicator safe area below
       the sticky CTA.

       Also lock the outer shell to a single viewport-sized scroller on mobile:
       body/stage must not scroll independently from `.ob2-screen`, or sticky
       CTA spacing looks broken ("scroll in scroll" effect). */
    html, .ob2-body { background: var(--ob2-surface); }
    .ob2-body { overflow: hidden; }
    .ob2-stage {
        padding: 0;
        align-items: stretch;
        background: var(--ob2-surface);
        height: 100dvh;
        overflow: hidden;
    }
    /* The .ob2-left wrapper between .ob2-split and .ob2-phone has no width
       of its own; as a flex item in .ob2-stage it shrinks to content unless
       we force it to fill, which collapses the phone's `width: 100%`. */
    .ob2-left { width: 100%; height: 100dvh; background: var(--ob2-surface); }
    .ob2-phone {
        width: 100%;
        height: 100dvh;
        border: none;
        border-radius: 0;
        box-shadow: none;
    }
}

/* -------------------------------------------------------------------------- */
/*  Split-screen shell — step card + persistent brand panel                   */
/* -------------------------------------------------------------------------- */
/* Below 900px the wrapper is inert: `.ob2-phone` is the card on its own and
   the brand panel is hidden. From 900px up, the layout goes full-bleed: the
   step card and the brand panel split the whole viewport, edge to edge. */
.ob2-split { display: contents; }

.ob2-brand-panel { display: none; }

@media (min-width: 900px) {
    /* Full-bleed — no centred card, no grey margin. The viewport is locked;
       the step card and brand panel each scroll internally. */
    .ob2-stage { padding: 0; align-items: stretch; height: 100dvh; overflow: hidden; }
    .ob2-split {
        display: flex;
        align-items: stretch;
        width: 100%;
        height: 100dvh;
    }
    .ob2-left {
        flex: 0 0 50%;
        background:white;
    }
    /* Step card becomes a fixed-width full-height column on the left. */
    .ob2-phone {
        margin:auto;
        width: 520px;
        max-width: none;
        height: 100dvh;
        border: none;
        border-radius: 0;
        box-shadow: none;
    }
    /* Brand panel fills the rest of the viewport. */
    .ob2-brand-panel {
        display: flex;
        flex: 1 1 auto;
        height: 100dvh;
    }
    /* Card is edge-to-edge here, so the brief backdrop drops its rounding. */
    .ob2-modal-bd { border-radius: 0; }
    /* The brand panel already carries the rating — drop the hero's trust bar
       so the proof signal isn't duplicated side-by-side. (`.ob2-phone`
       prefix raises specificity above the base `.ob2-trust-top` rule.) */
    .ob2-phone .ob2-trust-top { display: none; }
    /* The journey stepper in the panel owns progress here — drop the thin
       in-card progress bar so the user isn't tracked in two places. */
    .ob2-phone .ob2-prog { display: none; }
}

/* -------------------------------------------------------------------------- */
/*  Brand panel — hybrid side rail (>=900px only)                             */
/* -------------------------------------------------------------------------- */
/* Early steps show a social-proof layout; later steps show a live campaign
   preview. Brand-teal backdrop throughout. */
.ob2-brand-panel {
    align-items: center;
    justify-content: center;
    padding: 48px 40px;
    overflow-y: auto;
    color: #fff;
    background:
        radial-gradient(560px 320px at 78% 0%, rgba(255, 255, 255, 0.5), transparent 70%),
        linear-gradient(160deg, var(--ob2-primary), var(--ob2-primary-hover));
}

/* Centred content column; enters with a soft rise on every step load. */
.ob2-bp-inner {
    display: flex;
    flex-direction: column;
    gap: 30px;
    width: 100%;
    max-width: 420px;
    animation: ob2-bp-in 0.55s cubic-bezier(0.16, 0.84, 0.44, 1) both;
}
@keyframes ob2-bp-in {
    from { transform: translateY(14px); }
    to   { transform: translateY(0); }
}

/* -- Social-proof layout (early steps) ------------------------------------ */
.ob2-bp-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}
.ob2-bp-rating { display: flex; align-items: center; gap: 7px; font-size: 14px; font-weight: 700; }
.ob2-bp-stars { color: var(--ob2-accent-warm); font-size: 14px; letter-spacing: 1px; }
.ob2-bp-pill {
    background: rgba(255, 255, 255, 0.18);
    padding: 5px 12px;
    border-radius: var(--ob2-radius-pill);
    font-size: 12px;
    font-weight: 600;
    white-space: nowrap;
}
.ob2-bp-mid { display: flex; flex-direction: column; }
.ob2-bp-avatars { display: flex; margin-bottom: 24px; }
.ob2-bp-av {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    border: 3px solid #fff;
    margin-left: -14px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 23px;
    background: rgba(255, 255, 255, 0.22);
}
.ob2-bp-av:first-child { margin-left: 0; }
.ob2-bp-av:nth-child(1) { background: #FFD8A8; }
.ob2-bp-av:nth-child(2) { background: #FFC9C9; }
.ob2-bp-av:nth-child(3) { background: #D0BFFF; }
.ob2-bp-av:nth-child(4) { background: #A5D8FF; }
.ob2-bp-av-more { font-size: 13px; font-weight: 700; color: #fff; }
.ob2-bp-quote {
    margin: 0;
    font-size: 17px;
    line-height: 1.5;
    font-weight: 500;
    letter-spacing: -0.2px;
}
.ob2-bp-cite {
    display: block;
    font-size: 12.5px;
    font-weight: 600;
    font-style: normal;
    opacity: 0.82;
    margin-top: 14px;
}
.ob2-bp-stats {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    margin-top: 22px;
}
.ob2-bp-stat {
    background: rgba(255, 255, 255, 0.14);
    border-radius: var(--ob2-radius-md);
    padding: 13px 15px;
}
.ob2-bp-stat-n { font-size: 21px; font-weight: 800; letter-spacing: -0.5px; }
.ob2-bp-stat-l { font-size: 12px; opacity: 0.85; margin-top: 2px; }
.ob2-bp-thumbs { display: flex; gap: 8px; }
.ob2-bp-thumb {
    flex: 1;
    aspect-ratio: 9 / 13;
    border-radius: 12px;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.28), rgba(255, 255, 255, 0.08));
    display: flex;
    align-items: flex-end;
    padding: 8px;
    font-size: 10.5px;
    font-weight: 600;
    position: relative;
    overflow: hidden;
}
.ob2-bp-thumb-handle { position: relative; z-index: 1; }
/* Thumbs with a real cover image — overlay a dark gradient at the bottom so
   the handle stays legible regardless of the cover's exposure. */
.ob2-bp-thumb-real {
    background-size: cover;
    background-position: center;
    background-color: rgba(0, 0, 0, 0.35);
    color: #fff;
}
.ob2-bp-thumb-real::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, transparent 55%, rgba(0, 0, 0, 0.6));
    pointer-events: none;
}
/* Avatars with a real profile photo — img fills the circle. */
.ob2-bp-av-real { overflow: hidden; background: var(--ob2-line); }
.ob2-bp-av-real img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* -- Live campaign preview card ------------------------------------------- */
.ob2-camp {
    background: var(--ob2-surface);
    color: var(--ob2-ink);
    border-radius: 20px;
    padding: 20px;
    box-shadow: 0 26px 50px -14px rgba(0, 0, 0, 0.5), 0 2px 6px rgba(0, 0, 0, 0.2);
}

.ob2-camp-head { display: flex; align-items: center; gap: 12px; }
.ob2-camp-logo {
    flex-shrink: 0;
    width: 46px;
    height: 46px;
    border-radius: 13px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    font-weight: 800;
    letter-spacing: -0.5px;
    color: #fff;
    background: linear-gradient(150deg, var(--ob2-primary), var(--ob2-primary-hover));
}
.ob2-camp-logo.is-empty {
    background: linear-gradient(90deg, rgba(0,0,0,0.06) 25%, rgba(0,0,0,0.12) 37%, rgba(0,0,0,0.06) 63%);
    background-size: 400% 100%;
    animation: ob2-shimmer 1.4s ease-in-out infinite;
}
.ob2-camp-id { flex: 1; min-width: 0; }
.ob2-camp-name {
    font-size: 16px;
    font-weight: 700;
    letter-spacing: -0.3px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.ob2-camp-meta {
    font-size: 12.5px;
    color: var(--ob2-muted);
    margin-top: 2px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.ob2-camp-status {
    flex-shrink: 0;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    padding: 5px 9px;
    border-radius: 7px;
    background: var(--ob2-line);
    color: var(--ob2-muted);
}
.ob2-camp-ready .ob2-camp-status { background: var(--ob2-accent-warm-soft); color: #9a6b00; }
.ob2-camp-live .ob2-camp-status  { background: var(--ob2-primary-soft); color: var(--ob2-primary-hover); }
.ob2-camp-live .ob2-camp-status::before { content: '\25CF\00A0'; font-size: 8px; }

.ob2-camp-deliverable {
    display: flex;
    align-items: center;
    gap: 9px;
    margin-top: 16px;
    padding: 11px 13px;
    background: var(--ob2-primary-tint);
    border-radius: 11px;
    font-size: 13px;
    font-weight: 600;
}
.ob2-camp-deliverable-ic { font-size: 15px; }

.ob2-camp-rows { margin-top: 12px; }
.ob2-camp-row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 11px 2px;
    border-top: 1px solid var(--ob2-line);
    font-size: 13.5px;
}
.ob2-camp-row:first-child { border-top: none; }
.ob2-camp-row-ic { width: 18px; text-align: center; font-size: 14px; }
.ob2-camp-row-label { color: var(--ob2-muted); flex-shrink: 0; }
.ob2-camp-row-val {
    margin-left: auto;
    font-weight: 700;
    text-align: right;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.ob2-camp-row.is-empty .ob2-camp-row-ic,
.ob2-camp-row.is-empty .ob2-camp-row-label { opacity: 0.5; }

/* Skeleton placeholders — fields the user hasn't reached yet. */
.ob2-skel {
    border-radius: 6px;
    background: linear-gradient(90deg, rgba(0,0,0,0.06) 25%, rgba(0,0,0,0.12) 37%, rgba(0,0,0,0.06) 63%);
    background-size: 400% 100%;
    animation: ob2-shimmer 1.4s ease-in-out infinite;
}
@keyframes ob2-shimmer {
    0%   { background-position: 100% 0; }
    100% { background-position: -100% 0; }
}
.ob2-skel-name { height: 13px; width: 58%; }
.ob2-skel-meta { height: 10px; width: 38%; margin-top: 7px; }
.ob2-skel-val  { height: 10px; width: 70px; margin-left: auto; }

/* -- Journey stepper ------------------------------------------------------ */
.ob2-journey {
    list-style: none;
    margin: 0;
    padding: 0;
}
.ob2-journey-step {
    position: relative;
    display: flex;
    align-items: center;
    gap: 13px;
    padding: 9px 0;
    font-size: 13.5px;
}
/* Connector line linking the dots. */
.ob2-journey-step::before {
    content: '';
    position: absolute;
    left: 11px;
    top: -50%;
    height: 100%;
    width: 2px;
    background: rgba(255, 255, 255, 0.16);
}
.ob2-journey-step:first-child::before { display: none; }
.ob2-journey-step.is-done::before { background: rgba(255, 255, 255, 0.85); }

.ob2-journey-dot {
    position: relative;
    z-index: 1;
    flex-shrink: 0;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    font-weight: 800;
    color: #fff;
    border: 2px solid rgba(255, 255, 255, 0.32);
    background: transparent;
}
.ob2-journey-label { color: rgba(255, 255, 255, 0.6); font-weight: 500; }

.ob2-journey-step.is-done .ob2-journey-dot {
    background: #fff;
    border-color: #fff;
    color: var(--ob2-primary-hover);
}
.ob2-journey-step.is-done .ob2-journey-label { color: rgba(255, 255, 255, 0.82); }

.ob2-journey-step.is-current .ob2-journey-dot {
    border-color: #fff;
    animation: ob2-journey-pulse 2.4s ease-in-out infinite;
}
.ob2-journey-step.is-current .ob2-journey-dot::after {
    content: '';
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: #fff;
}
.ob2-journey-step.is-current .ob2-journey-label { color: #fff; font-weight: 700; }
@keyframes ob2-journey-pulse {
    0%, 100% { box-shadow: 0 0 0 4px rgba(255, 255, 255, 0.12); }
    50%      { box-shadow: 0 0 0 9px rgba(255, 255, 255, 0.04); }
}

/* -- Trust footer --------------------------------------------------------- */
.ob2-bp-foot {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    font-size: 12px;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.6);
}
.ob2-bp-foot-stars { color: var(--ob2-accent-warm); }
.ob2-bp-foot-dot {
    width: 3px;
    height: 3px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.4);
}

/* -------------------------------------------------------------------------- */
/*  Topbar (back arrow, optional title) + progress bar                        */
/* -------------------------------------------------------------------------- */
.ob2-topbar {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 18px 6px;
    gap: 12px;
}

.ob2-back {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    font-size: 24px;
    line-height: 1;
    color: var(--ob2-ink);
    background: none;
    border: none;
    cursor: pointer;
    text-decoration: none;
}
.ob2-topbar-close {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    font-size: 18px;
    line-height: 1;
    color: var(--ob2-ink);
    text-decoration: none;
    cursor: pointer;
}

.ob2-topbar-title {
    flex: 1;
    text-align: center;
    font-size: 14px;
    font-weight: 600;
    color: var(--ob2-ink);
    letter-spacing: -0.1px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ob2-topbar-spacer { width: 30px; flex-shrink: 0; }

.ob2-prog {
    flex-shrink: 0;
    height: 3px;
    background: var(--ob2-line);
    margin: 0 18px 4px;
    border-radius: 2px;
    overflow: hidden;
}

.ob2-prog-fill {
    height: 100%;
    background: var(--ob2-primary);
    border-radius: 2px;
    transition: width 0.4s ease;
}

/* -------------------------------------------------------------------------- */
/*  Layout primitives                                                         */
/* -------------------------------------------------------------------------- */
.ob2-pad {
    padding: 18px var(--ob2-pad-x) var(--ob2-pad-y);
}

.ob2-pad-tight { padding: 10px var(--ob2-pad-x) 12px; }
.ob2-pad-loose { padding: 28px var(--ob2-pad-x) 32px; }

/* For screens that need scroll-with-CTA — add bottom space so the sticky CTA never covers content. */
.ob2-scroll-with-cta { padding-bottom: 100px; }

/* -------------------------------------------------------------------------- */
/*  Buttons                                                                   */
/* -------------------------------------------------------------------------- */
.ob2-btn-primary {
    display: inline-block;
    width: 100%;
    padding: 16px;
    background: var(--ob2-primary);
    color: var(--ob2-surface);
    border: none;
    border-radius: var(--ob2-radius-pill);
    font-size: 15px;
    font-weight: 700;
    letter-spacing: -0.1px;
    text-align: center;
    text-decoration: none;
    cursor: pointer;
    box-shadow: var(--ob2-shadow-cta);
    transition: transform 0.15s ease, opacity 0.15s ease;
}
.ob2-btn-primary:hover:not(:disabled) { transform: translateY(-1px); color: var(--ob2-surface); }
.ob2-btn-primary:disabled,
.ob2-btn-primary[aria-disabled="true"] {
    opacity: 0.35;
    cursor: default;
    box-shadow: none;
    pointer-events: none;
}

/* Loading state: hide the button text and show a spinning ring. Applied to
   the clicked primary CTA (and any other submit on the same form) so users
   don't double-fire during slow server work. */
.ob2-btn-loading,
.ob2-btn-outline.ob2-btn-loading {
    pointer-events: none;
    cursor: default;
    position: relative;
    color: transparent !important;
    text-shadow: none;
}
.ob2-btn-loading::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 18px;
    height: 18px;
    margin: -9px 0 0 -9px;
    border-radius: 50%;
    border: 2px solid rgba(255, 255, 255, 0.45);
    border-top-color: #fff;
    animation: ob2-btn-loading-spin 0.7s linear infinite;
}
.ob2-btn-outline.ob2-btn-loading::after {
    border-color: rgba(13, 191, 181, 0.25);
    border-top-color: var(--ob2-primary);
}
@keyframes ob2-btn-loading-spin { to { transform: rotate(360deg); } }
.ob2-btn-primary .ob2-btn-sub {
    display: block;
    font-size: 11px;
    font-weight: 400;
    opacity: 0.85;
    margin-top: 2px;
    letter-spacing: 0;
}

.ob2-btn-secondary {
    display: inline-block;
    width: 100%;
    padding: 14px;
    background: transparent;
    color: var(--ob2-ink);
    border: 1.5px solid var(--ob2-line-strong);
    border-radius: var(--ob2-radius-pill);
    font-size: 14px;
    font-weight: 500;
    text-align: center;
    text-decoration: none;
    cursor: pointer;
}
.ob2-btn-secondary:hover { color: var(--ob2-ink); }

.ob2-btn-link {
    display: inline-block;
    color: var(--ob2-primary);
    font-size: 13px;
    font-weight: 500;
    text-decoration: none;
    cursor: pointer;
    background: none;
    border: none;
    padding: 0;
}

/* -------------------------------------------------------------------------- */
/*  Sticky bottom CTA                                                         */
/* -------------------------------------------------------------------------- */
.ob2-bottom-cta {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    background: var(--ob2-surface);
    padding: 10px var(--ob2-pad-x) calc(env(safe-area-inset-bottom, 0px) + 14px);
    z-index: 10;
    border-top: 1px solid transparent; /* placeholder for future shadow / divider */
}

.ob2-bottom-cta-trust {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    font-size: 11px;
    color: var(--ob2-muted-2);
    margin: 0 0 10px;
    flex-wrap: wrap;
}

/* -------------------------------------------------------------------------- */
/*  Inputs (plain text, label, helper)                                        */
/* -------------------------------------------------------------------------- */
.ob2-input {
    width: 100%;
    padding: 14px 16px;
    border: 1.5px solid var(--ob2-line-strong);
    border-radius: var(--ob2-radius-md);
    /* ≥ 16px stops iOS Safari from auto-zooming on input focus. */
    font-size: 16px;
    background: var(--ob2-surface);
    color: var(--ob2-ink);
    outline: none;
    transition: border-color 0.15s ease;
    font-family: inherit;
}
.ob2-input:focus { border-color: var(--ob2-primary); }
.ob2-input::placeholder { color: #aaa; }

.ob2-input-label {
    display: block;
    font-size: 12px;
    font-weight: 700;
    color: var(--ob2-muted-3);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    margin-bottom: 8px;
}
.ob2-biz-label {
    text-transform: none;
    letter-spacing: -0.1px;
    font-size: 15px;
    font-weight: 500;
    color: #16263F;
}
.ob2-biz-required {
    color: #ef4444;
    margin-left: 2px;
    font-weight: 700;
    font-size: 15px;
    line-height: 1;
}
.ob2-biz-optional {
    color: #8A93A3;
    font-weight: 500;
    font-size: 14px;
}
.ob2-biz-screen .ob2-question-h1 {
    font-size: 26px;
    font-weight: 600;
    line-height: 1.25;
    letter-spacing: -0.5px;
    margin-bottom: 8px;
}
.ob2-biz-screen .ob2-question-sub {
    color: #1E293B;
    margin-bottom: 28px;
}
.ob2-biz-group { margin-bottom: 20px; }
.ob2-biz-group:last-child { margin-bottom: 0; }
.ob2-biz-inputwrap {
    position: relative;
    display: flex;
    align-items: center;
}
.ob2-biz-ic {
    position: absolute;
    left: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #9AA3B2;
    pointer-events: none;
}
.ob2-biz-input {
    padding: 15px 16px 15px 46px;
    border-color: #E3E6EC;
    font-size: 15px;
    color: #16263F;
}
.ob2-biz-input::placeholder {
    color: #A7AEBC;
    font-weight: 400;
}
.ob2-biz-input:focus { border-color: var(--ob2-primary); }
.ob2-biz-screen .ob2-helper {
    color: #697586;
    margin-top: 6px;
}

.ob2-helper {
    font-size: 11px;
    color: var(--ob2-muted-2);
    margin-top: 6px;
    line-height: 1.4;
}

/* -------------------------------------------------------------------------- */
/*  Trust strip                                                               */
/* -------------------------------------------------------------------------- */
.ob2-trust {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    font-size: 11px;
    color: var(--ob2-muted-2);
    flex-wrap: wrap;
}
.ob2-trust .ob2-star { color: var(--ob2-accent-warm); font-size: 13px; }
.ob2-trust .ob2-dot { width: 3px; height: 3px; border-radius: 50%; background: #ccc; }

/* -------------------------------------------------------------------------- */
/*  Hero / value-prop screen                                                  */
/* -------------------------------------------------------------------------- */
.ob2-trust-top {
    position: absolute;
    top: 1rem;
    left: 1rem;
    right: 1rem;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    font-size: 14px;
    color: var(--ob2-muted);
    font-weight: 500;
    flex-shrink: 0;
}
.ob2-trust-top .ob2-star { color: var(--ob2-accent-warm); font-size: 13px; }
.ob2-trust-top .ob2-dot { width: 3px; height: 3px; border-radius: 50%; background: #ccc; }

.ob2-hero {
    padding: 16px 22px 12px;
}
.ob2-hero-eyebrow {
    font-size: 11px;
    font-weight: 700;
    color: var(--ob2-primary);
    letter-spacing: 0.12em;
    text-transform: uppercase;
    margin-bottom: 12px;
}
.ob2-hero-h1 {
    font-size: 29px;
    font-weight: 600;
    color: var(--ob2-ink);
    line-height: 1.18;
    letter-spacing: -0.7px;
    margin: 0 0 14px;
}
/* Mobile: drop a notch so the 3-sentence headline doesn't wrap to 5 lines. */
@media (max-width: 576px) {
    .ob2-hero-h1 { font-size: 24px; line-height: 1.2; letter-spacing: -0.5px; }
}
.ob2-hero-h1 span {
    color: var(--ob2-primary);
    font-weight: 700;
}
.ob2-hero-sub {
    font-size: 14px;
    color: var(--ob2-muted);
    line-height: 1.5;
    margin: 0;
}

.ob2-bullet {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    margin-bottom: 14px;
}
.ob2-bullet:last-child { margin-bottom: 0; }
.ob2-bullet-icon {
    width: 38px;
    height: 38px;
    border-radius: 10px;
    background: var(--ob2-primary-soft);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    font-size: 18px;
}
.ob2-bullet-text { flex: 1; }
.ob2-bullet-title {
    font-size: 16.5px;
    font-weight: 600;
    color: var(--ob2-ink);
    margin-bottom: 3px;
    letter-spacing: -0.1px;
    line-height: 1.35;
}
.ob2-bullet-desc {
    font-size: 14.5px;
    color: var(--ob2-muted-2);
    line-height: 1.4;
}

/* -------------------------------------------------------------------------- */
/*  Benefits / "what you get" screen                                          */
/* -------------------------------------------------------------------------- */
.ob2-question-h1.ob2-benefits-h1 {
    font-size: 26px;
    font-weight: 600;
    color: #111;
    line-height: 1.2;
    margin-bottom: 6px;
    letter-spacing: -0.5px;
}
.ob2-question-sub.ob2-benefits-sub {
    font-size: 13px;
    color: #1e293b;
    margin-bottom: 18px;
    line-height: 1.5;
}

.ob2-tl-eyebrow {
    font-size: 10.5px;
    font-weight: 700;
    color: #0A9991;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    margin: 6px 0 14px;
}
.ob2-steps-timeline { margin: 0 0 8px; }
.ob2-tl-step {
    display: grid;
    grid-template-columns: 26px 1fr;
    column-gap: 14px;
    align-items: stretch;
    padding-bottom: 22px;
}
.ob2-tl-step:last-child { padding-bottom: 0; }
.ob2-tl-rail {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: flex-start;
}
.ob2-tl-line {
    position: absolute;
    top: 13px;
    bottom: -22px;
    left: 50%;
    transform: translateX(-50%);
    width: 2px;
    background: linear-gradient(#0DBFB5, #BEEDEA);
}
.ob2-tl-step:last-child .ob2-tl-line { display: none; }
.ob2-tl-dot {
    position: relative;
    z-index: 1;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: #0DBFB5;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12.5px;
    font-weight: 700;
    flex-shrink: 0;
    box-shadow: 0 0 0 4px #fff;
}
.ob2-tl-body { align-self: start; padding-top: 2px; }

.ob2-section-label {
    font-size: 18px;
    font-weight: 500;
    color: #111;
    letter-spacing: -0.2px;
    margin: 24px 0 12px;
    line-height: 1.3;
}

.ob2-step-card {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    padding: 14px;
    background: var(--ob2-surface-alt);
    border-radius: var(--ob2-radius-md);
    margin-bottom: 8px;
}
.ob2-step-num {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: var(--ob2-primary);
    color: var(--ob2-surface);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    font-weight: 700;
    flex-shrink: 0;
}
.ob2-step-info { flex: 1; }
.ob2-step-title {
    font-size: 14px;
    font-weight: 600;
    color: #111;
    margin-bottom: 3px;
    letter-spacing: -0.1px;
}
.ob2-step-desc {
    font-size: 12px;
    color: #475569;
    line-height: 1.5;
}

.ob2-clips {
    display: flex;
    gap: 10px;
    overflow-x: auto;
    padding: 0 var(--ob2-pad-x) 4px 0;
    margin: 0 calc(var(--ob2-pad-x) * -1) 14px 0;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: x mandatory;
}
.ob2-clips::-webkit-scrollbar { display: none; }
.ob2-clip {
    min-width: 150px;
    max-width: 150px;
    border-radius: 14px;
    overflow: hidden;
    position: relative;
    aspect-ratio: 9 / 13;
    background: #222;
    flex-shrink: 0;
    scroll-snap-align: start;
}
.ob2-clip img,
.ob2-clip video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    background: #222;
}
.ob2-clip { cursor: pointer; }
/* Hide the play badge + bottom overlay while a clip is actually playing so
   the user actually sees the content. JS toggles .is-playing on the wrapper. */
.ob2-clip.is-playing .ob2-clip-play,
.ob2-clip.is-playing .ob2-clip-overlay { display: none; }
.ob2-clip-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.65) 0%, transparent 45%);
}
.ob2-clip-fs {
    position: absolute;
    top: 8px;
    left: 8px;
    width: 24px;
    height: 24px;
    border: 0;
    border-radius: 7px;
    background: rgba(20, 20, 20, 0.55);
    color: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    z-index: 3;
    cursor: pointer;
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
}
.ob2-clip-fs svg { display: block; }
.ob2-clip-fs:focus {
    outline: none;
    box-shadow: 0 0 0 2px rgba(13, 191, 181, 0.35);
}
.ob2-clip-play {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.92);
    display: flex;
    align-items: center;
    justify-content: center;
}
.ob2-clip-stats {
    position: absolute;
    bottom: 8px;
    left: 8px;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    background: rgba(20, 20, 20, 0.55);
    border-radius: 999px;
    padding: 5px 10px;
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
}
.ob2-clip-stat {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 11px;
    font-weight: 700;
    color: #fff;
    line-height: 1;
}
.ob2-clip-stat-icon {
    width: 12px;
    height: 12px;
    flex: 0 0 12px;
}

.ob2-mini-reviews {
    display: flex;
    gap: 10px;
    overflow-x: auto;
    padding: 0 var(--ob2-pad-x) 12px;
    margin: 0 calc(var(--ob2-pad-x) * -1) 14px;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: x mandatory;
}
.ob2-mini-reviews::-webkit-scrollbar { display: none; }
.ob2-mini-rev {
    min-width: 240px;
    max-width: 240px;
    background: var(--ob2-surface-alt);
    border-radius: var(--ob2-radius-md);
    padding: 14px;
    display: flex;
    flex-direction: column;
    gap: 6px;
    flex-shrink: 0;
    scroll-snap-align: start;
}
.ob2-mini-rev-top {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 4px;
}
.ob2-mini-rev-logo {
    width: 36px;
    height: 36px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 12px;
    font-weight: 700;
    flex-shrink: 0;
}
.ob2-mini-rev-name {
    font-size: 13px;
    font-weight: 600;
    color: var(--ob2-ink);
    letter-spacing: -0.1px;
    line-height: 1.3;
}
.ob2-mini-rev-cat {
    font-size: 11px;
    color: var(--ob2-muted-2);
    margin-top: 1px;
}
.ob2-mini-rev-stars {
    color: var(--ob2-accent-warm);
    font-size: 12px;
    letter-spacing: 0.5px;
    margin-bottom: 2px;
}
.ob2-mini-rev-text {
    font-size: 12.5px;
    color: var(--ob2-ink-soft);
    line-height: 1.5;
}
.ob2-mini-rev-result {
    font-size: 11px;
    color: var(--ob2-primary-hover);
    font-weight: 600;
    margin-top: 6px;
    padding-top: 8px;
    border-top: 1px dashed #e5e5e5;
}

.ob2-trust-row {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    flex-wrap: wrap;
    margin-bottom: 6px;
}
.ob2-tlogo {
    font-size: 10px;
    font-weight: 600;
    color: var(--ob2-muted);
    border: 0.5px solid var(--ob2-line-strong);
    padding: 4px 10px;
    border-radius: 6px;
}

.ob2-trust-bar {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    margin: 18px 0 4px;
    padding: 10px 16px;
    background: var(--ob2-surface-alt);
    border-radius: 100px;
    width: fit-content;
    margin-left: auto;
    margin-right: auto;
}
.ob2-trust-bar-rating {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 13px;
    font-weight: 700;
    color: var(--ob2-ink);
    letter-spacing: -0.1px;
}
.ob2-trust-bar-rating svg { flex-shrink: 0; }
.ob2-trust-bar-divider {
    width: 1px;
    height: 14px;
    background: var(--ob2-line-strong);
    flex-shrink: 0;
}
.ob2-trust-bar-count {
    font-size: 12.5px;
    color: var(--ob2-muted);
    font-weight: 500;
}

/* -------------------------------------------------------------------------- */
/*  Live / success screen                                                     */
/* -------------------------------------------------------------------------- */
.ob2-live-wrap {
    flex: 1;
    display: flex;
    flex-direction: column;
    padding: 0;
    text-align: center;
    overflow: hidden;
    position: relative;
    min-height: 0;
}
.ob2-live-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    padding: 20px 20px 12px;
    overflow-y: auto;
    min-height: 0;
}
.ob2-live-hero {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-bottom: 16px;
    flex-shrink: 0;
    padding-top: 0;
}
.ob2-live-icon {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: var(--ob2-primary);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 10px;
    animation: ob2-bounce 0.6s ease;
    box-shadow: 0 6px 18px rgba(13, 191, 181, 0.28);
}
.ob2-live-icon svg { width: 28px; height: 28px; }
@keyframes ob2-bounce {
    0%   { transform: scale(0); }
    60%  { transform: scale(1.1); }
    100% { transform: scale(1); }
}
.ob2-live-h {
    font-size: 20px;
    font-weight: 800;
    color: var(--ob2-ink);
    letter-spacing: -0.5px;
    line-height: 1.2;
    margin: 0;
}
.ob2-live-sub {
    font-size: 14px;
    font-weight: 600;
    color: #64748B;
    margin-top: 7px;
    line-height: 1.4;
    max-width: 280px;
}

/* Reference flow card: creators already found in the city. */
.ob2-live-found {
    width: 100%;
    background: var(--ob2-primary-soft);
    border: 1.5px solid rgba(var(--ob2-primary-rgb), 0.24);
    border-radius: var(--ob2-radius-md);
    padding: 14px 14px 13px;
    margin-bottom: 14px;
    text-align: left;
    flex-shrink: 0;
}
.ob2-live-found-eyebrow {
    display: flex;
    align-items: center;
    gap: 7px;
    font-size: 11px;
    font-weight: 800;
    color: var(--ob2-primary);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    margin-bottom: 9px;
}
.ob2-live-found-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--ob2-primary);
    flex-shrink: 0;
}
.ob2-live-found-head {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 10px;
}
.ob2-live-found-avatars {
    display: flex;
    align-items: center;
    flex-shrink: 0;
}
.ob2-live-avatar {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    border: 2px solid #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 10px;
    font-weight: 700;
    color: #fff;
    margin-left: -7px;
}
.ob2-live-avatar:first-child { margin-left: 0; }
.ob2-live-avatar-1 { background: #14B8A6; }
.ob2-live-avatar-2 { background: #F97316; }
.ob2-live-avatar-3 { background: #818CF8; }
.ob2-live-avatar-more { background: #475569; }
.ob2-live-found-count {
    font-size: 13.5px;
    color: #334155;
    font-weight: 600;
    line-height: 1.3;
}
.ob2-live-found-count strong {
    color: #0A9991;
    font-weight: 800;
}
.ob2-live-found-title {
    font-size: 17px;
    font-weight: 600;
    color: var(--ob2-ink);
    letter-spacing: -0.25px;
    line-height: 1.25;
    margin: 0 0 6px;
}
.ob2-live-found-desc {
    font-size: 14px;
    color: #5B6472;
    font-weight: 400;
    line-height: 1.45;
}
.ob2-live-found-desc strong {
    color: #0F172A;
    font-weight: 800;
}

.ob2-live-section-label {
    margin: 2px 0 8px;
    font-size: 11px;
    font-weight: 800;
    color: var(--ob2-primary);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    text-align: center;
    flex-shrink: 0;
}
.ob2-live-section-label-muted {
    color: var(--ob2-muted-3);
    margin-top: 2px;
    font-size: 10px;
}
.ob2-live-store-btns {
    margin: 0 0 10px;
    flex-shrink: 0;
}
.ob2-live-steps-launch {
    margin-top: 0;
    margin-bottom: 0;
}
/* Keep steps compact on the live summary card. */
.ob2-live-steps-launch .ob2-live-step {
    padding: 5px 0;
    font-weight: 400;
}
/* 14px appears huge at this position on real devices. */
.ob2-live-steps-launch .ob2-live-step .ob2-live-step-num {
    width: 19px;
    height: 19px;
    font-size: 10px;
}
.ob2-live-steps-launch .ob2-live-step strong {
    font-weight: 700;
}

.ob2-homework-card {
    width: 100%;
    background: linear-gradient(135deg, var(--ob2-accent-warm-soft) 0%, #FFEFD0 100%);
    border: 1.5px solid var(--ob2-accent-warm);
    border-radius: var(--ob2-radius-md);
    padding: 14px 16px;
    margin-bottom: 14px;
    position: relative;
    text-align: left;
    flex-shrink: 0;
}
.ob2-homework-badge {
    position: absolute;
    top: -9px;
    left: 16px;
    background: var(--ob2-accent-warm);
    color: #fff;
    font-size: 9px;
    font-weight: 800;
    padding: 4px 10px;
    border-radius: 12px;
    letter-spacing: 0.1em;
}
.ob2-homework-title {
    font-size: 15px;
    font-weight: 800;
    color: #5C4400;
    margin: 6px 0 6px;
    letter-spacing: -0.2px;
    line-height: 1.25;
}
.ob2-homework-desc {
    font-size: 12.5px;
    color: #5C4400;
    line-height: 1.45;
    margin-bottom: 11px;
}
.ob2-homework-desc em { font-style: italic; font-weight: 500; }
.ob2-homework-cta {
    display: block;
    width: 100%;
    background: #5C4400;
    color: #fff;
    font-size: 13px;
    font-weight: 700;
    padding: 10px;
    border-radius: 9px;
    border: 0;
    cursor: pointer;
    text-align: center;
    text-decoration: none;
    letter-spacing: -0.1px;
}
.ob2-homework-cta:hover { color: #fff; }
.ob2-homework-tip {
    background: #FFF8E7;
    border: 1px solid #FFE5B4;
    border-radius: 10px;
    padding: 10px 12px;
    margin-top: 11px;
    font-size: 12px;
    color: #5C4400;
    line-height: 1.4;
    text-align: left;
}
.ob2-homework-tip strong { color: #3D2C00; font-weight: 700; }

.ob2-live-steps {
    width: 100%;
    background: #F4F4F5;
    border-radius: var(--ob2-radius-md);
    padding: 14px;
    text-align: left;
    flex-shrink: 0;
}
.ob2-live-stitle {
    font-size: 10px;
    font-weight: 700;
    color: var(--ob2-muted-3);
    text-transform: uppercase;
    letter-spacing: 0.07em;
    margin-bottom: 6px;
}
.ob2-live-step {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 6px 0;
    font-size: 13px;
    color: var(--ob2-ink);
    line-height: 1.4;
}
.ob2-live-step strong { font-weight: 700; }
.ob2-live-step .ob2-live-step-num {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: #fff;
    border: 1.5px solid var(--ob2-primary);
    color: var(--ob2-primary);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 10px;
    font-weight: 700;
    flex-shrink: 0;
    margin-top: 1px;
}

.ob2-live-bottom {
    flex-shrink: 0;
    background: #fff;
    border-top: 0.5px solid #efefef;
    padding: 14px 20px calc(env(safe-area-inset-bottom, 0px) + 20px);
}
.ob2-store-btns {
    display: flex;
    gap: 10px;
    width: 100%;
    margin: 12px 0;
    justify-content: center;
}
/* App Store / Google Play badge buttons — the PNG badge is the whole button.
   Fixed height + native aspect ratio so both badges match and aren't stretched
   full-width into oversized blocks. No button chrome — the PNG is the visual. */
.ob2-store-badge {
    padding: 0;
    border: 0;
    background: none;
    cursor: pointer;
    line-height: 0;
}
.ob2-store-badge img {
    display: block;
    height: 44px;
    width: auto;
}
.ob2-store-btn {
    flex: 1;
    background: #000;
    color: #fff;
    border-radius: 10px;
    padding: 8px 10px;
    display: flex;
    align-items: center;
    gap: 8px;
    text-decoration: none;
    cursor: pointer;
    justify-content: center;
}
.ob2-store-btn:hover { color: #fff; }
.ob2-store-btn .ob2-store-btn-small {
    font-size: 9px;
    color: #fff;
    line-height: 1;
    opacity: 0.9;
}
.ob2-store-btn .ob2-store-btn-big {
    font-size: 14px;
    color: #fff;
    font-weight: 600;
    line-height: 1.1;
    margin-top: 2px;
    letter-spacing: -0.2px;
}

/* -------------------------------------------------------------------------- */
/*  Question screens (business_name / offer / location / review header)       */
/* -------------------------------------------------------------------------- */
/* Canonical page heading + sub used by every v2 step (hero + live are the
   only exceptions — they have their own celebration typography). Same font
   sizes / weights / line-heights / margins across pages so visual rhythm
   stays consistent — title length itself decides how tall each header is. */
.ob2-question-h1 {
    font-size: 28px;
    font-weight: 700;
    color: var(--ob2-ink);
    line-height: 1.2;
    letter-spacing: -0.6px;
    margin: 0 0 14px;
}
/* Teal accent for any embedded span — e.g. benefits headline has
   `Iată exact <span>ce se întâmplă</span><br>când lansezi`. */
.ob2-question-h1 span { color: var(--ob2-primary); }
.ob2-question-h1.ob2-contact-h1 {
    font-size: 26px;
    font-weight: 600;
    letter-spacing: -0.5px;
    line-height: 1.25;
    margin-bottom: 8px;
}
.ob2-question-sub {
    font-size: 14px;
    color: var(--ob2-muted);
    line-height: 1.5;
    margin: 0 0 24px;
}
.ob2-add-link {
    display: inline-block;
    color: var(--ob2-primary);
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    margin-top: 10px;
    text-decoration: none;
}
.ob2-add-link:hover { color: var(--ob2-primary-hover); }

/* Full-width dashed "+ Adaugă altă adresă" button used on /v2/location. */
.ob2-loc-add-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    margin-top: 10px;
    padding: 14px;
    color: var(--ob2-primary);
    font-size: 14px;
    font-weight: 500;
    text-decoration: none;
    background: transparent;
    border: 1.5px dashed var(--ob2-line-strong);
    border-radius: 14px;
    transition: border-color 0.15s ease, color 0.15s ease, background 0.15s ease;
}
.ob2-loc-add-btn:hover {
    border-color: var(--ob2-primary);
    color: var(--ob2-primary-hover);
    background: var(--ob2-primary-soft);
}
.ob2-form-error {
    margin-top: 14px;
    padding: 10px 12px;
    background: #FFE9E9;
    border: 1px solid #FFB4B4;
    border-radius: 12px;
    font-size: 12.5px;
    color: var(--ob2-danger);
}
.ob2-cta-help {
    margin-top: 8px;
    font-size: 11px;
    color: var(--ob2-muted-2);
    text-align: center;
    line-height: 1.4;
}
.ob2-cta-help a { text-decoration: underline; text-underline-offset: 2px; }

/* -------------------------------------------------------------------------- */
/*  Loading screen (animated discovery)                                       */
/* -------------------------------------------------------------------------- */
.ob2-load-wrap {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 24px 24px 120px;
    text-align: center;
}
.ob2-load-icon {
    width: 72px;
    height: 72px;
    border-radius: 50%;
    background: var(--ob2-primary-soft);
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 20px;
    transition: background 0.4s ease, transform 0.4s ease;
    position: relative;
}
.ob2-load-icon::before {
    content: '';
    position: absolute;
    inset: -8px;
    border-radius: 50%;
    background: var(--ob2-primary-soft);
    opacity: 0;
    animation: ob2-pulse 2s infinite;
    z-index: -1;
}
@keyframes ob2-pulse {
    0%, 100% { opacity: 0; transform: scale(0.95); }
    50%      { opacity: 0.5; transform: scale(1.05); }
}
.ob2-load-title {
    font-size: 18px;
    font-weight: 600;
    color: var(--ob2-ink);
    margin-bottom: 6px;
    letter-spacing: -0.3px;
}
.ob2-load-sub {
    font-size: 14px;
    color: #666;
    line-height: 1.5;
    max-width: 280px;
    margin: 0 auto 18px;
    text-align: center;
}
.ob2-load-found {
    font-size: 13px;
    color: var(--ob2-primary);
    font-weight: 500;
    min-height: 20px;
    opacity: 0;
    transition: opacity 0.5s ease;
    margin-bottom: 18px;
}
.ob2-load-bar {
    width: 100%;
    height: 5px;
    background: var(--ob2-line);
    border-radius: 3px;
    overflow: hidden;
    margin-bottom: 20px;
}
.ob2-load-bar-fill {
    height: 100%;
    width: 0;
    background: linear-gradient(90deg, var(--ob2-primary), #3FD4CB);
    border-radius: 3px;
    transition: width 0.5s ease;
}
.ob2-load-steps {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-bottom: 18px;
}
.ob2-load-step {
    display: flex;
    align-items: center;
    gap: 10px;
    opacity: 0;
    transform: translateY(4px);
    transition: opacity 0.4s ease, transform 0.4s ease;
    text-align: left;
}
.ob2-load-step.is-visible { opacity: 1; transform: none; }
.ob2-load-chk {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: #ddd;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: background 0.3s ease;
}
.ob2-load-chk.is-done { background: var(--ob2-primary); }
.ob2-load-stxt { font-size: 13px; color: var(--ob2-muted-3); flex: 1; }
.ob2-load-step.is-visible .ob2-load-stxt { color: var(--ob2-ink); }
.ob2-load-result {
    width: 100%;
    margin-top: 8px;
    transition: opacity 0.5s ease, transform 0.5s ease;
}
.ob2-load-num {
    font-size: 36px;
    font-weight: 700;
    color: var(--ob2-primary);
    letter-spacing: -1px;
    margin-bottom: 4px;
}
.ob2-load-txt { font-size: 13px; color: var(--ob2-muted-2); margin-bottom: 16px; line-height: 1.4; }

/* -------------------------------------------------------------------------- */
/*  Platform selection cards                                                  */
/* -------------------------------------------------------------------------- */
.ob2-platform-screen {
    display: flex;
    flex-direction: column;
    flex: 1;
}
.ob2-platform-form {
    width: 100%;
    flex: 1;
    display: flex;
    flex-direction: column;
}
.ob2-platform-group {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding-bottom: 24px;
}
.ob2-question-h1.ob2-platform-h1 {
    font-size: 26px;
    font-weight: 600;
    letter-spacing: -0.5px;
    line-height: 1.22;
    margin-bottom: 28px;
    padding-top: 6px;
}
.ob2-plat-card {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 16px;
    background: var(--ob2-surface);
    border: 1.5px solid var(--ob2-line-strong);
    border-radius: var(--ob2-radius-md);
    margin-bottom: 10px;
    cursor: pointer;
    transition: border-color 0.2s ease, background 0.2s ease;
    text-align: left;
    font: inherit;
    color: inherit;
}
.ob2-plat-card:hover { border-color: var(--ob2-primary); }
.ob2-plat-card.is-selected {
    border-color: var(--ob2-primary);
    background: var(--ob2-primary-tint);
}
.ob2-plat-icon {
    width: 36px;
    height: 36px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.ob2-plat-icon-tiktok { background: #111; }
.ob2-plat-icon-instagram { background: linear-gradient(135deg, #f09433 0%, #e6683c 25%, #dc2743 50%, #cc2366 75%, #bc1888 100%); }
.ob2-plat-icon-youtube { background: #FF0000; }
.ob2-plat-name {
    flex: 1;
    font-size: 15px;
    font-weight: 600;
    color: var(--ob2-ink);
    letter-spacing: -0.1px;
}
.ob2-plat-radio {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    border: 2px solid var(--ob2-line-strong);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: border-color 0.2s ease, background 0.2s ease;
}
.ob2-plat-radio svg { opacity: 0; transition: opacity 0.2s ease; }
.ob2-plat-card.is-selected .ob2-plat-radio {
    background: var(--ob2-primary);
    border-color: var(--ob2-primary);
}
.ob2-plat-card.is-selected .ob2-plat-radio svg { opacity: 1; }

/* -------------------------------------------------------------------------- */
/*  Info box (used on offer screen)                                           */
/* -------------------------------------------------------------------------- */
.ob2-info-box {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    padding: 12px 14px;
    background: #E1F5EE;
    border-radius: 12px;
    margin-bottom: 14px;
    font-size: 12px;
    color: #0A9991;
    line-height: 1.5;
}
.ob2-info-box strong { font-weight: 600; }
.ob2-info-icon { font-size: 16px; flex-shrink: 0; }

/* -------------------------------------------------------------------------- */
/*  Location list cards                                                       */
/* -------------------------------------------------------------------------- */
.ob2-loc-list { display: flex; flex-direction: column; gap: 10px; }
.ob2-loc-card {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 14px 16px;
    width: 100%;
    background: var(--ob2-surface);
    border: 1.5px solid var(--ob2-line-strong);
    border-radius: var(--ob2-radius-md);
    cursor: pointer;
    transition: border-color 0.2s ease, background 0.2s ease;
    text-align: left;
    font: inherit;
    color: inherit;
    position: relative;
}
.ob2-loc-card:hover:not(.is-selected) { border-color: var(--ob2-primary); }
.ob2-loc-card.is-selected { border-color: var(--ob2-primary); background: var(--ob2-primary-tint); }
.ob2-loc-card.is-incomplete { border-style: dashed; }
.ob2-loc-card-radio { position: absolute; opacity: 0; pointer-events: none; }
.ob2-loc-pin { width: 28px; flex-shrink: 0; display: flex; justify-content: center; }
.ob2-loc-info { flex: 1; min-width: 0; }
.ob2-loc-name {
    display: block;
    font-size: 14px;
    font-weight: 600;
    color: var(--ob2-ink);
    letter-spacing: -0.1px;
    margin-bottom: 2px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.ob2-loc-addr {
    display: block;
    font-size: 12px;
    color: var(--ob2-muted-2);
    line-height: 1.4;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.ob2-loc-pin-hint {
    display: block;
    font-size: 11px;
    font-weight: 600;
    color: var(--ob2-accent-warm);
    margin-top: 4px;
}
.ob2-loc-edit-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 8px;
    color: var(--ob2-muted);
    background: transparent;
    border: 1px solid transparent;
    flex-shrink: 0;
    transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
.ob2-loc-edit-link:hover {
    background: var(--ob2-primary-soft);
    color: var(--ob2-primary);
    border-color: var(--ob2-primary);
}
.ob2-loc-radio-pill {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    border: 2px solid var(--ob2-line-strong);
    background: var(--ob2-surface);
    flex-shrink: 0;
    position: relative;
    transition: border-color 0.15s ease, background 0.15s ease;
}
.ob2-loc-card.is-selected .ob2-loc-radio-pill {
    border-color: var(--ob2-primary);
    background: var(--ob2-primary);
}
.ob2-loc-card.is-selected .ob2-loc-radio-pill::after {
    content: "";
    position: absolute;
    inset: 4px;
    border-radius: 50%;
    background: var(--ob2-surface);
}
.ob2-loc-empty {
    padding: 24px 16px;
    text-align: center;
    color: var(--ob2-muted);
    font-size: 13px;
    border: 1px dashed var(--ob2-line-strong);
    border-radius: var(--ob2-radius-md);
    background: var(--ob2-surface);
}

/* Google's pac-container floats above the page; raise it above the sticky CTA. */
.pac-container { z-index: 1100 !important; }

/* -------------------------------------------------------------------------- */
/*  Vertical field stack — used by brand_profile + location_edit              */
/* -------------------------------------------------------------------------- */
.ob2-fld-stack { display: flex; flex-direction: column; gap: 14px; }
.ob2-fld { display: flex; flex-direction: column; }
.ob2-fld .ob2-input-label { margin-bottom: 6px; }

/* -------------------------------------------------------------------------- */
/*  Brand-profile row layout (icon + label + input)                           */
/* -------------------------------------------------------------------------- */
.ob2-bp-stack {
    display: flex;
    flex-direction: column;
    background: var(--ob2-surface);
    border: 1px solid var(--ob2-line);
    border-radius: var(--ob2-radius-md);
    padding: 2px 4px;
}
.ob2-bp-row {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 8px 10px;
    border-radius: var(--ob2-radius-sm, 8px);
    transition: background 0.15s ease;
}
.ob2-bp-row + .ob2-bp-row { border-top: 1px solid var(--ob2-line); }
.ob2-bp-row-icon {
    width: 26px;
    height: 26px;
    border-radius: 7px;
    background: var(--ob2-primary-soft);
    color: var(--ob2-primary);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    margin-top: 1px;
}
.ob2-bp-row-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.ob2-bp-row-label {
    font-size: 10.5px;
    font-weight: 700;
    color: var(--ob2-muted);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}
.ob2-bp-row-input {
    width: 100%;
    border: none;
    background: white;
    /* ≥ 16px stops iOS Safari from auto-zooming on input focus. */
    font-size: 16px;
    color: var(--ob2-ink);
    padding: 0;
    font: inherit;
    font-weight: 500;
    outline: none;
}
.ob2-bp-row-input::placeholder { color: var(--ob2-muted-2); font-weight: 400; }
.ob2-bp-row-textarea-input {
    resize: none;
    overflow: hidden;
    min-height: 22px;
    line-height: 1.45;
}

/* Slightly more compact "details" trigger for the socials toggle, used inside
   brand_profile so the fold doesn't dominate vertical space. */
.ob2-bp-socials { margin-top: 10px; }

/* -------------------------------------------------------------------------- */
/*  Brand profile in-place scanner (replaces the old standalone loading step) */
/*  Renders inside the brand_profile screen while the single AI discovery     */
/*  AJAX call is in flight.                                                   */
/* -------------------------------------------------------------------------- */
.ob2-bp-scan {
    position: absolute;
    inset: 0;
    z-index: 5;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 18px;
    padding: 36px 28px;
    text-align: center;
    background: var(--ob2-surface);
}
.ob2-bp-scan-icon {
    position: relative;
    width: 80px;
    height: 80px;
    border-radius: 50%;
    background: var(--ob2-primary-soft);
    display: flex;
    align-items: center;
    justify-content: center;
}
/* Spinning ring around the icon — the "loading" affordance. */
.ob2-bp-scan-icon::before {
    content: '';
    position: absolute;
    inset: -6px;
    border: 2px solid rgba(var(--ob2-primary-rgb), 0.25);
    border-top-color: var(--ob2-primary);
    border-radius: 50%;
    animation: ob2-bp-scan-spin 1.2s linear infinite;
}
@keyframes ob2-bp-scan-spin { to { transform: rotate(360deg); } }
.ob2-bp-scan-title {
    font-size: 21px;
    font-weight: 800;
    color: var(--ob2-ink);
    letter-spacing: -0.4px;
    line-height: 1.25;
}
.ob2-bp-scan-sub {
    font-size: 13.5px;
    color: var(--ob2-muted);
    line-height: 1.45;
    max-width: 270px;
    margin-top: -8px;
}
/* Single rotating status line under the progress bar. */
.ob2-bp-scan-stepline {
    font-size: 12.5px;
    font-weight: 500;
    color: var(--ob2-muted-2);
    min-height: 18px;
}
.ob2-bp-scan-preparing {
    font-size: 12.5px;
    color: var(--ob2-muted-2);
    animation: ob2-pulse 1.6s ease-in-out infinite;
}
.ob2-bp-scan-bar {
    width: 100%;
    max-width: 220px;
    height: 4px;
    background: var(--ob2-line);
    border-radius: 2px;
    overflow: hidden;
}
.ob2-bp-scan-bar-fill {
    height: 100%;
    width: 0;
    background: var(--ob2-primary);
    border-radius: 2px;
}
.ob2-bp-scan-steps {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
    align-items: flex-start;
}
.ob2-bp-scan-step {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 13.5px;
    color: var(--ob2-muted);
    opacity: 0;
    transform: translateY(4px);
    transition: opacity 0.3s ease, transform 0.3s ease;
}
.ob2-bp-scan-step.is-visible { opacity: 1; transform: translateY(0); }
.ob2-bp-scan-chk {
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: var(--ob2-line);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: background 0.25s ease;
}
.ob2-bp-scan-chk.is-done { background: var(--ob2-primary); }

/* -------------------------------------------------------------------------- */
/*  Location edit screen                                                      */
/* -------------------------------------------------------------------------- */
.ob2-loc-edit-status {
    font-size: 11.5px;
    color: var(--ob2-muted);
    margin-top: 6px;
    line-height: 1.4;
}
.ob2-loc-edit-status.is-error { color: var(--ob2-danger); }
.ob2-loc-map {
    width: 100%;
    height: 200px;
    border-radius: var(--ob2-radius-md);
    overflow: hidden;
    background: var(--ob2-line);
    position: relative;
    margin-top: 10px;
}
.ob2-loc-map-fallback {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 16px;
    font-size: 12.5px;
    color: var(--ob2-muted);
}
.ob2-loc-edit-delete {
    margin-top: 16px;
    color: var(--ob2-danger);
    font-size: 13px;
    font-weight: 500;
}
.ob2-bottom-cta-stack {
    display: flex;
    flex-direction: row;
    gap: 8px;
}
.ob2-bottom-cta-stack .ob2-btn-secondary { flex: 0 0 auto; min-width: 96px; }
.ob2-bottom-cta-stack .ob2-btn-primary { flex: 1 1 auto; }

/* -------------------------------------------------------------------------- */
/*  Review summary cards                                                      */
/* -------------------------------------------------------------------------- */
.ob2-rev-card {
    position: relative;
    padding: 14px 16px;
    background: var(--ob2-surface-alt);
    border: none;
    border-radius: var(--ob2-radius-md);
    margin-bottom: 8px;
}
.ob2-rev-edit {
    position: absolute;
    top: 14px;
    right: 16px;
    font-size: 12.5px;
    font-weight: 600;
    color: var(--ob2-primary);
    text-decoration: none;
    cursor: pointer;
}
.ob2-rev-edit:hover { color: var(--ob2-primary-hover); }
.ob2-rev-label {
    font-size: 10px;
    font-weight: 700;
    color: var(--ob2-muted-3);
    text-transform: uppercase;
    letter-spacing: 0.07em;
    margin-bottom: 6px;
}
.ob2-rev-value {
    font-size: 14px;
    font-weight: 600;
    color: var(--ob2-ink);
    line-height: 1.35;
    letter-spacing: -0.1px;
}
.ob2-rev-meta { font-size: 11px; color: var(--ob2-muted-2); margin-top: 2px; line-height: 1.45; }

/* Offer card — teal-outlined "high" treatment on a mint background. */
.ob2-rev-card-offer {
    border: 1.5px solid var(--ob2-primary);
    background: var(--ob2-primary-soft);
}
.ob2-rev-offer-photo {
    position: relative;
    margin-top: 10px;
    width: 100%;
    height: 140px;
    border-radius: 10px;
    overflow: hidden;
    background: var(--ob2-line);
}
.ob2-rev-offer-photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
/* Empty state — dashed drop-zone look when no photo is uploaded yet. */
.ob2-rev-offer-photo.is-empty {
    background: var(--ob2-surface);
    border: 1.5px dashed var(--ob2-line-strong);
}
/* Edit/add affordance — small pill, bottom-right over the photo. */
.ob2-rev-photo-edit {
    position: absolute;
    right: 8px;
    bottom: 8px;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 6px 10px;
    border: 0;
    border-radius: 999px;
    background: rgba(17, 17, 17, 0.72);
    color: #fff;
    font-size: 11px;
    font-weight: 600;
    cursor: pointer;
}
.ob2-rev-offer-photo.is-empty .ob2-rev-photo-edit {
    position: static;
    margin: 50px auto 0;
    background: var(--ob2-primary);
}
.ob2-rev-photo-busy {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.82);
}
.ob2-rev-photo-busy[hidden] { display: none !important; }
.ob2-rev-photo-busy-spinner {
    width: 22px;
    height: 22px;
    border: 2.5px solid var(--ob2-line-strong);
    border-top-color: var(--ob2-primary);
    border-radius: 50%;
    animation: ob2-spin 0.7s linear infinite;
}

/* Instructions row — title + sub on the left, pill button on the right. */
/* Instructions card — teal-tinted, icon + text row, centred pill button. */
.ob2-rev-card-instructions {
    padding: 15px;
    background: rgba(var(--ob2-primary-rgb), 0.05);
    border: 1.5px solid rgba(var(--ob2-primary-rgb), 0.25);
}
.ob2-rev-instr-head {
    display: flex;
    align-items: center;
    gap: 13px;
    margin-bottom: 14px;
}
.ob2-rev-instr-icon {
    width: 42px;
    height: 42px;
    flex-shrink: 0;
    border-radius: 11px;
    background: var(--ob2-primary);
    display: flex;
    align-items: center;
    justify-content: center;
}
.ob2-rev-card-body { flex: 1; min-width: 0; }
.ob2-rev-card-title {
    font-size: 15px;
    font-weight: 700;
    color: var(--ob2-ink);
    letter-spacing: -0.2px;
    line-height: 1.3;
}
.ob2-rev-card-desc {
    font-size: 12px;
    color: var(--ob2-muted-2);
    line-height: 1.4;
    margin-top: 2px;
}
.ob2-rev-instr-btn {
    display: block;
    margin: 0 auto;
    padding: 11px 26px;
    background: var(--ob2-primary);
    color: #fff;
    border: none;
    border-radius: var(--ob2-radius-pill);
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
    box-shadow: 0 4px 12px rgba(var(--ob2-primary-rgb), 0.3);
}
.ob2-rev-instr-btn.is-disabled {
    background: var(--ob2-line-strong);
    color: var(--ob2-surface);
    box-shadow: none;
    cursor: default;
}

/* -------------------------------------------------------------------------- */
/*  Brief modal — slide-up sheet triggered by the "Vezi" pill                 */
/* -------------------------------------------------------------------------- */
.ob2-modal-bd {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.5);
    z-index: 100;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    border-radius: var(--ob2-frame-radius);
    overflow: hidden;
}
@media (max-width: 575.98px) {
    .ob2-modal-bd { border-radius: 0; }
}
.ob2-modal-bd.is-open { opacity: 1; pointer-events: all; }
/* While brief sheet is open, prevent background scroll/CTA interactions on
   mobile where nested scrollers can otherwise "fight" each other. */
body.ob2-brief-open .ob2-phone > .ob2-screen { overflow: hidden; }
body.ob2-brief-open .ob2-phone > .ob2-bottom-cta { display: none !important; }

.ob2-modal {
    background: var(--ob2-surface);
    width: 100%;
    max-height: 92%;
    border-radius: 24px 24px 0 0;
    display: flex;
    flex-direction: column;
    transform: translateY(100%);
    transition: transform 0.3s ease;
}
.ob2-modal-bd.is-open .ob2-modal { transform: translateY(0); }

.ob2-modal-handle {
    width: 40px;
    height: 4px;
    background: var(--ob2-line-strong);
    border-radius: 2px;
    margin: 10px auto;
    flex-shrink: 0;
}
.ob2-modal-hdr {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 22px 14px;
    border-bottom: 1px solid var(--ob2-line);
    flex-shrink: 0;
}
.ob2-modal-title {
    font-size: 16px;
    font-weight: 700;
    color: var(--ob2-ink);
    letter-spacing: -0.2px;
}
.ob2-modal-close {
    background: none;
    border: none;
    font-size: 24px;
    color: var(--ob2-muted-2);
    cursor: pointer;
    padding: 4px 8px;
    line-height: 1;
}
.ob2-modal-scroll {
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
    padding: 18px 22px 24px;
    flex: 1;
}

/* Cream/teal intro card at the top of the modal. */
.ob2-modal-imp {
    background: var(--ob2-primary-soft);
    border-radius: 12px;
    padding: 12px 14px;
    margin-bottom: 18px;
    font-size: 12px;
    color: var(--ob2-primary-hover);
    line-height: 1.5;
}
.ob2-modal-imp strong {
    display: block;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    margin-bottom: 4px;
}

/* Brief sections (Cum primesc / Ce să facă / Ce să evite / Idei). */
.ob2-brief-sec {
    background: var(--ob2-surface-alt);
    border-radius: 14px;
    padding: 14px;
    margin-bottom: 10px;
}
/* Redemption section is the highlighted "do this now" one. */
.ob2-brief-sec-redemption {
    background: #FFF8E7;
    border: 1px solid #FFE5B4;
}
.ob2-brief-redemption-tip {
    margin-top: 10px;
    padding: 10px 12px;
    background: #fff;
    border-radius: 8px;
    font-size: 11.5px;
    color: var(--ob2-primary);
    line-height: 1.5;
}
.ob2-brief-redemption-tip strong { color: #5C4400; font-weight: 700; }
.ob2-brief-sec-hdr {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 10px;
}
.ob2-brief-sec-name {
    font-size: 13.5px;
    font-weight: 700;
    color: var(--ob2-ink);
    display: flex;
    align-items: center;
    gap: 8px;
}
.ob2-brief-sec-icon { font-size: 16px; }
.ob2-brief-text {
    font-size: 12.5px;
    color: var(--ob2-ink-soft);
    line-height: 1.55;
}
.ob2-brief-list {
    list-style: none;
    padding: 0;
    margin: 0;
}
.ob2-brief-list li {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    padding: 5px 0;
    font-size: 12.5px;
    color: var(--ob2-ink-soft);
    line-height: 1.5;
}
.ob2-brief-chk {
    width: 18px;
    height: 18px;
    border-radius: 5px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    margin-top: 1px;
}
.ob2-brief-chk-g { background: var(--ob2-primary); }
.ob2-brief-chk-r { background: var(--ob2-danger); }
.ob2-brief-bulb { font-size: 14px; flex-shrink: 0; margin-top: 2px; }

/* Edit / Save / Cancel buttons inside brief section headers. */
.ob2-brief-edit-btn {
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
    color: var(--ob2-primary);
    font: inherit;
    font-size: 12px;
    font-weight: 600;
}
.ob2-brief-edit-btn:hover { color: var(--ob2-primary-hover); }
.ob2-brief-edit-btn[hidden] { display: none !important; }
.ob2-brief-edit-cancel { color: var(--ob2-muted); }
.ob2-brief-edit-cancel:hover { color: var(--ob2-ink); }
.ob2-brief-edit-actions {
    display: flex;
    align-items: center;
    gap: 14px;
}
.ob2-brief-edit-actions[hidden] { display: none !important; }
.ob2-brief-textarea {
    width: 100%;
    border: 1px solid var(--ob2-line-strong);
    border-radius: 8px;
    padding: 10px 12px;
    background: var(--ob2-surface);
    font: inherit;
    /* ≥ 16px stops iOS Safari from auto-zooming on input focus. */
    font-size: 16px;
    color: var(--ob2-ink);
    line-height: 1.5;
    resize: vertical;
    min-height: 80px;
    outline: none;
}
.ob2-brief-textarea:focus { border-color: var(--ob2-primary); }
.ob2-brief-edit-hint {
    margin-top: 6px;
    font-size: 11px;
    color: var(--ob2-muted);
}
.ob2-brief-edit[hidden] { display: none !important; }
.ob2-brief-editor-ov {
    z-index: 130;
    background: rgba(15, 23, 42, 0.45);
}
.ob2-brief-editor-sheet {
    padding: 16px 16px 18px;
}
.ob2-brief-editor-h {
    font-size: 30px;
    line-height: 1.15;
    margin-bottom: 8px;
}
.ob2-brief-editor-textarea {
    min-height: 210px;
    margin-top: 2px;
}
.ob2-brief-editor-actions {
    margin-top: 14px;
}

/* Per-row inputs used for list sections (dos / donts / hooks). */
.ob2-brief-edit-list {
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.ob2-brief-edit-row {
    display: flex;
    align-items: center;
    gap: 6px;
}
.ob2-brief-edit-input {
    flex: 1;
    min-width: 0;
    border: 1px solid var(--ob2-line-strong);
    border-radius: 8px;
    padding: 8px 10px;
    background: var(--ob2-surface);
    font: inherit;
    /* ≥ 16px stops iOS Safari from auto-zooming on input focus. */
    font-size: 16px;
    color: var(--ob2-ink);
    line-height: 1.4;
    outline: none;
}
.ob2-brief-edit-input:focus { border-color: var(--ob2-primary); }
.ob2-brief-edit-row-remove {
    flex-shrink: 0;
    width: 28px;
    height: 28px;
    border: none;
    background: transparent;
    color: var(--ob2-muted);
    font-size: 18px;
    line-height: 1;
    cursor: pointer;
    border-radius: 6px;
}
.ob2-brief-edit-row-remove:hover { background: var(--ob2-line); color: var(--ob2-danger); }
.ob2-brief-edit-add {
    margin-top: 8px;
    padding: 8px 10px;
    background: none;
    border: 1.5px dashed var(--ob2-line-strong);
    border-radius: 8px;
    color: var(--ob2-primary);
    font: inherit;
    font-size: 12.5px;
    font-weight: 500;
    cursor: pointer;
    width: 100%;
    text-align: center;
    transition: border-color 0.15s ease, background 0.15s ease;
}
.ob2-brief-edit-add:hover {
    border-color: var(--ob2-primary);
    background: var(--ob2-primary-soft);
}

/* Footer terms under the CTA. */
.ob2-rev-terms {
    margin-top: 8px;
    text-align: center;
    font-size: 11.5px;
    color: var(--ob2-muted-2);
    line-height: 1.45;
}
.ob2-rev-terms a { color: var(--ob2-primary); font-weight: 500; }

/* -------------------------------------------------------------------------- */
/*  Brand profile screen (Mode A edit + Mode B fallback)                      */
/* -------------------------------------------------------------------------- */
.ob2-bp-card {
    background: var(--ob2-surface-alt);
    border: 1px solid var(--ob2-line);
    border-radius: var(--ob2-radius-md);
    padding: 12px 14px;
    margin-bottom: 10px;
}
.ob2-bp-card .ob2-input-label { margin-bottom: 6px; }
.ob2-bp-card .ob2-input {
    background: var(--ob2-surface);
    border-color: var(--ob2-line);
    padding: 12px 14px;
    font-size: 14px;
}
.ob2-bp-socials summary {
    list-style: none;
    cursor: pointer;
    color: var(--ob2-primary);
    font-size: 13px;
    font-weight: 500;
    padding: 8px 0;
}
.ob2-bp-socials summary::-webkit-details-marker { display: none; }
.ob2-bp-socials summary::before {
    content: '+ ';
    color: var(--ob2-primary);
}
.ob2-bp-socials[open] summary::before { content: '− '; }

.ob2-textarea {
    resize: vertical;
    min-height: 64px;
}

.ob2-radio-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
}
.ob2-radio-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 6px;
    padding: 14px 10px;
    background: var(--ob2-surface);
    border: 1.5px solid var(--ob2-line-strong);
    border-radius: var(--ob2-radius-md);
    cursor: pointer;
    transition: border-color 0.2s ease, background 0.2s ease;
}
.ob2-radio-card.is-selected {
    border-color: var(--ob2-primary);
    background: var(--ob2-primary-tint);
}
.ob2-radio-card input { position: absolute; opacity: 0; pointer-events: none; }
.ob2-radio-card-emoji { font-size: 22px; line-height: 1; }
.ob2-radio-card-label {
    font-size: 12.5px;
    font-weight: 600;
    color: var(--ob2-ink);
    line-height: 1.3;
}

.ob2-radio-stack { display: flex; flex-direction: column; gap: 8px; }
.ob2-radio-row {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 16px;
    background: var(--ob2-surface);
    border: 1.5px solid var(--ob2-line-strong);
    border-radius: var(--ob2-radius-md);
    cursor: pointer;
    transition: border-color 0.2s ease, background 0.2s ease;
}
.ob2-radio-row.is-selected {
    border-color: var(--ob2-primary);
    background: var(--ob2-primary-tint);
}
.ob2-radio-row input { position: absolute; opacity: 0; pointer-events: none; }
.ob2-radio-row-label {
    flex: 1;
    font-size: 14px;
    font-weight: 500;
    color: var(--ob2-ink);
    letter-spacing: -0.1px;
}
.ob2-radio-row-radio {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    border: 2px solid var(--ob2-line-strong);
    flex-shrink: 0;
    position: relative;
}
.ob2-radio-row.is-selected .ob2-radio-row-radio {
    background: var(--ob2-primary);
    border-color: var(--ob2-primary);
}
.ob2-radio-row.is-selected .ob2-radio-row-radio::after {
    content: '';
    position: absolute;
    inset: 5px;
    border-radius: 50%;
    background: var(--ob2-surface);
}

/* -------------------------------------------------------------------------- */
/*  Contact screen + OTP overlay                                              */
/* -------------------------------------------------------------------------- */
.ob2-required { color: var(--ob2-danger); font-weight: 700; }
.ob2-optional { color: var(--ob2-muted-2); font-weight: 400; font-size: 11px; margin-left: 4px; }
.ob2-trust-priv {
    display: flex;
    align-items: flex-start;
    gap: 6px;
    margin-top: 18px;
    font-size: 11.5px;
    color: var(--ob2-muted-2);
    line-height: 1.5;
}

.ob2-otp-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.55);
    display: flex;
    align-items: flex-end;
    justify-content: center;
    z-index: 100;
    padding: 16px;
    animation: ob2-fade-in 0.2s ease-out;
}
.ob2-otp-overlay[hidden] { display: none !important; }
@media (min-width: 576px) {
    .ob2-otp-overlay { align-items: center; }
}
/* OTP modal lives inside the contact screen tree; when open, hide the
   background sticky CTA so mobile doesn't show two stacked primary buttons. */
body.ob2-otp-open .ob2-phone > .ob2-bottom-cta { display: none !important; }
@keyframes ob2-fade-in {
    from { opacity: 0; }
    to { opacity: 1; }
}
.ob2-otp-card {
    width: 100%;
    max-width: 360px;
    background: var(--ob2-surface);
    border-radius: 18px;
    padding: 24px;
    position: relative;
    box-shadow: 0 24px 60px rgba(0, 0, 0, 0.3);
    animation: ob2-slide-up 0.25s ease-out;
}
@keyframes ob2-slide-up {
    from { transform: translateY(20px); opacity: 0; }
    to   { transform: translateY(0);    opacity: 1; }
}
.ob2-otp-close {
    position: absolute;
    top: 10px;
    right: 12px;
    background: none;
    border: none;
    font-size: 22px;
    color: var(--ob2-muted-2);
    cursor: pointer;
    padding: 4px 8px;
}
.ob2-otp-icon {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: var(--ob2-primary-soft);
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 14px;
}
.ob2-otp-title {
    font-size: 18px;
    font-weight: 700;
    color: var(--ob2-ink);
    text-align: center;
    margin: 0 0 6px;
    letter-spacing: -0.3px;
}
.ob2-otp-sub {
    font-size: 12.5px;
    color: var(--ob2-muted);
    text-align: center;
    margin: 0 0 18px;
    line-height: 1.5;
}
.ob2-otp-input {
    width: 100%;
    padding: 14px 16px;
    border: 1.5px solid var(--ob2-line-strong);
    border-radius: var(--ob2-radius-md);
    font-size: 22px;
    text-align: center;
    letter-spacing: 0.4em;
    background: var(--ob2-surface);
    color: var(--ob2-ink);
    outline: none;
    margin-bottom: 12px;
    font-family: inherit;
    font-weight: 600;
}
.ob2-otp-input:focus { border-color: var(--ob2-primary); }
.ob2-otp-error {
    color: var(--ob2-danger);
    font-size: 12px;
    text-align: center;
    margin-bottom: 8px;
}
.ob2-otp-resend {
    display: block;
    margin: 12px auto 0;
    text-align: center;
}

/* -------------------------------------------------------------------------- */
/*  Billing screens (RO only — billing_type + billing_details)                */
/* -------------------------------------------------------------------------- */
.ob2-bill-card {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 16px;
    background: var(--ob2-surface);
    border: 1.5px solid var(--ob2-line-strong);
    border-radius: var(--ob2-radius-md);
    margin-bottom: 10px;
    cursor: pointer;
    transition: border-color 0.2s ease, background 0.2s ease;
}
.ob2-bill-card.is-selected {
    border-color: var(--ob2-primary);
    background: var(--ob2-primary-tint);
}
.ob2-bill-card input { position: absolute; opacity: 0; pointer-events: none; }
.ob2-bill-card-content { flex: 1; }
.ob2-bill-card-title {
    font-size: 15px;
    font-weight: 600;
    color: var(--ob2-ink);
    letter-spacing: -0.1px;
    margin-bottom: 4px;
}
.ob2-bill-card-desc {
    font-size: 12.5px;
    color: var(--ob2-muted-2);
    line-height: 1.45;
}
.ob2-bill-radio {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    border: 2px solid var(--ob2-line-strong);
    flex-shrink: 0;
    position: relative;
}
.ob2-bill-card.is-selected .ob2-bill-radio {
    background: var(--ob2-primary);
    border-color: var(--ob2-primary);
}
.ob2-bill-card.is-selected .ob2-bill-radio::after {
    content: '';
    position: absolute;
    inset: 5px;
    border-radius: 50%;
    background: var(--ob2-surface);
}

.ob2-fld { margin-bottom: 12px; }
.ob2-fld-label {
    display: flex;
    align-items: center;
    gap: 3px;
    font-size: 11px;
    font-weight: 600;
    color: #555;
    margin-bottom: 6px;
}
.ob2-fld-label .ob2-required {
    color: #E03131;
    font-weight: 700;
}
.ob2-anaf-hint {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-top: 5px;
    padding: 6px 10px;
    background: #E1F5EE;
    border-radius: 8px;
    font-size: 11px;
    font-weight: 500;
    color: var(--ob2-primary-hover);
    line-height: 1.4;
}
.ob2-anaf-hint[hidden] { display: none !important; }
.ob2-anaf-loading { color: var(--ob2-muted); }
.ob2-anaf-success { color: var(--ob2-primary); font-weight: 600; }
.ob2-anaf-error { color: var(--ob2-danger); }
.ob2-anaf-spinner {
    display: inline-block;
    width: 12px;
    height: 12px;
    border: 1.5px solid var(--ob2-line-strong);
    border-top-color: var(--ob2-primary);
    border-radius: 50%;
    animation: ob2-spin 0.8s linear infinite;
    flex-shrink: 0;
}
@keyframes ob2-spin {
    to { transform: rotate(360deg); }
}

.ob2-help-card {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    background: #FFF6D9;
    border-radius: var(--ob2-radius-md);
    padding: 12px 14px;
    margin-top: 16px;
}
.ob2-help-card-text {
    font-size: 12.5px;
    color: #6E5A1F;
    line-height: 1.4;
}
.ob2-help-card-phone {
    font-size: 13px;
    font-weight: 700;
    color: #7C5A00;
    text-decoration: none;
    white-space: nowrap;
}
.ob2-help-card-phone:hover { color: #5C4400; }

/* -------------------------------------------------------------------------- */
/*  Pricing screen — RO 3-tier grid + US single trial card                    */
/* -------------------------------------------------------------------------- */


.price-h {
    font-size: 26px;
    font-weight: 600;
    color: #111;
    letter-spacing: -0.4px;
    margin: 0 0 4px;
}
.price-sub {
    font-size: 13px;
    color: #475569;
    margin: 0 0 14px;
}
.plan-feat-title {
    font-size: 22px;
    font-weight: 700;
    color: #111;
    letter-spacing: -0.5px;
    margin: 6px 0 14px;
}
.feat-compact {
    margin: 0 0 14px;
    padding: 14px;
    background: #fafafa;
    border-radius: 14px;
}
.plan-tiles {
    display: flex;
    gap: 10px;
    margin-bottom: 6px;
}
.plan-tile {
    flex: 1;
    background: #fff;
    border-radius: 14px;
    padding: 13px 8px;
    text-align: center;
}
.plan-tile .pt-eyebrow {
    font-size: 9.5px;
    font-weight: 700;
    letter-spacing: 0.06em;
    color: #475569;
    display: block;
}
.plan-tile b {
    display: block;
    font-size: 25px;
    font-weight: 800;
    color: #0A9991;
    letter-spacing: -0.5px;
    line-height: 1.1;
    margin-top: 1px;
}
.plan-tile span {
    font-size: 11.5px;
    color: #475569;
}
.feat-row {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 5px 0;
    font-size: 14.5px;
    color: #111;
    line-height: 1.4;
}
.feat-row .check {
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: #0DBFB5;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    margin-top: 1px;
}
.plans-grid {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 8px;
    margin: 6px 0 14px;
    padding-top: 14px;
    position: relative;
}
.plan-tier {
    position: relative;
    background: #fff;
    border: 1.5px solid #eee;
    border-radius: 14px;
    cursor: pointer;
    transition: all 0.2s;
    overflow: visible;
    display: flex;
    flex-direction: column;
    text-align: center;
    font: inherit;
    color: inherit;
    padding: 0;
    appearance: none;
    -webkit-appearance: none;
}
.plan-tier.sel {
    border-color: #0DBFB5;
    box-shadow: 0 0 0 2px #0DBFB5;
}
.plan-tier-top {
    padding: 11px 4px 9px;
    background: #bdbdbd;
    color: #fff;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.05em;
    border-radius: 13px 13px 0 0;
}
.plan-tier#tier-plus .plan-tier-top { background: #0DBFB5; }
.plan-tier#tier-pro .plan-tier-top { background: #9B7EE8; }
.plan-tier-body {
    padding: 14px 4px 12px;
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    border-radius: 0 0 13px 13px;
}
.plan-tier#tier-plus .plan-tier-body { background: #E1F5EE; }
.plan-tier-badge {
    position: absolute;
    top: -9px;
    left: 50%;
    transform: translateX(-50%);
    background: #FFB800;
    color: #fff;
    font-size: 9px;
    font-weight: 700;
    padding: 3px 9px;
    border-radius: 12px;
    letter-spacing: 0.05em;
    white-space: nowrap;
    z-index: 2;
}
.plan-tier-price-main {
    font-size: 16px;
    font-weight: 700;
    color: #111;
    letter-spacing: -0.3px;
    line-height: 1.1;
}
.plan-tier-period {
    font-size: 10px;
    color: #475569;
    margin-top: 4px;
}
.plan-tier-div {
    height: 1px;
    background: #e8e8e8;
    margin: 10px 14px 9px;
}
.plan-tier-creators {
    font-size: 12px;
    font-weight: 600;
    color: #555;
}
.plan-tier#tier-start.sel {
    border-color: #9AA3AE;
    box-shadow: 0 0 0 2px #9AA3AE;
}
.plan-tier#tier-pro.sel {
    border-color: #9B7EE8;
    box-shadow: 0 0 0 2px #9B7EE8;
}
.tva-note {
    background: #FBEEDD;
    border: 1px solid #F3DCC0;
    border-radius: 14px;
    padding: 13px 16px;
    margin-bottom: 12px;
    font-size: 13.5px;
    color: #8A5A12;
    text-align: center;
    font-weight: 700;
    line-height: 1.45;
}

/* Plan-name eyebrow above the feature list (e.g. "START") */
.ob2-tier-eyebrow {
    font-size: 22px;
    font-weight: 800;
    color: var(--ob2-ink);
    letter-spacing: -0.3px;
    margin: 12px 0 10px;
}

/* Feature list panel — soft gray background, sits above the tier grid */
.ob2-tier-features {
    background: var(--ob2-surface-alt);
    border-radius: var(--ob2-radius-md);
    padding: 14px 16px;
    margin-bottom: 16px;
}
.ob2-tier-feat-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.ob2-tier-feat-list li {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    font-size: 13.5px;
    color: var(--ob2-ink);
    line-height: 1.4;
}
.ob2-tier-feat-list[hidden] { display: none; }
.ob2-tier-feat-tagline {
    color: var(--ob2-muted-2);
    font-size: 12.5px;
    /* No check icon spacing for the tagline row */
    padding-left: 28px;
    border-top: 1px solid var(--ob2-line);
    padding-top: 8px;
    margin-top: 4px;
    line-height: 1.4;
}
.ob2-tier-feat-tagline.ob2-tier-feat-tagline {
    /* Re-spec to override flex display from li{} */
    display: block;
}
/* Feature check — plain green icon, no background, per Figma. */
.ob2-tier-check {
    flex-shrink: 0;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: #0DBFB5;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-top: 1px;
}
.ob2-tier-check svg polyline { stroke: #fff; stroke-width: 2; }

/* 3-card tier grid — ticket style with colored header band per tier */
.ob2-tier-grid {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 8px;
    margin-bottom: 14px;
    margin-top: 18px;
}
.ob2-tier-card {
    position: relative;
    padding: 0;
    background: var(--ob2-surface);
    border: 1px solid #BCBCBC;
    border-radius: 14px;
    cursor: pointer;
    transition: transform 0.15s ease, box-shadow 0.15s ease;
    text-align: center;
    font: inherit;
    color: inherit;
    display: flex;
    flex-direction: column;
    overflow: visible;
    min-height: 130px;
}
.ob2-tier-card .ob2-tier-name {
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 0.1em;
    padding: 8px 4px;
    border-top-left-radius: 12px;
    border-top-right-radius: 12px;
    color: #fff;
    background: var(--ob2-muted);
}
.ob2-tier-card .ob2-tier-body {
    padding: 12px 6px 10px;
    flex: 1;
    display: flex;
    flex-direction: column;
    /* Top-anchored so the strike/price/period rows line up across every card;
       the foot is pinned to the bottom via its own margin-top: auto. */
    justify-content: flex-start;
    gap: 2px;
    border-bottom-left-radius: 12px;
    border-bottom-right-radius: 12px;
    background: var(--ob2-surface);
}
.ob2-tier-card:hover { transform: translateY(-1px); }
/* The selected state is shown by the teal ring (box-shadow); suppress the
   browser's default focus outline so clicking a card doesn't double-ring it. */
.ob2-tier-card:focus { outline: none; }
/* Selected: ring of teal hugging the card. box-shadow doesn't take a slot in
   the box model so the inner header/body backgrounds keep their full size. */
.ob2-tier-card.is-selected {
    box-shadow:
        0 0 0 3px var(--ob2-primary),
        0 6px 14px rgba(13, 191, 181, 0.22);
}

/* Per-tier brand colors. Pattern: header band gets the brand color, body
   gets a tinted version when the card isn't selected, full color when it is. */
.ob2-tier-card-start .ob2-tier-name { background: #BCBCBC; }
.ob2-tier-card-plus .ob2-tier-name { background: #0DBFB5; }
.ob2-tier-card-pro .ob2-tier-name { background: #A88BD9; }

/* Figma uses white bodies for all three tiers — only the header band carries
   the per-tier color. The selected ring already provides the visual accent. */

/* Bottom of each tier card: hairline divider + creator count (per Figma). */
.ob2-tier-foot {
    margin-top: auto;
    padding: 6px 8px 4px;
}
.ob2-tier-foot-divider {
    height: 1px;
    background: var(--ob2-line-strong);
    margin: 0 auto 6px;
    width: 80%;
    border-radius: 1px;
}
.ob2-tier-foot-count {
    font-size: 12px;
    color: var(--ob2-ink);
    text-align: center;
    line-height: 1.3;
}

/* Caption shown below the pricing CTA on promo plans. */
.ob2-pricing-caption {
    margin-top: 9px;
    text-align: center;
    font-size: 11.5px;
    color: #888;
    line-height: 1.45;
}
.ob2-pricing-caption[hidden] { display: none !important; }
.ob2-pricing-caption strong {
    color: #111;
    font-weight: 700;
}

/* Cadence picker — two tiles instead of three, monthly = grey/start treatment,
   annual = teal/plus treatment so the savings card is the visual anchor. */
.ob2-tier-grid-cadence { grid-template-columns: 1fr 1fr; margin-top: 12px; }
.ob2-tier-card-monthly .ob2-tier-name { background: #BCBCBC; }
.ob2-tier-card-annual .ob2-tier-name { background: #0DBFB5; }
.ob2-tier-card-annual .ob2-tier-body { background: #E6F7F5; }

/* Selected-plan summary block above the cadence cards. */
.ob2-cadence-summary {
    margin-bottom: 16px;
}
.ob2-cadence-summary-price {
    font-size: 28px;
    font-weight: 700;
    color: var(--ob2-ink);
    letter-spacing: -0.6px;
    line-height: 1.1;
}
.ob2-cadence-summary-meta {
    font-size: 13px;
    color: var(--ob2-muted-2);
    margin-top: 2px;
    margin-bottom: 14px;
}
.ob2-cadence-perks {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.ob2-cadence-perks li {
    position: relative;
    padding-left: 28px;
    font-size: 14px;
    color: var(--ob2-ink);
    line-height: 1.4;
}
.ob2-cadence-perks li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 4px;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: var(--ob2-primary);
    /* Inline-SVG white check. */
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 8' width='10' height='8' fill='none'><polyline points='1,4 4,7 9,1' stroke='white' stroke-width='2'/></svg>");
    background-repeat: no-repeat;
    background-position: center;
}

/* START has a white body, so it'd disappear into the page without an outline.
   PLUS / PRO have tinted bodies that already define their card edges. */
.ob2-tier-card-start { box-shadow: inset 0 0 0 1.5px var(--ob2-line-strong); }
.ob2-tier-card-start.is-selected {
    box-shadow:
        inset 0 0 0 1.5px var(--ob2-line-strong),
        0 0 0 3px var(--ob2-primary),
        0 6px 14px rgba(13, 191, 181, 0.22);
}

.ob2-tier-badge {
    position: absolute;
    top: -14px;
    left: 50%;
    transform: translateX(-50%);
    background: #F0B400;
    color: #fff;
    font-size: 8px;
    font-weight: 800;
    line-height: 1.1;
    padding: 3px 10px;
    border-radius: 20px;
    letter-spacing: 0.06em;
    white-space: nowrap;
    box-shadow: 0 2px 6px rgba(240, 180, 0, 0.35);
    z-index: 2;
}

.ob2-tier-price-strike {
    font-size: 11.5px;
    color: var(--ob2-muted-3);
    text-decoration: line-through;
    min-height: 14px;
}
.ob2-tier-price {
    font-size: 18px;
    font-weight: 800;
    color: var(--ob2-ink);
    letter-spacing: -0.4px;
}
.ob2-tier-period {
    font-size: 11px;
    color: var(--ob2-muted-2);
    margin-top: 1px;
    /* Reserve room for the two-line promo period ("/prima lună" + "apoi
       199 RON/lună") so single-line cards keep their foot at the same height. */
    min-height: 30px;
}
/* QA polish: START card prices need crisp black contrast (the muted greys
   washed out against the white body); PLUS card price gets the brand teal so
   the recommended tier reads loud; the creator-count footer goes bold so it
   carries weight as the "this is what you get" line. */
.ob2-tier-card-start .ob2-tier-price-strike { color: var(--ob2-ink); }
.ob2-tier-card-start .ob2-tier-price { color: var(--ob2-ink); }
.ob2-tier-card-start .ob2-tier-period { color: var(--ob2-ink); }
.ob2-tier-card-plus .ob2-tier-price { color: var(--ob2-primary); }
.ob2-tier-foot-count { font-weight: 700; }

/* VAT pill — cream/yellow, rounded */
.ob2-tier-vat {
    display: block;
    background: #FFF6D9;
    color: #8A6B00;
    font-size: 12px;
    font-weight: 600;
    text-align: center;
    margin: 8px 0 0;
    padding: 10px 14px;
    border-radius: 999px;
    line-height: 1.3;
}

/* RO pricing cadence (mockup parity) */
.ob2-pay-plan-sub {
    font-size: 13.5px;
    color: #64748B;
    font-weight: 700;
    margin-bottom: 14px;
}
.ob2-pay-summary-card {
    border: 1px solid rgba(13, 191, 181, 0.35);
    background: rgba(13, 191, 181, 0.04);
    border-radius: 18px;
    padding: 18px;
    margin-bottom: 18px;
}
.ob2-pay-summary-headline {
    font-size: 14px;
    color: #64748B;
    font-weight: 700;
    padding-bottom: 13px;
    border-bottom: 1px solid rgba(13, 191, 181, 0.18);
}
.ob2-pay-summary-row {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    font-size: 14px;
    color: #475569;
    margin-top: 10px;
}
.ob2-pay-summary-row strong {
    color: var(--ob2-ink);
    white-space: nowrap;
}
.ob2-pay-summary-total {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    margin-top: 13px;
    padding-top: 13px;
    border-top: 1px solid rgba(13, 191, 181, 0.18);
}
.ob2-pay-summary-total #ob2-pay-total-label {
    font-size: 15px;
    color: var(--ob2-ink);
}
.ob2-pay-summary-total #ob2-pay-total-value {
    font-size: 20px;
    color: #0A9991;
    letter-spacing: 0;
    line-height: 1;
    white-space: nowrap;
}
.ob2-pay-checks {
    display: flex;
    flex-direction: column;
    gap: 11px;
    margin-bottom: 18px;
}
.ob2-pay-check {
    display: flex;
    align-items: center;
    gap: 11px;
    font-size: 15px;
    color: var(--ob2-ink);
    font-weight: 500;
}
.ob2-pay-check-icon {
    width: 20px;
    height: 20px;
    flex-shrink: 0;
    border-radius: 50%;
    background: var(--ob2-primary);
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.ob2-pay-opt-grid {
    display: flex;
    gap: 12px;
    margin-bottom: 14px;
}
.ob2-pay-opt {
    flex: 1;
    position: relative;
    background: #fff;
    border: 1.5px solid #eee;
    border-radius: 16px;
    cursor: pointer;
    text-align: center;
    overflow: visible;
    transition: all 0.2s;
    display: flex;
    flex-direction: column;
    appearance: none;
    padding: 0;
    font: inherit;
    color: inherit;
}
.ob2-pay-opt.is-selected {
    border-color: var(--ob2-primary);
    box-shadow: 0 0 0 2px var(--ob2-primary);
}
.ob2-pay-opt-top {
    padding: 12px 4px 10px;
    background: #bdbdbd;
    color: #fff;
    font-size: 14px;
    font-weight: 700;
    letter-spacing: 0.04em;
    border-radius: 14px 14px 0 0;
    text-transform: uppercase;
}
.ob2-pay-opt.is-selected .ob2-pay-opt-top {
    background: var(--ob2-primary);
}
.ob2-pay-opt-body {
    padding: 16px 6px 16px;
}
.ob2-pay-opt.is-selected .ob2-pay-opt-body {
    background: #E1F5EE;
    border-radius: 0 0 14px 14px;
}
.ob2-pay-opt-price {
    font-size: 20px;
    font-weight: 800;
    color: var(--ob2-ink);
    letter-spacing: -0.4px;
    line-height: 1.1;
}
.ob2-pay-opt-sub {
    font-size: 11.5px;
    color: #888;
    margin-top: 4px;
}
.ob2-pay-opt-badge {
    position: absolute;
    top: -10px;
    left: 50%;
    transform: translateX(-50%);
    background: #FFB800;
    color: #fff;
    font-size: 10px;
    font-weight: 700;
    padding: 3px 10px;
    border-radius: 12px;
    white-space: nowrap;
    z-index: 2;
}
.ob2-pay-tip {
    background: #E8F7F3;
    border-radius: 12px;
    padding: 13px 15px;
    font-size: 12.5px;
    color: #0A7D73;
    line-height: 1.5;
    text-align: center;
}

/* US trial card (single, pre-selected) */
.ob2-trial-card {
    border: 2px solid var(--ob2-primary);
    background: var(--ob2-primary-soft);
    border-radius: var(--ob2-radius-lg);
    padding: 20px 18px 18px;
    margin-bottom: 14px;
    position: relative;
}
.ob2-trial-badge {
    position: absolute;
    top: -12px;
    right: 18px;
    background: var(--ob2-primary);
    color: #fff;
    font-size: 10px;
    font-weight: 800;
    padding: 5px 12px;
    border-radius: 20px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}
.ob2-trial-month {
    font-size: 15px;
    font-weight: 700;
    color: var(--ob2-ink);
    letter-spacing: -0.2px;
    margin-bottom: 6px;
}
.ob2-trial-prices {
    display: flex;
    align-items: baseline;
    gap: 10px;
    margin-bottom: 6px;
}
.ob2-trial-strike {
    font-size: 18px;
    color: var(--ob2-muted-3);
    text-decoration: line-through;
}
.ob2-trial-price {
    font-size: 44px;
    font-weight: 800;
    color: var(--ob2-ink);
    letter-spacing: -1.2px;
    line-height: 1;
}
.ob2-trial-savings {
    font-size: 13px;
    font-weight: 600;
    color: var(--ob2-primary);
    margin-bottom: 14px;
}
.ob2-trial-renewal {
    background: var(--ob2-surface);
    border-radius: 12px;
    padding: 12px 14px;
}
.ob2-trial-renewal-label {
    font-size: 10px;
    font-weight: 700;
    color: var(--ob2-muted);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    margin-bottom: 3px;
}
.ob2-trial-renewal-value {
    font-size: 14px;
    color: var(--ob2-ink);
    line-height: 1.35;
}

/* Bullet list — sits as its own gray card below the trial card. */
.ob2-trial-features {
    background: var(--ob2-surface-alt);
    border-radius: var(--ob2-radius-lg);
    padding: 16px 18px;
    margin-bottom: 12px;
}
.ob2-trial-feat-list {
    list-style: none;
    margin: 0;
    padding: 0;
}
.ob2-trial-feat-list li {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 6px 0;
    font-size: 14px;
    line-height: 1.4;
    color: var(--ob2-ink);
}
.ob2-trial-feat-list li strong { font-weight: 700; }
.ob2-trial-feat-check {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: var(--ob2-primary);
    color: #fff;
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-top: 1px;
}
.ob2-trial-feat-text { flex: 1; min-width: 0; }
.ob2-guarantee {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    background: var(--ob2-accent-warm-soft);
    border: 1px solid var(--ob2-accent-warm-border);
    border-radius: 12px;
    padding: 10px 12px;
    margin-bottom: 12px;
    font-size: 12px;
    color: var(--ob2-primary);
    line-height: 1.4;
}
.ob2-guarantee strong { color: #5C4400; font-weight: 600; }

/* -------------------------------------------------------------------------- */
/*  Photo upload screen                                                       */
/* -------------------------------------------------------------------------- */
.ob2-photo-offer-card {
    background: var(--ob2-primary-soft);
    border: 1.5px solid var(--ob2-primary);
    border-radius: var(--ob2-radius-md);
    padding: 12px;
    margin-bottom: 12px;
}
.ob2-photo-offer-label {
    font-size: 10px;
    font-weight: 700;
    color: #94A3B8;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    margin-bottom: 4px;
}
.ob2-photo-offer-value {
    font-size: 18px;
    font-weight: 700;
    color: #111827;
    line-height: 1.3;
    letter-spacing: -0.2px;
}
.ob2-photo-preview-slot {
    position: relative;
    margin-top: 10px;
    width: 100%;
    aspect-ratio: 16 / 9;
    border-radius: 10px;
    overflow: hidden;
    border: 1.5px dashed var(--ob2-line-strong);
    background: var(--ob2-surface);
    display: flex;
    align-items: center;
    justify-content: center;
}
.ob2-photo-preview-slot.has-photo {
    border-style: solid;
    border-color: var(--ob2-line);
    background: var(--ob2-line);
}
.ob2-photo-preview-slot img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.ob2-photo-preview-slot img[hidden] {
    display: none !important;
}
.ob2-photo-preview-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    color: var(--ob2-muted-2);
    font-size: 13px;
    font-weight: 500;
    text-align: center;
}
.ob2-photo-preview-empty svg {
    width: 24px;
    height: 24px;
    color: #94A3B8;
}
.ob2-photo-preview-empty[hidden] { display: none !important; }

.ob2-photo-options {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-bottom: 14px;
}
.ob2-photo-options[hidden] { display: none !important; }
.ob2-photo-opt {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 14px 16px;
    background: var(--ob2-surface);
    border: 1.5px solid var(--ob2-line-strong);
    border-radius: var(--ob2-radius-md);
    cursor: pointer;
    transition: border-color 0.2s ease, background 0.2s ease;
    text-align: left;
    font: inherit;
    color: inherit;
    width: 100%;
}
.ob2-photo-opt:hover:not(.is-disabled) { border-color: var(--ob2-primary); }
.ob2-photo-opt.is-disabled {
    opacity: 0.55;
    cursor: not-allowed;
}
.ob2-photo-icon {
    font-size: 24px;
    line-height: 1;
    flex-shrink: 0;
}
.ob2-photo-info { flex: 1; display: flex; flex-direction: column; gap: 3px; }
.ob2-photo-name {
    font-size: 14px;
    font-weight: 600;
    color: var(--ob2-ink);
    letter-spacing: -0.1px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
}
.ob2-photo-desc {
    font-size: 12px;
    color: var(--ob2-muted-2);
    line-height: 1.4;
}
.ob2-photo-badge {
    background: var(--ob2-primary);
    color: #fff;
    font-size: 9px;
    font-weight: 700;
    padding: 2px 8px;
    border-radius: 10px;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}
#ob2-photo-uploaded[hidden] { display: none !important; }
/* Single full-width 16:9 preview — matches how the campaign card renders in
   the mobile app. The grid still works for multi-photo flows elsewhere. */
.ob2-photo-preview-grid {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-bottom: 12px;
}
.ob2-photo-preview {
    width: 100%;
    aspect-ratio: 16 / 9;
    border-radius: 12px;
    overflow: hidden;
    background: var(--ob2-line);
    border: 1px solid var(--ob2-line);
}
.ob2-photo-preview img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.ob2-photo-error {
    margin-top: 10px;
    padding: 10px 12px;
    background: #FFE9E9;
    border: 1px solid #FFB4B4;
    border-radius: 12px;
    font-size: 12.5px;
    color: var(--ob2-danger);
}
.ob2-photo-error[hidden] { display: none !important; }

/* Greyed-out overlay shown while a photo upload is in flight. */
.ob2-photo-busy {
    position: absolute;
    inset: 0;
    z-index: 8;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 24px;
    text-align: center;
    background: rgba(255, 255, 255, 0.82);
    backdrop-filter: blur(2px);
}
.ob2-photo-busy[hidden] { display: none !important; }
.ob2-photo-busy-spinner {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    border: 3px solid var(--ob2-primary-soft);
    border-top-color: var(--ob2-primary);
    animation: ob2-spin 0.9s linear infinite;
}
.ob2-photo-busy-text {
    font-size: 13px;
    color: var(--ob2-muted);
    font-weight: 500;
}

/* "Schimbă poza" — the primary action when a photo is already set. */
.ob2-photo-change {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    padding: 13px;
    background: var(--ob2-surface);
    border: 1.5px solid var(--ob2-primary);
    border-radius: var(--ob2-radius-pill);
    color: var(--ob2-primary);
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.15s ease;
}
.ob2-photo-change:hover { background: var(--ob2-primary-tint); }
.ob2-photo-change svg { width: 16px; height: 16px; flex-shrink: 0; }

/* "Șterge poza" — quiet secondary; the destructive colour only appears on hover. */
.ob2-photo-remove {
    display: block;
    width: 100%;
    margin-top: 8px;
    padding: 6px;
    background: none;
    border: none;
    color: var(--ob2-muted-2);
    font-size: 12.5px;
    font-weight: 500;
    cursor: pointer;
    text-align: center;
}
.ob2-photo-remove:hover { color: var(--ob2-danger); text-decoration: underline; }

/* -------------------------------------------------------------------------- */
/*  Placeholder (Phase 1 only)                                                */
/* -------------------------------------------------------------------------- */
.ob2-placeholder {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    text-align: center;
}
.ob2-placeholder-eyebrow {
    font-size: 11px;
    font-weight: 700;
    color: var(--ob2-primary);
    letter-spacing: 0.12em;
    text-transform: uppercase;
    margin-bottom: 12px;
}
.ob2-placeholder-title {
    font-size: 28px;
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: -0.6px;
    margin: 0 0 16px;
    color: var(--ob2-ink);
}
.ob2-placeholder-meta {
    font-size: 12px;
    color: var(--ob2-muted);
    margin: 0 0 20px;
    line-height: 1.6;
}
.ob2-placeholder-help {
    font-size: 12.5px;
    color: var(--ob2-muted-2);
    line-height: 1.6;
    margin: 0 auto;
    max-width: 280px;
}

/* -------------------------------------------------------------------------- */
/*  Hero — title block grows + centers; bullets stay anchored below           */
/* -------------------------------------------------------------------------- */
.ob2-scroll-flex {
    position: relative;
    flex: 1;
    display: flex;
    flex-direction: column;
    /* Hero content sits vertically centered in the space between the trust
       strip and the sticky CTA — without this it top-packs and leaves a big
       empty band above the CTA. */
    justify-content: center;
}
/* -------------------------------------------------------------------------- */
/*  Brand profile mint-tinted card + bottom split CTA (Editează | Continuă)   */
/* -------------------------------------------------------------------------- */
.ob2-bp-stack-readonly {
    background: var(--ob2-primary-soft);
    border: 1px solid transparent;
}
/* Read-only: prevent caret/click-through. Edit mode (.is-editing) restores
   normal interaction without changing the mint background. */
.ob2-bp-stack-readonly:not(.is-editing) .ob2-bp-row-input {
    pointer-events: none;
    color: var(--ob2-ink);
    background: transparent !important;
}
.ob2-bp-stack-readonly.is-editing .ob2-bp-row-input {
    color: var(--ob2-ink);
}

/* Split CTA: outline secondary on the left, primary on the right. */
.ob2-cta-split {
    display: flex;
    gap: 10px;
    align-items: stretch;
    width: 100%;
}
.ob2-cta-split .ob2-btn-outline { flex: 0 0 38%; }
.ob2-cta-split .ob2-btn-primary { flex: 1 1 auto; }

.ob2-btn-outline {
    display: inline-block;
    padding: 15px;
    background: var(--ob2-surface);
    color: var(--ob2-muted);
    border: 1.5px solid var(--ob2-line-strong, #ddd);
    border-radius: var(--ob2-radius-pill);
    font-size: 15px;
    font-weight: 600;
    letter-spacing: -0.1px;
    text-align: center;
    cursor: pointer;
    font: inherit;
    font-weight: 600;
    transition: border-color 0.15s ease, color 0.15s ease;
}
.ob2-btn-outline:hover { border-color: var(--ob2-muted); color: var(--ob2-ink); }

/* Text edit affordance in review cards ("Editează"). */
.ob2-rev-edit-icon {
    position: absolute;
    top: 12px;
    right: 12px;
    display: inline-block;
    border: 0;
    background: transparent;
    padding: 0;
    cursor: pointer;
    font-family: inherit;
    font-size: 12.5px;
    font-weight: 600;
    line-height: 1.2;
    color: var(--ob2-primary);
    text-decoration: none;
}
.ob2-rev-edit-icon:hover {
    color: var(--ob2-primary-hover);
    text-decoration: underline;
}

/* Extra bottom breathing room so the last review card (PLATFORME) clears the
   sticky CTA + terms line. */
.ob2-scroll-with-cta-roomy { padding-bottom: 9rem; }

/* Full-screen preloader used while the review brief is generating. Sits over
   the entire screen to gate interaction until the brief finishes. */
.ob2-page-gate {
    position: absolute;
    inset: 0;
    z-index: 50;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 16px;
    padding: 36px 28px;
    text-align: center;
    background: var(--ob2-surface);
}
.ob2-page-gate-spinner {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    border: 3px solid var(--ob2-primary-soft);
    border-top-color: var(--ob2-primary);
    animation: ob2-page-gate-spin 0.9s linear infinite;
}
@keyframes ob2-page-gate-spin { to { transform: rotate(360deg); } }
.ob2-page-gate-title {
    font-size: 16px;
    font-weight: 700;
    color: var(--ob2-ink);
    letter-spacing: -0.2px;
}
.ob2-page-gate-sub {
    font-size: 13px;
    color: var(--ob2-muted-2);
    line-height: 1.5;
    max-width: 260px;
}

/* -------------------------------------------------------------------------- */
/*  Commit screen (sc18) — pre-launch staff-readiness gate                    */
/* -------------------------------------------------------------------------- */
.ob2-commit-intro {
    background: #FFF8E7;
    border: 1px solid #FFE5B4;
    border-radius: var(--ob2-radius-md);
    padding: 14px 16px;
    margin-bottom: 18px;
    font-size: 13px;
    color: var(--ob2-primary);
    line-height: 1.5;
}
.ob2-commit-intro strong { color: #5C4400; display: block; margin-bottom: 4px; }
.ob2-commit-card {
    background: var(--ob2-surface-alt);
    border: 1.5px solid var(--ob2-line);
    border-radius: var(--ob2-radius-md);
    padding: 14px 16px;
    margin-bottom: 10px;
    transition: background 0.2s ease, border-color 0.2s ease;
}
.ob2-commit-card.is-filled { background: var(--ob2-primary-soft); border-color: var(--ob2-primary); }
.ob2-commit-hdr { display: flex; align-items: center; gap: 10px; margin-bottom: 6px; }
.ob2-commit-num {
    width: 24px; height: 24px;
    background: var(--ob2-primary);
    color: var(--ob2-surface);
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-weight: 700; font-size: 12px;
    flex-shrink: 0;
}
.ob2-commit-title { font-size: 14px; font-weight: 700; color: var(--ob2-ink); letter-spacing: -0.1px; line-height: 1.3; }
.ob2-commit-desc { font-size: 12px; color: var(--ob2-muted-2); line-height: 1.5; margin: 0 0 10px 34px; }
.ob2-commit-field {
    margin-left: 34px;
    width: calc(100% - 34px);
    padding: 12px 14px;
    border: 1.5px solid var(--ob2-line);
    border-radius: var(--ob2-radius-sm, 10px);
    background: var(--ob2-surface);
    font: inherit; font-size: 14px;
    color: var(--ob2-ink);
    outline: none;
}
.ob2-commit-field:focus { border-color: var(--ob2-primary); box-shadow: 0 0 0 3px rgba(13,191,181,0.1); }
.ob2-commit-item {
    display: flex; align-items: flex-start; gap: 14px;
    padding: 16px;
    background: var(--ob2-surface-alt);
    border: 1.5px solid var(--ob2-line);
    border-radius: var(--ob2-radius-md);
    margin-bottom: 10px;
    cursor: pointer;
    transition: background 0.2s ease, border-color 0.2s ease;
}
.ob2-commit-item.is-checked { background: var(--ob2-primary-soft); border-color: var(--ob2-primary); }
.ob2-commit-checkbox {
    width: 24px; height: 24px;
    border-radius: 7px;
    border: 2px solid var(--ob2-line-strong);
    flex-shrink: 0;
    display: flex; align-items: center; justify-content: center;
    background: var(--ob2-surface);
    transition: all 0.2s ease;
    margin-top: 1px;
}
.ob2-commit-item.is-checked .ob2-commit-checkbox { background: var(--ob2-primary); border-color: var(--ob2-primary); }
.ob2-commit-check-svg { opacity: 0; transition: opacity 0.2s ease; }
.ob2-commit-item.is-checked .ob2-commit-check-svg { opacity: 1; }
.ob2-commit-text { flex: 1; min-width: 0; }
.ob2-commit-text-title { display: block; font-size: 14px; font-weight: 600; color: var(--ob2-ink); margin-bottom: 3px; line-height: 1.35; }
.ob2-commit-text-desc { display: block; font-size: 12px; color: var(--ob2-muted-2); line-height: 1.5; }
.ob2-commit-tip {
    display: flex;
    align-items: flex-start;
    gap: 6px;
    background: rgba(var(--ob2-primary-rgb), 0.1);
    border-radius: 9px;
    padding: 8px 10px;
    margin-top: 9px;
    font-size: 11px;
    color: #0A7D74;
    line-height: 1.35;
}
.ob2-commit-tip strong { color: #076B63; }

/* Founder support card — item 2 on the commit screen. */
.ob2-commit-founder {
    border: 1.5px solid rgba(var(--ob2-primary-rgb), 0.3);
    background: rgba(var(--ob2-primary-rgb), 0.05);
    border-radius: 12px;
    padding: 11px 12px;
    margin-bottom: 8px;
}
.ob2-commit-founder-head {
    display: flex;
    align-items: center;
    gap: 11px;
    margin-bottom: 9px;
}
.ob2-commit-founder-ic {
    width: 36px;
    height: 36px;
    flex-shrink: 0;
    border-radius: 10px;
    background: var(--ob2-primary);
    display: flex;
    align-items: center;
    justify-content: center;
}
.ob2-commit-founder-body { flex: 1; min-width: 0; }
.ob2-commit-founder-title { font-size: 13px; font-weight: 700; color: var(--ob2-ink); line-height: 1.25; }
.ob2-commit-founder-sub { font-size: 11px; color: var(--ob2-muted-2); margin-top: 1px; }
.ob2-commit-founder-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    background: var(--ob2-surface);
    border: 1px solid var(--ob2-line);
    border-radius: 9px;
    padding: 9px 12px;
}
.ob2-commit-founder-phone {
    font-size: 15px;
    font-weight: 800;
    color: var(--ob2-primary-hover);
    letter-spacing: 0.3px;
    text-decoration: none;
}
.ob2-commit-founder-save {
    background: var(--ob2-primary);
    color: #fff;
    border: none;
    border-radius: 8px;
    padding: 7px 13px;
    font-size: 12px;
    font-weight: 700;
    cursor: pointer;
    white-space: nowrap;
    flex-shrink: 0;
}

/* ============================================================== */
/*  Brand-profile result card — direct port of v1 brand_profile.html
    .brand-result aesthetic. Teal accent strip + corner pencil +
    inline edit + amber-warning refine panel. Same colors as v1.    */
/* ============================================================== */

/* Hide Continue when refine is expanded — Search Again is the only
   primary CTA in that state. Same intent as body.brand-is-not-found in v1. */
body.ob2-refine-expanded .ob2-bottom-cta { display: none !important; }

.brand-result {
    position: relative;
    background: linear-gradient(135deg, #f8fdfb 0%, #ffffff 100%);
    border: 1px solid #e6efed;
    border-radius: 14px;
    padding: 1.25rem 1.25rem 1.1rem;
    margin: 0.5rem 0 1.25rem;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.03);
}
.brand-result::before {
    content: '';
    position: absolute;
    left: 0; top: 1.25rem; bottom: 1.25rem;
    width: 3px;
    background: #2dd4bf;
    border-radius: 0 3px 3px 0;
}

/* Pencil button (top-right of the card) */
.brand-edit-pencil {
    position: absolute;
    top: 0.6rem;
    right: 0.6rem;
    width: 32px;
    height: 32px;
    padding: 0;
    background: rgba(255, 255, 255, 0.85);
    border: 1px solid #e6efed;
    border-radius: 50%;
    color: #6c757d;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: all 0.15s ease;
    cursor: pointer;
    z-index: 1;
}
.brand-edit-pencil:hover { background: #fff; color: #0d9488; border-color: #99f6e4; }
.brand-edit-pencil:focus { outline: none; box-shadow: 0 0 0 2px rgba(45, 212, 191, 0.25); }
.brand-edit-pencil svg { width: 14px; height: 14px; }

/* Edit-mode swap: readonly text hides, inline inputs show, pencil hides. */
.brand-result .brand-editonly { display: none; }
.brand-result.is-editing .brand-readonly { display: none; }
.brand-result.is-editing .brand-editonly { display: block; }
.brand-result.is-editing .brand-edit-actions { display: flex; }
.brand-result.is-editing .brand-edit-pencil { display: none; }

.brand-result-name {
    font-size: 1.4rem;
    font-weight: 700;
    margin: 0 0 0.2rem;
    color: #0f172a;
    letter-spacing: -0.01em;
    padding-right: 40px; /* space for the pencil */
}
.brand-result-meta {
    color: #6c757d;
    font-size: 0.9rem;
    margin-bottom: 0.85rem;
    display: flex;
    align-items: center;
    gap: 0.35rem;
}
.brand-result-meta:empty { display: none; }
.brand-result-desc {
    color: #475569;
    margin: 0 0 0.85rem;
    line-height: 1.5;
    font-size: 0.95rem;
}
.brand-result-links {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
}
.brand-result-links:empty { display: none; }
.brand-result-pill {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.3rem 0.7rem;
    border-radius: 999px;
    background: #ffffff;
    border: 1px solid #e6efed;
    font-size: 0.825rem;
    color: #475569;
    text-decoration: none;
    transition: all 0.12s ease;
    word-break: break-all;
}
.brand-result-pill svg { width: 13px; height: 13px; flex-shrink: 0; }
a.brand-result-pill:hover { background: #f0fdfa; border-color: #99f6e4; color: #0f172a; }
.brand-result-pill svg { color: #0ea5e9; }
.brand-result-pill.brand-pill-instagram svg { color: #e1306c; }
.brand-result-pill.brand-pill-tiktok svg { color: #000000; }
.brand-result-pill.brand-pill-facebook svg { color: #1877f2; }

/* Confirm-result variant (RO/US): match the v2 flow reference card style. */
.ob2-conf-title {
    font-size: 26px;
    font-weight: 600;
    line-height: 1.25;
    letter-spacing: -0.5px;
    margin-bottom: 8px;
}
.ob2-conf-card {
    background: rgba(13, 191, 181, 0.04);
    border: 1px solid rgba(13, 191, 181, 0.25);
    border-radius: 18px;
    padding: 18px;
    margin-top: 6px;
    box-shadow: none;
}
.ob2-conf-card::before { display: none; }
.ob2-conf-card .brand-result-name {
    font-size: 24px;
    font-weight: 800;
    letter-spacing: -0.4px;
    margin-bottom: 3px;
    padding-right: 0;
}
.ob2-conf-card .brand-result-meta {
    font-size: 13px;
    color: #999;
    margin-bottom: 12px;
}
.ob2-conf-card .brand-result-desc {
    font-size: 13.5px;
    color: #1e293b;
    line-height: 1.55;
    margin-bottom: 12px;
}
.ob2-conf-card .brand-result-links {
    margin-top: 11px;
    padding-top: 11px;
    border-top: 1px dashed rgba(13, 191, 181, 0.2);
}
.ob2-conf-card .brand-result-pill {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 0;
    border: none;
    background: transparent;
    border-radius: 0;
    font-size: 12.5px;
    color: #999;
    word-break: break-word;
}
.ob2-conf-card .brand-result-pill svg {
    width: 13px;
    height: 13px;
    color: #0dbfb5 !important;
}
.ob2-conf-card a.brand-result-pill:hover {
    background: transparent;
    border-color: transparent;
    color: #64748b;
}

/* Inline-edit inputs — match the rendered text typography 1:1 so flipping
   into edit mode doesn't reflow the layout. */
.brand-edit-name-input {
    font-size: 1.4rem;
    font-weight: 700;
    color: #0f172a;
    letter-spacing: -0.01em;
    padding: 0.35rem 0.6rem;
    margin-bottom: 0.5rem;
    border: 1px solid #cbd5e1;
    border-radius: 8px;
    width: 100%;
    background: #fff;
}
.brand-edit-name-input:focus {
    outline: none;
    border-color: #2dd4bf;
    box-shadow: 0 0 0 3px rgba(45, 212, 191, 0.15);
}
.brand-edit-desc-input {
    font-size: 0.95rem;
    color: #475569;
    line-height: 1.5;
    padding: 0.5rem 0.6rem;
    margin-bottom: 0.65rem;
    border: 1px solid #cbd5e1;
    border-radius: 8px;
    width: 100%;
    background: #fff;
    resize: vertical;
    font-family: inherit;
}
.brand-edit-desc-input:focus {
    outline: none;
    border-color: #2dd4bf;
    box-shadow: 0 0 0 3px rgba(45, 212, 191, 0.15);
}
.brand-edit-actions {
    display: none;
    gap: 0.5rem;
    justify-content: flex-end;
    margin-top: 0.5rem;
}
.brand-edit-actions .ob2-btn-ghost,
.brand-edit-actions .ob2-btn-primary-sm {
    height: auto;
    padding: 0.45rem 0.95rem;
    font-size: 0.875rem;
    font-weight: 600;
    border-radius: 8px;
    cursor: pointer;
    border: 1px solid transparent;
    transition: all 0.12s ease;
}
.brand-edit-actions .ob2-btn-ghost {
    background: #f1f5f9;
    color: #475569;
}
.brand-edit-actions .ob2-btn-ghost:hover { background: #e2e8f0; }
.brand-edit-actions .ob2-btn-primary-sm {
    background: #2dd4bf;
    color: #fff;
}
.brand-edit-actions .ob2-btn-primary-sm:hover { background: #14b8a6; }

/* ---------- Refine panel — amber warning treatment ---------- */

.ob2-bp-refine {
    margin-top: 0.25rem;
}
.ob2-bp-refine-toggle {
    width: 100%;
    text-align: left;
    padding: 0.7rem 1rem;
    background: #fffbeb;
    border: 1px dashed #fcd34d;
    border-radius: 12px;
    color: #92400e;
    font-size: 0.9rem;
    font-weight: 500;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    transition: all 0.15s ease;
    cursor: pointer;
    font-family: inherit;
}
.ob2-bp-refine-toggle:hover {
    background: #fef3c7;
    color: #78350f;
    border-color: #f59e0b;
}
.ob2-bp-refine-toggle:focus { outline: none; box-shadow: 0 0 0 2px rgba(245,158,11,.2); }
.ob2-bp-refine-warning { width: 16px; height: 16px; color: #f59e0b; flex-shrink: 0; }
.ob2-bp-refine-label { flex: 1; }
.ob2-bp-refine-chev {
    width: 12px; height: 12px;
    transition: transform 0.2s ease;
    margin-left: auto;
    opacity: 0.7;
    flex-shrink: 0;
}
.ob2-bp-refine-toggle[aria-expanded="true"] .ob2-bp-refine-chev { transform: rotate(90deg); }
.ob2-bp-refine-toggle[aria-expanded="true"] {
    border-radius: 12px 12px 0 0;
    border-bottom-style: solid;
    border-bottom-color: transparent;
}
.ob2-bp-refine-panel {
    border: 1px dashed #fcd34d;
    border-top: none;
    border-radius: 0 0 12px 12px;
    padding: 0.85rem 1rem;
    background: #fffbeb;
}
.ob2-bp-refine-sub {
    color: #6c757d;
    font-size: 0.825rem;
    margin: 0 0 0.75rem;
}
.ob2-bp-refine-panel .ob2-input {
    border-color: #d6dde2;
    background: #fff;
}
.ob2-bp-refine-panel .ob2-input:focus {
    border-color: #2dd4bf;
    box-shadow: 0 0 0 3px rgba(45, 212, 191, 0.15);
}
.ob2-bp-refine-badge {
    display: inline-block;
    font-size: 0.7rem;
    font-weight: 600;
    color: #0d9488;
    background: #ccfbf1;
    border-radius: 4px;
    padding: 0.1rem 0.45rem;
    margin-left: 0.4rem;
    vertical-align: middle;
}

.ob2-bp-search-again-cta {
    margin-top: 14px;
    width: 100%;
    background: #2dd4bf;
    color: #ffffff;
    border: none;
    padding: 0.65rem 1.25rem;
    border-radius: 999px;
    font-weight: 600;
    font-size: 0.95rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    transition: all 0.15s ease;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.05);
    cursor: pointer;
    font-family: inherit;
}
.ob2-bp-search-again-cta:hover:not(:disabled) {
    background: #14b8a6;
    transform: translateY(-1px);
    box-shadow: 0 4px 10px rgba(20, 184, 166, 0.25);
}
.ob2-bp-search-again-cta:active:not(:disabled) { transform: translateY(0); box-shadow: 0 1px 2px rgba(15, 23, 42, 0.05); }
.ob2-bp-search-again-cta:disabled { opacity: 0.6; cursor: not-allowed; }
.ob2-bp-search-again-cta svg { width: 16px; height: 16px; }
.ob2-bp-search-again-spinner svg { animation: ob2-spin 0.9s linear infinite; }
@keyframes ob2-spin { from { transform: rotate(0); } to { transform: rotate(360deg); } }

.ob2-bp-refine-error {
    margin-top: 10px;
    padding: 10px 12px;
    background: #fef2f2;
    border: 1px solid #fecaca;
    border-radius: 8px;
    color: #991b1b;
    font-size: 13px;
}

/* `display: flex` on .ob2-bp-stack overrides the global [hidden] rule;
   reassert it explicitly so the edit stack stays hidden until the user
   taps "Edit". (Legacy — stack is unused now but kept for back-compat
   with any other v2 templates that still reference it.) */
.ob2-bp-stack[hidden] { display: none; }

/* -------------------------------------------------------------------------- */
/*  Search again — trigger card + dedicated overlay screen                    */
/* -------------------------------------------------------------------------- */
.ob2-conf-divider { display: flex; align-items: center; gap: 10px; margin: 20px 0 12px; }
.ob2-conf-divider-line { flex: 1; height: 1px; background: #eee; }
.ob2-conf-divider-label { font-size: 12px; color: #888; font-weight: 600; }

.ob2-conf-research {
    display: flex;
    align-items: center;
    gap: 13px;
    width: 100%;
    padding: 14px;
    background: #fff;
    border: 1.5px dashed #ccc;
    border-radius: 14px;
    cursor: pointer;
    text-align: left;
    font-family: inherit;
    transition: all 0.15s;
}
.ob2-conf-research:hover { border-color: #0dbfb5; background: rgba(13, 191, 181, 0.03); }
.ob2-conf-research-ic {
    width: 38px;
    height: 38px;
    flex-shrink: 0;
    border-radius: 10px;
    background: rgba(13, 191, 181, 0.1);
    color: #0dbfb5;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 17px;
}
.ob2-conf-research-ic svg { display: block; }
.ob2-conf-research-body { flex: 1; min-width: 0; }
.ob2-conf-research-t { display: block; font-size: 14px; font-weight: 700; color: var(--ob2-ink); }
.ob2-conf-research-s { display: block; font-size: 12px; color: #888; margin-top: 1px; }
.ob2-conf-research-arr { color: #0dbfb5; font-size: 18px; font-weight: 700; }

.ob2-search-screen {
    position: absolute;
    inset: 0;
    z-index: 60;
    background: var(--ob2-surface);
    display: flex;
    flex-direction: column;
    transform: translateX(100%);
    /* visibility:hidden makes the closed overlay's inputs non-focusable so a
       stray autofocus (Samsung Internet ignores focus({preventScroll})) can't
       scroll it into view. Delayed on close so the slide-out stays visible. */
    visibility: hidden;
    transition: transform 0.28s cubic-bezier(0.16, 0.84, 0.44, 1), visibility 0s linear 0.28s;
}
.ob2-search-screen.is-open {
    transform: translateX(0);
    visibility: visible;
    transition: transform 0.28s cubic-bezier(0.16, 0.84, 0.44, 1);
}
.ob2-search-screen .ob2-topbar {
    position: relative;
    justify-content: center;
    padding: 8px 18px 10px;
}
.ob2-search-screen .ob2-back {
    position: absolute;
    left: 18px;
    top: 50%;
    transform: translateY(-50%);
}
.ob2-search-screen .ob2-topbar-title {
    font-size: 15px;
    font-weight: 700;
    color: #111;
}
.ob2-search-screen .ob2-topbar-spacer { display: none; }
.ob2-search-screen .ob2-prog { margin: 0 18px 8px; }
/* Loading screen sits above the search overlay's own sticky CTA (z-index 10). */
.ob2-search-scan { z-index: 20; }
/* iOS Safari leaks the main bottom-cta through the transformed overlay's
   stacking context, so we explicitly hide it while the overlay is open. */
body.ob2-search-open .ob2-phone > .ob2-bottom-cta { display: none; }
/* `.ob2-bp-scan { display: flex }` outranks the UA `[hidden]` rule — restore
   it so the search loading screen stays hidden until discovery re-runs. */
.ob2-bp-scan[hidden] { display: none; }

.ob2-sa-intro { text-align: center; padding: 4px 0 14px; }
.ob2-sa-icon {
    width: 48px;
    height: 48px;
    border-radius: 14px;
    background: rgba(13, 191, 181, 0.1);
    color: #0dbfb5;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
    margin-bottom: 8px;
}
.ob2-sa-icon svg { display: block; }
.ob2-sa-title {
    font-size: 21px;
    font-weight: 800;
    color: #111;
    letter-spacing: -0.4px;
    line-height: 1.2;
    margin-bottom: 4px;
}
.ob2-sa-sub {
    font-size: 13px;
    color: #1e293b;
    line-height: 1.45;
    max-width: 270px;
    margin: 0 auto;
}
.ob2-sa-field { margin-bottom: 12px; }
.ob2-sa-flabel-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-bottom: 6px;
}
.ob2-sa-flabel {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    font-weight: 700;
    color: #111;
}
.ob2-sa-ic {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 13px;
    height: 13px;
    color: #6b7280;
}
.ob2-sa-ic svg { display: block; }
.ob2-sa-opt {
    font-size: 9.5px;
    font-weight: 700;
    color: #aaa;
    background: #f1f1f1;
    padding: 2px 7px;
    border-radius: 999px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}
.ob2-sa-help { font-size: 11.5px; color: #888; margin-top: 5px; line-height: 1.35; }
.ob2-sa-help.tip {
    display: flex;
    align-items: center;
    gap: 6px;
    color: #0a9991;
    font-weight: 600;
}
.ob2-sa-tip-ic {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 13px;
    height: 13px;
    color: #0a9991;
}
.ob2-sa-tip-ic svg { display: block; }
.ob2-sa-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
}
.ob2-sa-btn-ic {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 16px;
    height: 16px;
}
.ob2-sa-btn-ic svg { display: block; }
.ob2-sa-cta-helper { text-align: center; font-size: 11px; color: #aaa; margin-top: 8px; }

/* -------------------------------------------------------------------------- */
/*  Offer screen — "how it works" card + price-explainer sheet                */
/* -------------------------------------------------------------------------- */
.ob2-hiw-card {
    border: 1px solid var(--ob2-line);
    border-radius: 14px;
    padding: 12px 14px;
    margin-bottom: 16px;
}
.ob2-hiw-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 9px;
    padding-bottom: 9px;
    border-bottom: 1px dashed var(--ob2-line);
}
.ob2-hiw-label {
    font-size: 10.5px;
    font-weight: 700;
    color: var(--ob2-muted);
    letter-spacing: 0.08em;
    text-transform: uppercase;
}
.ob2-hiw-auto {
    font-size: 10.5px;
    font-weight: 700;
    color: #fff;
    background: var(--ob2-primary);
    padding: 3px 9px;
    border-radius: 999px;
    letter-spacing: 0.02em;
}
.ob2-hiw-row { display: flex; align-items: center; gap: 10px; padding: 5px 0; }
.ob2-hiw-rk {
    font-size: 10.5px;
    font-weight: 700;
    color: var(--ob2-muted-2);
    letter-spacing: 0.06em;
    text-transform: uppercase;
    white-space: nowrap;
}
.ob2-hiw-dots {
    flex: 1;
    border-bottom: 1px dotted var(--ob2-line-strong);
    margin: 0 2px;
    position: relative;
    top: -3px;
}
.ob2-hiw-rv { font-size: 13.5px; font-weight: 700; color: var(--ob2-ink); white-space: nowrap; }
.ob2-hiw-g { color: var(--ob2-primary-hover); }
.ob2-hiw-foot {
    font-size: 11.5px;
    color: var(--ob2-muted);
    text-align: center;
    margin-top: 9px;
    padding-top: 9px;
    border-top: 1px solid var(--ob2-line);
    line-height: 1.45;
}
.ob2-hiw-foot strong { color: var(--ob2-primary-hover); }

/* RO offer selector (mockup parity) */
.ob2-offer-opt {
    width: 100%;
    position: relative;
    border: 1.5px solid #eee;
    border-radius: 16px;
    padding: 16px;
    margin-bottom: 12px;
    cursor: pointer;
    background: #fafafa;
    transition: all .2s;
    appearance: none;
    text-align: left;
    font: inherit;
    color: inherit;
}
.ob2-offer-opt.is-selected {
    border-color: var(--ob2-primary);
    background: #fff;
    box-shadow: 0 0 0 2px var(--ob2-primary);
}
.ob2-offer-head {
    display: flex;
    align-items: flex-start;
    gap: 12px;
}
.ob2-offer-radio {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    border: 2px solid #ccc;
    flex-shrink: 0;
    margin-top: 2px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.ob2-offer-opt.is-selected .ob2-offer-radio {
    border-color: var(--ob2-primary);
}
.ob2-offer-radio-dot {
    width: 11px;
    height: 11px;
    border-radius: 50%;
    background: var(--ob2-primary);
    opacity: 0;
    transition: .15s;
}
.ob2-offer-opt.is-selected .ob2-offer-radio-dot {
    opacity: 1;
}
.ob2-offer-title {
    display: block;
    font-size: 16px;
    font-weight: 700;
    color: var(--ob2-ink);
    line-height: 1.3;
}
.ob2-offer-sub {
    display: block;
    font-size: 13px;
    font-weight: 600;
    color: #888;
    margin-top: 2px;
}

/* RO offer page typography matches mockup density so the full card stack
   fits in one viewport without the CTA being visually crowded. */
.ob2-offer-screen-ro .ob2-question-h1 {
    font-size: 26px;
    font-weight: 600;
    letter-spacing: -0.4px;
    margin-bottom: 5px;
}
.ob2-offer-screen-ro .ob2-question-sub {
    font-size: 13px;
    margin-bottom: 14px;
    line-height: 1.5;
}
.ob2-offer-screen-ro .ob2-input-label {
    font-size: 10px;
    color: #475569;
}
.ob2-offer-badge {
    position: absolute;
    top: -10px;
    right: 16px;
    background: var(--ob2-primary);
    color: #fff;
    font-size: 10px;
    font-weight: 700;
    padding: 3px 10px;
    border-radius: 12px;
    letter-spacing: 0.04em;
}
.ob2-offer-expl {
    display: block;
    font-size: 13.5px;
    color: #475569;
    line-height: 1.55;
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px solid #E7EBEE;
}
.ob2-offer-expl strong {
    color: var(--ob2-ink);
    font-weight: 700;
}
.ob2-offer-pick {
    display: block;
    font-size: 13.5px;
    font-weight: 700;
    color: #0A9991;
    margin-top: 12px;
}

.ob2-pl-row { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.ob2-pl-info {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: rgba(var(--ob2-primary-rgb), 0.12);
    color: var(--ob2-primary-hover);
    border: none;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    font-weight: 700;
    font-style: italic;
    font-family: Georgia, 'Times New Roman', serif;
    cursor: pointer;
    flex-shrink: 0;
}
.ob2-seemore {
    color: var(--ob2-primary-hover);
    font-weight: 700;
    text-decoration: underline;
    cursor: pointer;
    white-space: nowrap;
}

/* Bottom sheet — slides up within the step card. */
.ob2-sheet-ov {
    position: absolute;
    inset: 0;
    z-index: 70;
    background: rgba(0, 0, 0, 0.4);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.25s ease;
    display: flex;
    align-items: flex-end;
}
.ob2-sheet-ov.is-open { opacity: 1; pointer-events: auto; }
.ob2-sheet {
    background: var(--ob2-surface);
    width: 100%;
    border-radius: 24px 24px 0 0;
    padding: 20px 20px 24px;
    transform: translateY(100%);
    transition: transform 0.3s cubic-bezier(0.16, 0.84, 0.44, 1);
    max-height: 88%;
    overflow-y: auto;
}
.ob2-sheet-ov.is-open .ob2-sheet { transform: translateY(0); }

/* Review social editor must behave like a real modal over the whole phone, not
   be clipped by `.ob2-screen` scroll area (which caused the launch CTA to show
   through and overlap the sheet actions). */
#ob2-review-social-sheet {
    position: fixed;
    inset: 0;
    z-index: 120;
}
body.ob2-social-sheet-open .ob2-phone > .ob2-screen { overflow: hidden; }
body.ob2-social-sheet-open .ob2-phone > .ob2-bottom-cta { display: none !important; }
.ob2-review-social-actions {
    margin-top: 16px;
    padding-bottom: calc(env(safe-area-inset-bottom, 0px) + 2px);
}

/* Desktop — a bottom sheet looks out of place on the tall card column, so it
   becomes a centred dialog: rounded all round, capped width, scale-in. */
@media (min-width: 900px) {
    .ob2-sheet-ov { align-items: center; justify-content: center; padding: 28px; }
    .ob2-sheet {
        width: 100%;
        max-width: 400px;
        max-height: calc(100% - 56px);
        border-radius: var(--ob2-radius-lg);
        padding: 22px;
        transform: scale(0.96);
    }
    .ob2-sheet-ov.is-open .ob2-sheet { transform: scale(1); }
    .ob2-sheet-grab { display: none; }
}

.ob2-sheet-grab {
    width: 40px;
    height: 4px;
    background: var(--ob2-line-strong);
    border-radius: 2px;
    margin: 0 auto 16px;
}
.ob2-sheet-h {
    font-size: 22px;
    font-weight: 800;
    color: var(--ob2-ink);
    letter-spacing: -0.4px;
    margin-bottom: 8px;
}
.ob2-sheet-sub {
    font-size: 13.5px;
    color: var(--ob2-muted);
    line-height: 1.5;
    margin-bottom: 18px;
}
.ob2-sheet-glabel {
    font-size: 11px;
    font-weight: 700;
    color: var(--ob2-muted-2);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    margin-bottom: 10px;
}
/* Price-guide rows — `ob2-pg-*` (not `ob2-tier-*`, which the pricing screen
   already owns). */
.ob2-pg-row {
    display: flex;
    align-items: center;
    gap: 12px;
    border: 1px solid var(--ob2-line);
    border-radius: 14px;
    padding: 14px;
    margin-bottom: 8px;
}
.ob2-pg-bar { width: 4px; align-self: stretch; border-radius: 3px; flex-shrink: 0; }
.ob2-pg-bar-1 { background: var(--ob2-accent-warm); }
.ob2-pg-bar-2 { background: var(--ob2-primary); }
.ob2-pg-bar-3 { background: #6366F1; }
.ob2-pg-body { flex: 1; min-width: 0; }
.ob2-pg-price { font-size: 15px; font-weight: 800; color: var(--ob2-ink); margin-bottom: 2px; }
.ob2-pg-desc { font-size: 12.5px; color: var(--ob2-muted-2); line-height: 1.4; }
.ob2-pg-right { text-align: right; flex-shrink: 0; }
.ob2-pg-num { font-size: 22px; font-weight: 800; color: var(--ob2-ink); line-height: 1; }
.ob2-pg-unit {
    font-size: 9.5px;
    font-weight: 700;
    color: var(--ob2-muted-3);
    letter-spacing: 0.05em;
    text-transform: uppercase;
    margin-top: 3px;
}
.ob2-sheet-tip {
    background: #FEF6E0;
    border-radius: 14px;
    padding: 14px;
    font-size: 12.5px;
    color: #8A6D1A;
    line-height: 1.55;
    margin-top: 8px;
}
.ob2-sheet-tip strong { color: #6B5310; }

/* -------------------------------------------------------------------------- */
/*  Live screen — announce-your-team card                                     */
/* -------------------------------------------------------------------------- */
.ob2-ann-card {
    border: 1px solid var(--ob2-line);
    border-radius: 16px;
    padding: 16px;
    margin-bottom: 14px;
    text-align: left;
}
.ob2-ann-alert {
    display: flex;
    align-items: center;
    gap: 7px;
    background: var(--ob2-accent-warm-soft);
    border-radius: 10px;
    padding: 9px 12px;
    font-size: 12px;
    font-weight: 700;
    color: #9A6B00;
    margin-bottom: 14px;
}
.ob2-ann-alert-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #F59E0B;
    flex-shrink: 0;
}
.ob2-ann-title {
    font-size: 17px;
    font-weight: 800;
    color: var(--ob2-ink);
    letter-spacing: -0.3px;
    margin-bottom: 4px;
}
.ob2-ann-sub {
    font-size: 12.5px;
    color: var(--ob2-muted);
    line-height: 1.45;
    margin-bottom: 12px;
}
.ob2-msg-preview {
    background: #ECE5DD;
    border-radius: 12px;
    padding: 12px;
    margin-bottom: 14px;
}
.ob2-msg-plabel {
    font-size: 9.5px;
    font-weight: 700;
    color: var(--ob2-muted-3);
    letter-spacing: 0.06em;
    text-transform: uppercase;
    margin-bottom: 8px;
}
.ob2-msg-bubble {
    background: #DCF8C6;
    border-radius: 10px 10px 10px 2px;
    padding: 11px 13px;
    font-size: 12.5px;
    color: #222;
    line-height: 1.5;
    white-space: pre-line;
    text-align: left;
}
.ob2-msg-time {
    font-size: 9.5px;
    color: #7A9B6E;
    text-align: right;
    margin-top: 4px;
}
.ob2-btn-wa,
.ob2-btn-sms {
    width: 100%;
    border-radius: 12px;
    font-weight: 700;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}
.ob2-btn-wa {
    padding: 14px;
    background: #0DBFB5;
    color: #fff;
    border: none;
    font-size: 14.5px;
    margin-bottom: 8px;
}
.ob2-btn-sms {
    padding: 13px;
    background: var(--ob2-surface);
    color: var(--ob2-ink);
    border: 1.5px solid var(--ob2-line-strong);
    font-size: 14px;
    font-weight: 600;
    margin-bottom: 10px;
}
.ob2-btn-copy {
    width: 100%;
    text-align: center;
    background: none;
    border: none;
    color: var(--ob2-primary-hover);
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    text-decoration: underline;
    padding: 4px;
}
.ob2-live-download { width: 100%; }
.ob2-live-sheet-actions {
    display: flex;
    gap: 10px;
    margin-top: 16px;
}
.ob2-live-sheet-actions > button { flex: 1; width: auto; }

/* -------------------------------------------------------------------------- */
/*  Live screen — one-shot confetti                                           */
/* -------------------------------------------------------------------------- */
.ob2-confetti {
    position: absolute;
    inset: 0;
    overflow: hidden;
    pointer-events: none;
    z-index: 3;
}
.ob2-confetti-piece {
    position: absolute;
    top: -24px;
    width: 8px;
    height: 11px;
    border-radius: 2px;
    opacity: 0;
    animation-name: ob2-confetti-fall;
    animation-timing-function: ease-in;
    animation-iteration-count: 1;
    animation-fill-mode: forwards;
}
.ob2-confetti-piece:nth-child(5n+1) { background: var(--ob2-primary); }
.ob2-confetti-piece:nth-child(5n+2) { background: var(--ob2-accent-warm); }
.ob2-confetti-piece:nth-child(5n+3) { background: #FF6B6B; }
.ob2-confetti-piece:nth-child(5n+4) { background: #6366F1; }
.ob2-confetti-piece:nth-child(5n+5) { background: #fff; box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.05); }
.ob2-confetti-piece:nth-child(even) { width: 7px; height: 7px; border-radius: 50%; }
@keyframes ob2-confetti-fall {
    0%   { transform: translateY(0) rotate(0deg); opacity: 1; }
    80%  { opacity: 1; }
    100% { transform: translateY(700px) rotate(560deg); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
    .ob2-confetti { display: none; }
}

/* -------------------------------------------------------------------------- */
/*  Live screen — numbered 2-step layout (download primary, announce team)    */
/* -------------------------------------------------------------------------- */
/* Urgency banner tied to step 1 (download). */
.ob2-live-urgent {
    display: flex;
    align-items: center;
    gap: 8px;
    background: #FFF7E6;
    border: 1px solid #FCE4B3;
    color: #B45309;
    font-size: 12px;
    font-weight: 700;
    padding: 10px 13px;
    border-radius: 12px;
    margin-bottom: 14px;
    line-height: 1.35;
    flex-shrink: 0;
    text-align: left;
}

/* RO live warning must match docs/barter/flow.html commit-intro exactly. */
.ob2-live-urgent-ro {
    background: #FFF8E7;
    border: 1px solid #FFE5B4;
    color: var(--ob2-primary);
    font-size: 11.5px;
    padding: 10px 12px;
    margin: 4px 0 12px;
    line-height: 1.4;
    text-align: center;
    justify-content: center;
}
.ob2-live-urgent.ob2-live-urgent-ro strong {
    color: #5C4400;
    display: block;
    margin-bottom: 4px;
    font-size: 12px;
}
.ob2-live-urgent strong {
    color: #8A5200;
}
.ob2-live-urgent-pulse {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #B45309;
    flex-shrink: 0;
    box-shadow: 0 0 0 0 rgba(180, 83, 9, 0.5);
    animation: ob2-urgent-pulse 1.8s infinite;
}
@keyframes ob2-urgent-pulse {
    0%   { box-shadow: 0 0 0 0 rgba(180, 83, 9, 0.5); }
    70%  { box-shadow: 0 0 0 10px rgba(180, 83, 9, 0); }
    100% { box-shadow: 0 0 0 0 rgba(180, 83, 9, 0); }
}

/* Numbered "do this" steps — step 1 (primary) gets the teal ring; step 2 the
   muted treatment. Each is a self-contained card so the user reads them as
   distinct actions rather than one wall of content. */
.ob2-lstep {
    background: var(--ob2-surface);
    border: 1px solid var(--ob2-line);
    border-radius: 16px;
    padding: 16px;
    margin-bottom: 14px;
    flex-shrink: 0;
    text-align: left;
}
.ob2-lstep-primary {
    border: 2px solid var(--ob2-primary);
    box-shadow: 0 8px 24px rgba(13, 191, 181, 0.14);
}
.ob2-lstep-h {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 2px;
}
.ob2-lstep-num {
    width: 24px;
    height: 24px;
    flex-shrink: 0;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    font-weight: 800;
    color: #fff;
}
.ob2-lstep-num-t { background: var(--ob2-primary); }
.ob2-lstep-num-g { background: #94A3B8; }
.ob2-lstep-h h2 {
    margin: 0;
    font-size: 16px;
    font-weight: 800;
    color: var(--ob2-ink);
    letter-spacing: -0.3px;
}
.ob2-lstep-why {
    font-size: 13px;
    color: var(--ob2-muted);
    line-height: 1.45;
    margin: 6px 0 0 34px;
}
.ob2-lstep-why b { color: var(--ob2-ink); font-weight: 700; }
/* Store buttons inside step 1 sit under the "why" line, indented to align
   with it (matches the 34px left-margin of .ob2-lstep-why). */
.ob2-lstep .ob2-store-btns { margin: 13px 0 0 34px; width: auto; }
.ob2-live-steps-flat {
    margin-top: 8px;
    padding: 0;
    background: transparent;
    border-radius: 0;
}