/* Paper Wrangler — additions on top of the shared Brian's design system (styles.brians.css).
   Reuses the same CSS variables, fonts, buttons, cards, spacing and footer.
   Only the few components the shop site doesn't already have live here. */

/* The shop site fades service items in via a scroll observer in its main.js.
   We keep our JS minimal, so make the list visible by default (the hover slide
   from the base stylesheet still applies). */
.service-item { opacity: 1; transform: none; }

/* Hero: keep it simple/light like the shop site, but the badge is the wordmark */
.hero-eyebrow {
    display: inline-block;
    font-size: 0.95rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    color: var(--primary-color);
    margin-bottom: 16px;
    text-transform: uppercase;
}

.hero-title .accent { color: var(--primary-color); }

/* ==========================================
   Story section — the heart of the page
   ========================================== */
.story {
    padding: var(--section-padding) 20px;
    background-color: var(--bg-light);
}

.story-inner {
    max-width: 740px;
    margin: 0 auto;
}

.story .section-title {
    text-align: center;
    margin-bottom: 16px;
}

.story-kicker {
    text-align: center;
    font-size: 1.125rem;
    color: var(--text-light);
    margin-bottom: 50px;
}

.story p {
    font-size: 1.25rem;
    line-height: 1.85;
    color: var(--text-dark);
    margin-bottom: 28px;
}

.story p .first {
    font-weight: 700;
}

.story-pull {
    font-size: 1.875rem;
    font-weight: 800;
    line-height: 1.3;
    letter-spacing: -0.01em;
    color: var(--primary-color);
    margin: 44px 0;
    padding-left: 28px;
    border-left: 5px solid var(--primary-color);
}

.story-signoff {
    margin-top: 44px;
    display: flex;
    align-items: center;
    gap: 18px;
}

.story-signoff img {
    height: 54px;
    width: auto;
}

.story-signoff span {
    font-size: 1.0625rem;
    color: var(--text-light);
    line-height: 1.4;
}

.story-signoff strong {
    display: block;
    color: var(--text-dark);
    font-weight: 700;
}

/* ==========================================
   Steps — how it works, day to day
   ========================================== */
.steps {
    padding: 80px 20px;
    background-color: var(--bg-color);
}

.steps-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
    max-width: 1100px;
    margin: 0 auto;
}

.step-card {
    background: var(--bg-color);
    border: 1px solid var(--gray-medium);
    border-radius: var(--border-radius);
    padding: 45px 35px;
    box-shadow: var(--shadow-sm);
    transition: var(--transition);
}

.step-card:hover {
    box-shadow: var(--shadow);
    transform: translateY(-4px);
}

.step-number {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: var(--primary-color);
    color: var(--text-white);
    font-size: 1.375rem;
    font-weight: 800;
    margin-bottom: 24px;
}

.step-card h3 {
    font-size: 1.5rem;
    font-weight: 700;
    margin-bottom: 12px;
    color: var(--text-dark);
}

.step-card p {
    font-size: 1.0625rem;
    line-height: 1.7;
    color: var(--text-light);
}

/* A reassurance line under the steps */
.steps-note {
    max-width: 760px;
    margin: 45px auto 0;
    text-align: center;
    font-size: 1.1875rem;
    line-height: 1.7;
    color: var(--text-light);
}

.steps-note strong { color: var(--text-dark); font-weight: 700; }

/* ==========================================
   Toolbox — the rest of what we're building
   ========================================== */
.toolbox {
    padding: 80px 20px;
    background-color: var(--bg-light);
}

.toolbox-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
    max-width: 1100px;
    margin: 0 auto;
}

.tool-card {
    background: var(--bg-color);
    border: 1px solid var(--gray-medium);
    border-radius: var(--border-radius);
    padding: 40px 35px;
    box-shadow: var(--shadow-sm);
}

.tool-card.is-live { border-color: var(--primary-color); }

.tool-tag {
    display: inline-block;
    font-size: 0.8125rem;
    font-weight: 700;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    padding: 5px 12px;
    border-radius: 100px;
    margin-bottom: 16px;
}

.tool-tag.live { background: var(--primary-color); color: var(--text-white); }
.tool-tag.soon { background: var(--bg-medium); color: var(--text-light); }

.tool-card h3 { font-size: 1.375rem; font-weight: 700; margin-bottom: 10px; }
.tool-card p { font-size: 1.0625rem; line-height: 1.7; color: var(--text-light); }

/* ==========================================
   Responsive
   ========================================== */
@media (max-width: 992px) {
    .steps-grid,
    .toolbox-grid { grid-template-columns: 1fr; max-width: 560px; }
}

@media (max-width: 768px) {
    .story p { font-size: 1.125rem; }
    .story-pull { font-size: 1.5rem; padding-left: 20px; }
    .steps, .toolbox { padding: 60px 20px; }
}