/* PromptBuilder marketing (logged-out) page — loads AFTER promptbuilder.css.
   ---------------------------------------------------------------------------
   The marketing page and the rebuilt workspace had drifted into two different
   products: purple glassmorphism out front, a calm neutral instrument inside.
   This file realigns the front page to the workspace's design language.

   It is deliberately SELF-CONTAINED: the values below are copied from
   assets/css/tokens.css rather than importing it, because promptbuilder.css
   defines its own `:root` (--accent-primary, --text-primary, --radius-lg …) and
   loading both would make the cascade ambiguous. Keep these in sync with
   tokens.css by hand — they are few and they rarely change.
   Contrast (measured, vs --pbm-surface-1 #101319):
     text-primary   #F2F5FA  17.0:1  AA/AAA
     text-secondary #AAB4C6   8.9:1  AA/AAA
     text-tertiary  #8A94A6   6.1:1  AA
     accent-fg      #7C8CFF   6.3:1  AA
   =========================================================================== */

.pb-guest {
    --pbm-surface-0: #0A0C11;
    --pbm-surface-1: #101319;
    --pbm-surface-2: #161A22;
    --pbm-surface-3: #1D222C;
    --pbm-border:    #262E3B;
    --pbm-border-subtle: #1B212C;
    --pbm-border-strong: #333C4C;
    --pbm-text:      #F2F5FA;
    --pbm-text-2:    #AAB4C6;
    --pbm-text-3:    #8A94A6;
    --pbm-accent-fg: #7C8CFF;
    --pbm-accent:    #4A55CC;
    --pbm-accent-bg: rgba(124, 140, 255, 0.14);
    --pbm-radius:    10px;
    --pbm-radius-sm: 7px;
    --pbm-ease:      cubic-bezier(0.4, 0, 0.2, 1);

    background: var(--pbm-surface-0);
    color: var(--pbm-text);
}

/* The legacy sheet paints decorative radial glows on body::before/::after.
   They fight the workspace's flat, calm surfaces. */
.pb-guest::before,
.pb-guest::after { display: none !important; }

/* ── Section rhythm: one vertical scale, not five ──
   The hero is deliberately tight: the product shot is the strongest argument on
   this page, so it should reach the fold rather than sit below three screens of
   copy. */
.pb-guest .hero { padding: 3.25rem 1.5rem 1.5rem; }
.pb-guest .how-it-works,
.pb-guest .featuring,
.pb-guest .pb-video-section { padding: 3.25rem 1.5rem; }

/* ── Type ────────────────────────────────────────────────────────────────── */
.pb-guest .hero-title {
    font-size: clamp(2.5rem, 6vw, 3.75rem);
    font-weight: 700;
    letter-spacing: -0.03em;
    line-height: 1.05;
    /* Flat, high-contrast text instead of a gradient that dims the descenders. */
    background: none;
    -webkit-background-clip: border-box;
    -webkit-text-fill-color: currentColor;
    color: var(--pbm-text);
}

.pb-guest .hero-description {
    max-width: 46ch;
    margin: 1.25rem auto 0;
    font-size: 1.125rem;
    line-height: 1.6;
    color: var(--pbm-text-2);
}

.pb-guest .section-title {
    font-size: clamp(1.5rem, 3.5vw, 2rem);
    font-weight: 650;
    letter-spacing: -0.02em;
    color: var(--pbm-text);
    max-width: 28ch;
    margin-bottom: 2.5rem;
}

.pb-guest .beta-badge {
    background: var(--pbm-accent-bg);
    border: 1px solid rgba(124, 140, 255, 0.32);
    color: var(--pbm-accent-fg);
    font-size: 0.6875rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    padding: 0.25rem 0.5rem;
    border-radius: 5px;
    text-transform: uppercase;
}

/* Product Hunt badge: a proof point, not a hero element. */
.pb-guest .pb-ph-badge {
    display: inline-block;
    margin-top: 1.75rem;
    opacity: 0.85;
    transition: opacity 0.15s var(--pbm-ease);
}
.pb-guest .pb-ph-badge:hover { opacity: 1; }

/* ── The product shot: treat it like a real screenshot in a real frame ───── */
.pb-guest .preview-image-container { padding: 1rem 1.5rem 4rem; }

.pb-guest .preview-image-wrapper {
    max-width: 1180px;
    margin: 0 auto;
    border: 1px solid var(--pbm-border);
    border-radius: 14px;
    background: var(--pbm-surface-1);
    /* Depth from shadow, not from a coloured glow. */
    box-shadow:
        0 1px 0 rgba(255, 255, 255, 0.04) inset,
        0 24px 64px -24px rgba(0, 0, 0, 0.9),
        0 4px 16px -8px rgba(0, 0, 0, 0.6);
    overflow: hidden;
}

.pb-guest .preview-image {
    display: block;
    width: 100%;
    height: auto;
    border-radius: 0;
}

/* ── Login gate over the shot ───────────────────────────────────────────── */
.pb-guest .preview-blur {
    background: linear-gradient(
        to bottom,
        rgba(10, 12, 17, 0.35) 0%,
        rgba(10, 12, 17, 0.78) 55%,
        rgba(10, 12, 17, 0.94) 100%
    );
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);
}

.pb-guest .preview-login-prompt {
    background: var(--pbm-surface-2);
    border: 1px solid var(--pbm-border-strong);
    border-radius: var(--pbm-radius);
    padding: 1.75rem 2rem;
    box-shadow: 0 20px 50px -20px rgba(0, 0, 0, 0.9);
    max-width: 24rem;
}

.pb-guest .preview-login-prompt h2 {
    font-size: 1.25rem;
    font-weight: 650;
    letter-spacing: -0.01em;
    color: var(--pbm-text);
    margin: 0 0 0.5rem;
}

.pb-guest .preview-login-prompt p {
    color: var(--pbm-text-2);
    font-size: 0.9375rem;
    line-height: 1.5;
    margin: 0 0 1.25rem;
}

/* ── Buttons: one system, matching the workspace ─────────────────────────── */
.pb-guest .button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    min-height: 40px;
    padding: 0 1.125rem;
    border-radius: var(--pbm-radius-sm);
    font-size: 0.9375rem;
    font-weight: 550;
    letter-spacing: 0;
    border: 1px solid transparent;
    transition: background-color 0.15s var(--pbm-ease),
                border-color 0.15s var(--pbm-ease),
                transform 0.15s var(--pbm-ease);
}

.pb-guest .button-primary {
    background-color: var(--pbm-accent);
    border-color: var(--pbm-accent);
    color: #fff;                        /* 6.06:1 on --pbm-accent — AA */
    box-shadow: none;
}
.pb-guest .button-primary:hover {
    background-color: #5A66E0;
    border-color: #5A66E0;
    transform: none;                    /* no bounce; this is a tool, not a landing kit */
    box-shadow: none;
}

.pb-guest .button-outline {
    background-color: var(--pbm-surface-3);
    border-color: var(--pbm-border-strong);
    color: var(--pbm-text);
}
.pb-guest .button-outline:hover {
    background-color: #232935;
    border-color: #3E4859;
    color: var(--pbm-text);
}

/* ── Cards: flat, bordered, no gradient sweeps ───────────────────────────── */
.pb-guest .preview-grid,
.pb-guest .steps-container {
    max-width: 1100px;
    margin: 0 auto;
    gap: 1rem;
}

/* Four steps deserve four columns; the legacy auto-fit(280px) wrapped 3 + 1. */
@media (min-width: 1000px) {
    .pb-guest .steps-container { grid-template-columns: repeat(4, 1fr); }
}
@media (min-width: 640px) and (max-width: 999px) {
    .pb-guest .steps-container { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 639px) {
    .pb-guest .steps-container { grid-template-columns: 1fr; }
}

/* The legacy `.step` carried padding: 3rem / padding-top: 5rem and centred text,
   which is what produced the cavernous gaps between sections. */
.pb-guest .step,
.pb-guest .preview-card,
.pb-guest .step-card {
    background: var(--pbm-surface-2);
    border: 1px solid var(--pbm-border);
    border-radius: var(--pbm-radius);
    padding: 1.5rem;
    text-align: left;
    transition: border-color 0.15s var(--pbm-ease), background-color 0.15s var(--pbm-ease);
}
.pb-guest .step:hover,
.pb-guest .preview-card:hover,
.pb-guest .step-card:hover {
    background: var(--pbm-surface-3);
    border-color: var(--pbm-border-strong);
    transform: none;
}
/* Kill the legacy gradient wipe on hover. */
.pb-guest .step::before,
.pb-guest .step::after,
.pb-guest .preview-card::before,
.pb-guest .step-card::before { display: none !important; }

/* The legacy .step also set padding-top: 5rem to clear its ::before numeral,
   which we have replaced with a real .step-number element. */
.pb-guest .step { padding-top: 1.5rem !important; }

.pb-guest .preview-icon {
    width: 36px;
    height: 36px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin: 0 0 1rem;
    background: var(--pbm-accent-bg);
    border: 1px solid rgba(124, 140, 255, 0.28);
    border-radius: var(--pbm-radius-sm);
    color: var(--pbm-accent-fg);
    font-size: 1rem;
}

.pb-guest .preview-title,
.pb-guest .step-title {
    font-size: 1rem;
    font-weight: 650;
    letter-spacing: -0.005em;
    color: var(--pbm-text);
    margin: 0 0 0.5rem;
}

.pb-guest .preview-description,
.pb-guest .step-description {
    font-size: 0.9375rem;
    line-height: 1.6;
    color: var(--pbm-text-2);
    margin: 0;
}

/* Numbered steps read as sequence markers, not decoration.
   The legacy rule absolutely-positioned this at top:-10px/left:50%, which is why
   it floated free of the card; it needs to be a normal flow element again. */
.pb-guest .step-number {
    position: static;
    top: auto;
    left: auto;
    transform: none;
    margin-top: 0;
    width: 26px;
    height: 26px;
    background: var(--pbm-surface-4, #252B37);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    border-radius: 6px;
    background: var(--pbm-surface-4, #252B37);
    border: 1px solid var(--pbm-border-strong);
    color: var(--pbm-text-2);
    font-family: var(--font-mono, ui-monospace), monospace;
    font-size: 0.8125rem;
    font-weight: 600;
    margin-bottom: 0.875rem;
}

/* ── Video frame matches the product-shot frame ──────────────────────────── */
.pb-guest .pb-video-frame {
    max-width: 1000px;
    border: 1px solid var(--pbm-border);
    border-radius: 14px;
    background: var(--pbm-surface-1);
    box-shadow: 0 24px 64px -24px rgba(0, 0, 0, 0.9);
    overflow: hidden;
}
.pb-guest .pb-video-frame video { display: block; width: 100%; height: auto; }

/* ── Focus: same ring as the workspace, never removed ────────────────────── */
.pb-guest a:focus-visible,
.pb-guest button:focus-visible,
.pb-guest .button:focus-visible {
    outline: 2px solid var(--pbm-accent-fg);
    outline-offset: 2px;
    border-radius: var(--pbm-radius-sm);
}

@media (prefers-reduced-motion: reduce) {
    .pb-guest *,
    .pb-guest *::before,
    .pb-guest *::after {
        animation-duration: 0.001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.001ms !important;
    }
}

@media (max-width: 640px) {
    .pb-guest .hero { padding: 3rem 1.25rem 2rem; }
    .pb-guest .how-it-works,
    .pb-guest .featuring,
    .pb-guest .pb-video-section { padding: 3rem 1.25rem; }
    .pb-guest .preview-login-prompt { padding: 1.25rem; }
}

/* The legacy .promptshare-container is a flex column with gap: 5rem, which
   stacked 80px on top of .section-title's own margin and left a hole under
   every heading. The heading margin is the single source of that spacing now. */
.pb-guest .promptshare-container {
    gap: 0;
    padding: 0 1rem;
}