/* ============================================
   CONTENT PAGES
   Shared styles for the explanatory pages:
   quickstart, glossary, pricing.
   ============================================ */

/* Inline term explanation — the jargon stays, with its
   translation attached, rather than being hidden away. */
.term {
    font-weight: var(--font-weight-semibold);
    color: var(--color-text-primary);
    border-bottom: 1px dotted var(--color-primary-medium);
}

/* Row of links closing a section */
.section-links {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--spacing-3) var(--spacing-8);
    margin-top: var(--spacing-10);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-semibold);
}

/* ============================================
   SCREENSHOT PLACEHOLDERS
   Replace each of these with a real screenshot.
   ============================================ */
.shot {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 260px;
    padding: var(--spacing-6);
    border: var(--border-width) dashed var(--color-primary-medium);
    border-radius: var(--radius-lg);
    background-color: var(--color-primary-light);
    background-image: repeating-linear-gradient(
        135deg,
        transparent 0 10px,
        rgba(103, 91, 140, 0.10) 10px 11px
    );
    text-align: center;
}

.shot span {
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: var(--font-size-sm);
    color: var(--color-primary-medium);
    background: var(--color-white);
    padding: var(--spacing-2) var(--spacing-4);
    border-radius: var(--radius-full);
}

/* When shot contains an actual image, remove placeholder styling */
.shot:has(img) {
    min-height: auto;
    padding: 0;
    border: none;
    background: none;
}

.shot img {
    display: block;
    width: 100%;
    max-width: 100%;
    height: auto;
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg);
}

/* SVGs don't need shadow - they have their own styling */
.shot img[src$=".svg"] {
    box-shadow: none;
    border-radius: 0;
}

.shot-sm {
    min-height: 160px;
}

.shot-sm:has(img) {
    min-height: auto;
}

.shot-wide {
    min-height: 420px;
    max-width: 900px;
    margin: 0 auto;
}

@media (max-width: 700px) {
    .shot-wide {
        min-height: 280px;
    }
}

/* ============================================
   NUMBERED WALKTHROUGH (quickstart)
   ============================================ */
.walkthrough {
    display: grid;
    gap: var(--spacing-10);
    counter-reset: step;
}

.walk-step {
    display: grid;
    grid-template-columns: 48px minmax(0, 1fr);
    gap: var(--spacing-6);
    align-items: start;
}

@media (max-width: 600px) {
    .walk-step {
        grid-template-columns: 1fr;
        gap: var(--spacing-4);
    }
}

.walk-step::before {
    counter-increment: step;
    content: counter(step);
    display: flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    border-radius: var(--radius-full);
    background: var(--color-primary-dark);
    color: var(--color-white);
    font-size: var(--font-size-lg);
    font-weight: var(--font-weight-semibold);
}

.walk-step h2 {
    font-size: var(--font-size-2xl);
    font-weight: var(--font-weight-semibold);
    color: var(--color-primary-dark);
    line-height: var(--line-height-snug);
    margin-bottom: var(--spacing-3);
}

.walk-step p {
    font-size: var(--font-size-base);
    color: var(--color-text-secondary);
    line-height: var(--line-height-relaxed);
}

.walk-step p + p,
.walk-step > div > * + * {
    margin-top: var(--spacing-4);
}

.walk-step ul {
    padding-left: var(--spacing-6);
    color: var(--color-text-secondary);
}

.walk-step li {
    margin-bottom: var(--spacing-2);
    line-height: var(--line-height-relaxed);
}

.callout {
    border-left: 3px solid var(--color-primary-medium);
    background: var(--color-primary-light);
    border-radius: 0 var(--radius-md) var(--radius-md) 0;
    padding: var(--spacing-4) var(--spacing-5);
    font-size: var(--font-size-sm);
    color: var(--color-text-secondary);
    line-height: var(--line-height-relaxed);
}

.callout strong {
    color: var(--color-primary-dark);
}

/* ============================================
   GLOSSARY
   ============================================ */
.glossary-list {
    display: grid;
    gap: var(--spacing-6);
}

.glossary-item {
    padding-bottom: var(--spacing-6);
    border-bottom: var(--border-width) solid var(--color-gray-200);
}

.glossary-item:last-child {
    border-bottom: none;
    padding-bottom: 0;
}

.glossary-term {
    font-size: var(--font-size-xl);
    font-weight: var(--font-weight-semibold);
    color: var(--color-primary-dark);
    margin-bottom: var(--spacing-1);
}

.glossary-aka {
    font-size: var(--font-size-sm);
    color: var(--color-text-muted);
    margin-bottom: var(--spacing-3);
}

.glossary-item p {
    font-size: var(--font-size-base);
    color: var(--color-text-secondary);
    line-height: var(--line-height-relaxed);
}

.glossary-item p + p {
    margin-top: var(--spacing-3);
}

.glossary-plain {
    color: var(--color-text-primary);
}

/* ============================================
   PRICING
   ============================================ */
.price-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--spacing-6);
    align-items: start;
}

.price-grid-2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    max-width: 760px;
    margin: 0 auto;
}

@media (max-width: 900px) {
    .price-grid {
        grid-template-columns: 1fr;
        max-width: 420px;
        margin: 0 auto;
    }

    .price-grid-2 {
        gap: var(--spacing-4);
    }
}

/* two cards stay side by side until there's genuinely no room */
@media (max-width: 620px) {
    .price-grid-2 {
        grid-template-columns: 1fr;
        max-width: 420px;
    }
}

.price-card {
    background: var(--color-white);
    border: var(--border-width) solid var(--color-gray-200);
    border-radius: var(--radius-xl);
    padding: var(--spacing-8);
    display: flex;
    flex-direction: column;
    gap: var(--spacing-5);
}

.price-card-featured {
    border: 2px solid var(--color-accent);
    box-shadow: var(--shadow-xl);
    background: linear-gradient(180deg, rgba(0, 191, 165, 0.06) 0%, var(--color-white) 220px);
}

.price-card-featured .price-quip {
    color: var(--color-accent-text);
    font-weight: var(--font-weight-medium);
}

.price-name {
    font-size: var(--font-size-lg);
    font-weight: var(--font-weight-semibold);
    color: var(--color-primary-dark);
}

.price-quip {
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-normal);
    color: var(--color-text-secondary);
}

.price-figure {
    display: flex;
    align-items: baseline;
    gap: var(--spacing-2);
}

.price-amount {
    font-size: var(--font-size-4xl);
    font-weight: var(--font-weight-bold);
    color: var(--color-primary-dark);
    letter-spacing: var(--letter-spacing-tight);
    line-height: 1;
}

.price-period {
    font-size: var(--font-size-base);
    color: var(--color-text-secondary);
}

.price-annual {
    font-size: var(--font-size-sm);
    color: var(--color-text-muted);
}

.price-desc {
    font-size: var(--font-size-base);
    color: var(--color-text-secondary);
    line-height: var(--line-height-relaxed);
}

.price-list {
    list-style: none;
    display: grid;
    gap: var(--spacing-3);
}

.price-list li {
    display: grid;
    grid-template-columns: 20px minmax(0, 1fr);
    gap: var(--spacing-3);
    font-size: var(--font-size-sm);
    color: var(--color-text-secondary);
    line-height: var(--line-height-normal);
}

.price-list svg {
    width: 20px;
    height: 20px;
    color: var(--color-accent);
}

.price-note {
    font-size: var(--font-size-sm);
    color: var(--color-text-muted);
}

.needs-input {
    display: block;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: var(--font-size-xs);
    color: var(--color-primary-medium);
    background: var(--color-primary-light);
    border: 1px dashed var(--color-primary-medium);
    border-radius: var(--radius-sm);
    padding: var(--spacing-3) var(--spacing-4);
    line-height: var(--line-height-normal);
}

.billing-note {
    text-align: center;
    font-size: var(--font-size-sm);
    color: var(--color-text-secondary);
    margin-top: var(--spacing-8);
}

/* ============================================
   CONTENT PAGE SHELL
   ============================================ */
.content-page {
    max-width: 820px;
    margin: 0 auto;
    padding: var(--spacing-16) var(--spacing-6) var(--spacing-24);
}

.content-lede {
    font-size: var(--font-size-lg);
    color: var(--color-text-secondary);
    line-height: var(--line-height-relaxed);
    margin-bottom: var(--spacing-12);
}

.content-page h2:not(.walk-step h2) {
    font-size: var(--font-size-2xl);
    font-weight: var(--font-weight-semibold);
    color: var(--color-primary-dark);
    margin-bottom: var(--spacing-4);
}

.content-page > p {
    font-size: var(--font-size-base);
    color: var(--color-text-secondary);
    line-height: var(--line-height-relaxed);
    margin-bottom: var(--spacing-4);
}

.next-steps {
    margin-top: var(--spacing-16);
    padding-top: var(--spacing-8);
    border-top: var(--border-width) solid var(--color-gray-200);
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacing-6);
}

.next-steps a {
    color: var(--link-color, var(--color-accent-text));
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-semibold);
}

.next-steps a:hover,
.next-steps a:focus-visible {
    text-decoration: underline;
    text-underline-offset: 4px;
}

/* ============================================
   BROWSER INSTALL BUTTONS
   Lifted from pages/scribshield.html so the install
   pair can appear on more than one page.
   ============================================ */
.install-row {
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacing-3);
}

.install-btn {
    display: flex;
    align-items: center;
    gap: var(--spacing-2);
    min-height: 48px;
    padding: var(--spacing-3) var(--spacing-5);
    border-radius: var(--radius-md);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-medium);
    border: 1px solid var(--color-gray-200);
    background: var(--color-white);
    color: var(--color-primary-dark);
    transition: all var(--transition-normal);
}

.install-btn:hover {
    background: var(--color-off-white);
    transform: translateY(-1px);
}

.install-btn:focus-visible {
    outline: 2px solid var(--color-accent);
    outline-offset: 2px;
}

.install-btn.firefox {
    border-color: #ff7139;
}

.install-btn.firefox:hover {
    background: #fff5f2;
}

.install-btn.chrome {
    border-color: #4285f4;
}

.install-btn.chrome:hover {
    background: #f0f6ff;
}

/* Alpha status strip */
.status-note {
    display: flex;
    align-items: center;
    gap: var(--spacing-3);
    font-size: var(--font-size-sm);
    color: var(--color-text-on-dark-muted);
}

.status-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--color-accent);
    flex-shrink: 0;
}

/* ============================================
   ARMS RACE STATEMENT
   Editorial block, not a card. Sits above the
   feature table on the ScribShield page.
   ============================================ */
.arms-race {
    max-width: 760px;
    margin: var(--spacing-16) auto 0;
    padding: var(--spacing-10);
    background: var(--color-primary-light);
    border-radius: var(--radius-xl);
}

@media (max-width: 600px) {
    .arms-race {
        padding: var(--spacing-6);
    }
}

.arms-race h2 {
    font-size: var(--font-size-3xl);
    font-weight: var(--font-weight-semibold);
    line-height: var(--line-height-snug);
    letter-spacing: var(--letter-spacing-tight);
    color: var(--color-primary-dark);
    margin-bottom: var(--spacing-5);
}

.arms-race p {
    font-size: var(--font-size-base);
    color: var(--color-text-secondary);
    line-height: var(--line-height-relaxed);
}

.arms-race p + p {
    margin-top: var(--spacing-4);
}

.arms-race p:last-child {
    color: var(--color-text-primary);
}

/* Product name above a section heading — keeps
   product-specific sections labelled as more
   products arrive. */
.section-header p.eyebrow,
p.eyebrow,
.eyebrow {
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-semibold);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--color-primary-medium);
    margin-bottom: var(--spacing-3);
}

/* ============================================
   THREE STAGES
   The lifecycle spine on the homepage: one column
   per stage, connected by a rule. Products attach
   to stages, so this survives new products.
   ============================================ */
.stages {
    position: relative;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--spacing-10);
    padding-top: var(--spacing-8);
}

/* the connecting rule, behind the dots */
/* runs from the first dot's centre to the last one's:
   three 1fr tracks with a 40px gap put the third dot at
   66.667% + ~33px */
.stages::before {
    content: '';
    position: absolute;
    top: 5px;
    left: 6px;
    right: calc(33.333% - 33px);
    height: 2px;
    background: var(--color-gray-200);
}

.stage {
    position: relative;
    padding-top: var(--spacing-6);
}

.stage::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: var(--color-gray-200);
    box-shadow: 0 0 0 4px var(--color-off-white);
}

.stage-live::before {
    background: var(--color-accent);
}

.stage-label {
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-semibold);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--color-text-muted);
    margin-bottom: var(--spacing-3);
}

.stage h3 {
    font-size: var(--font-size-xl);
    font-weight: var(--font-weight-semibold);
    line-height: var(--line-height-snug);
    color: var(--color-primary-dark);
    margin-bottom: var(--spacing-3);
}

.stage p {
    font-size: var(--font-size-base);
    color: var(--color-text-secondary);
    line-height: var(--line-height-relaxed);
    margin-bottom: var(--spacing-5);
}

.stage-product {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: var(--spacing-2) var(--spacing-3);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-semibold);
    color: var(--color-primary-dark);
}

.stage-product .stage-status {
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-medium);
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--color-text-muted);
}

@media (max-width: 900px) {
    .stages {
        grid-template-columns: 1fr;
        gap: var(--spacing-10);
        padding-top: var(--spacing-4);
    }

    .stages::before {
        top: 5px;
        bottom: 5px;
        left: 5px;
        right: auto;
        width: 2px;
        height: auto;
    }

    .stage {
        padding-top: 0;
        padding-left: var(--spacing-8);
    }

    .stage::before {
        top: 4px;
    }
}