/* ============================================================
   Guides — the parts of a walkthrough that no marketing page has.

   Tokens, buttons, header, footer and section rhythm all come from
   b2b-ads/main.css and seo-landing.css; this file adds the numbered steps, the
   question list and the index cards, and nothing else. It defines no colour of
   its own.

   Card recipe per docs/LANDING_PAGE_DESIGN_SYSTEM.md: a glass surface, a
   rounding token, and a hover that changes the border colour and moves
   nothing. No decorative top stripe, no lift, no halo.
   ============================================================ */

/* ── Index ────────────────────────────────────────────────── */

/* 140px of lead-in, the same as .hero on every other page here: .lp-header is
   fixed, and anything less starts the page underneath it. */
.guides-hero {
    padding: 140px 0 40px;
}

.guides-hero h1 {
    margin: 0 0 16px;
    font-size: clamp(32px, 5vw, 52px);
    line-height: 1.1;
    color: var(--text-primary);
}

.guides-hero p {
    max-width: 720px;
    margin: 0;
    font-size: 18px;
    line-height: 1.7;
    color: var(--text-secondary);
}

.guides-list {
    padding: 24px 0 72px;
}

.guides-list-title {
    margin: 0 0 24px;
    font-size: 24px;
    color: var(--text-primary);
}

.guides-grid {
    display: grid;
    /* min() rather than a flat 320px: a 320px phone leaves 288px inside the
       container's padding, and html and body both hide horizontal overflow,
       so a track wider than that clips the cards instead of scrolling. */
    grid-template-columns: repeat(auto-fill, minmax(min(320px, 100%), 1fr));
    gap: 20px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.guide-card {
    display: flex;
    flex-direction: column;
    gap: 10px;
    height: 100%;
    padding: 24px;
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-lg);
    background: var(--bg-card);
    text-decoration: none;
    transition: border-color 0.2s ease;
}

.guide-card:hover,
.guide-card:focus-visible {
    border-color: var(--accent-violet);
    opacity: 1;
}

.guide-card:focus-visible {
    outline: 2px solid var(--accent-violet);
    outline-offset: 2px;
}

.guide-card-title {
    font-size: 19px;
    font-weight: 600;
    color: var(--text-primary);
}

.guide-card-summary {
    line-height: 1.6;
    color: var(--text-secondary);
}

/* Pushed to the foot so cards of unequal summary length align their facts. */
.guide-card-facts {
    margin-top: auto;
    padding-top: 6px;
    font-size: 14px;
    color: var(--text-secondary);
}

/* ── One guide ────────────────────────────────────────────── */

/* Same clearance as the index. A guide opens on its breadcrumbs, so without it
   the first links on the page sit under the fixed header and cannot be used. */
.guide {
    padding: 132px 0 72px;
}

.guide .container {
    max-width: 820px;
}

.guide-breadcrumbs ol {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 0 0 28px;
    padding: 0;
    list-style: none;
    font-size: 14px;
    color: var(--text-secondary);
}

.guide-breadcrumbs li + li::before {
    content: '/';
    margin-right: 8px;
    color: var(--border-medium);
}

.guide-breadcrumbs a {
    color: var(--text-secondary);
}

.guide-header h1 {
    margin: 0 0 16px;
    font-size: clamp(30px, 4.5vw, 44px);
    line-height: 1.15;
    color: var(--text-primary);
}

.guide-summary {
    margin: 0 0 28px;
    font-size: 18px;
    line-height: 1.7;
    color: var(--text-secondary);
}

/* What the reader wants before committing to a walkthrough: whether it is for
   them, how long it takes, and whether it still matches the dashboard. */
.guide-facts {
    display: flex;
    flex-wrap: wrap;
    gap: 12px 32px;
    margin: 0 0 44px;
    padding: 20px 24px;
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-md);
    background: var(--bg-card);
}

.guide-facts dt {
    margin: 0 0 4px;
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--text-secondary);
}

.guide-facts dd {
    margin: 0;
    font-weight: 600;
    color: var(--text-primary);
}

.guide-steps {
    margin: 0 0 56px;
    padding: 0;
    list-style: none;
    counter-reset: guide-step;
}

.guide-steps > li {
    position: relative;
    counter-increment: guide-step;
    padding: 0 0 36px 60px;
}

/* The rule down the left is the spine of the walkthrough: it shows at a glance
   that the steps are ordered and where the last one ends. */
.guide-steps > li:not(:last-child)::after {
    content: '';
    position: absolute;
    top: 44px;
    bottom: 8px;
    left: 19px;
    width: 1px;
    background: var(--border-subtle);
}

.guide-steps > li::before {
    content: counter(guide-step);
    position: absolute;
    top: 0;
    left: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border: 1px solid var(--border-medium);
    border-radius: var(--radius-pill);
    background: var(--bg-card);
    font-weight: 700;
    color: var(--text-primary);
}

.guide-steps h3 {
    margin: 6px 0 10px;
    font-size: 22px;
    color: var(--text-primary);
}

.guide-steps p {
    margin: 0 0 16px;
    line-height: 1.75;
    color: var(--text-secondary);
}

.guide-questions {
    margin: 0 0 56px;
}

.guide-steps-section > h2,
.guide-questions h2,
.guide-agent-paths h2,
.guide-next h2 {
    margin: 0 0 20px;
    font-size: 24px;
    color: var(--text-primary);
}

.guide-questions dt {
    margin: 0 0 8px;
    font-size: 18px;
    font-weight: 600;
    color: var(--text-primary);
}

.guide-questions dd {
    margin: 0 0 28px;
    line-height: 1.75;
    color: var(--text-secondary);
}

.guide-agent-paths {
    margin: 0 0 56px;
}

.guide-agent-paths p {
    margin: 0 0 20px;
    line-height: 1.75;
    color: var(--text-secondary);
}

.guide-agent-paths h3 {
    margin: 0 0 12px;
    font-size: 18px;
    font-weight: 600;
    color: var(--text-primary);
}

/* The prompt is the part a reader takes away, so it reads as something to take
   rather than something to skim: on its own card, in the voice they would use,
   with the button that copies it beside the words themselves. The button wraps
   under the prompt on a narrow screen rather than squeezing it. */
.guide-prompt {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px 16px;
    margin: 0 0 20px;
    padding: 18px 22px;
    border: 1px solid var(--border-subtle);
    border-left: 3px solid var(--accent-violet);
    border-radius: var(--radius-md);
    background: var(--bg-card);
}

.guide-prompt p {
    flex: 1 1 220px;
    margin: 0;
    color: var(--text-primary);
}

.guide-prompt-copy {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    gap: 8px;
    padding: 8px 14px;
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-md);
    background: transparent;
    font-family: inherit;
    font-size: 14px;
    color: var(--text-primary);
    cursor: pointer;
    transition: border-color 0.2s ease;
}

.guide-prompt-copy:hover,
.guide-prompt-copy:focus-visible {
    border-color: var(--accent-violet);
}

.guide-prompt-copy i {
    color: var(--accent-violet);
}

/* Empty until something happens, so it takes no room on the card until it has
   something to say. */
.guide-prompt-status:not(:empty) {
    flex: 1 0 100%;
    font-size: 13px;
    color: var(--text-secondary);
}

.guide-next {
    margin: 0 0 56px;
}

.guide-next-list {
    display: grid;
    gap: 12px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.guide-next-list a {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 18px 22px;
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-md);
    background: var(--bg-card);
    font-weight: 600;
    color: var(--text-primary);
    text-decoration: none;
    transition: border-color 0.2s ease;
}

.guide-next-list a:hover,
.guide-next-list a:focus-visible {
    border-color: var(--accent-violet);
    opacity: 1;
}

.guide-next-list i {
    color: var(--accent-violet);
}

.guide-cta {
    margin-top: 8px;
    padding: 48px 0;
    text-align: center;
}

.guide-cta h2 {
    margin: 0 0 12px;
    font-size: clamp(24px, 3vw, 32px);
    color: var(--text-primary);
}

.guide-cta p {
    max-width: 560px;
    margin: 0 auto 28px;
    line-height: 1.7;
    color: var(--text-secondary);
}

.guide-cta .hero-cta-group {
    justify-content: center;
}

@media (max-width: 600px) {
    .guide-steps > li {
        padding-left: 52px;
    }

    .guide-facts {
        gap: 16px;
    }
}

/* The panel and the sentence that names it travel together, so a crawler reads
   the caption as the image's description and a reader knows what they are
   looking at without scrolling back to the step. */
.guide-figure {
    margin: 0 0 8px;
}

.guide-figure figcaption {
    margin-top: 10px;
    font-size: 14px;
    line-height: 1.6;
    color: var(--text-secondary);
}

/* The detail header carries a third action that no marketing page has. On a
   phone the three plus the logo exceed the container, and .lp-header hides its
   overflow, so the conversion actions would be clipped. The breadcrumb at the
   top of every guide links back to the index, so dropping this one here costs
   the reader nothing. */
@media (max-width: 600px) {
    .lp-header .programmatic-nav-link {
        display: none;
    }
}

/* Narrower still, the logo plus two actions stop fitting. The shared header
   already shrinks its buttons below 768px and again below 480px, and
   .header-actions carries flex-shrink: 1, so the container itself never
   overflows -- the squeeze lands inside the buttons instead, and their labels
   are nowrap. Measured against this stylesheet: at 320px "Get started free" is
   cut off by 15px and at 340px by 2px, while 360px and wider are clear. The
   primary action is the one that must stay legible, so the demo link gives way
   below 400px, which leaves margin rather than sitting on the boundary. It is
   repeated in full at the foot of every guide, and the programmatic landing
   pages drop the same link on narrow screens. */
@media (max-width: 400px) {
    .lp-header .header-demo {
        display: none;
    }
}