/* ================================================================
   Marcus — page-level styles for non-home routes (pricing, founders,
   security, solutions, etc.). Layered on tokens.css + main.css.
   ================================================================ */

/* ---- page hero (smaller than home hero) ---- */
.page-hero {
    padding: 96px 0 56px;
    text-align: center;
    position: relative;
    isolation: isolate;
}
.page-hero h1 {
    font-size: clamp(36px, 5vw, 56px);
    line-height: var(--lh-tight);
    letter-spacing: var(--tracking-tight);
    font-weight: var(--fw-semibold);
    margin: 0 auto var(--s-5);
    max-width: 720px;
}
.page-hero p {
    font-size: var(--fs-xl);
    line-height: var(--lh-snug);
    color: var(--fg-muted);
    max-width: var(--container-text);
    margin: 0 auto;
}

/* ---- pricing tiers ---- */
.tiers {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--s-5);
    align-items: stretch;
}
.tier {
    display: flex;
    flex-direction: column;
    padding: var(--s-8);
    border: 1px solid var(--border);
    border-radius: var(--r-xl);
    background: var(--bg-elevated);
    transition: transform var(--t-base) var(--ease-out), box-shadow var(--t-base) var(--ease-out);
}
.tier--featured {
    background: var(--fg);
    color: var(--bg);
    border-color: var(--fg);
    transform: translateY(-8px);
    box-shadow: var(--sh-3);
}
.tier--featured h3, .tier--featured .tier__price { color: var(--bg); }
.tier--featured .tier__features li::before { color: var(--bg-muted-2); }
.tier--featured .tier__row p { color: var(--fg-muted-subtle); }
.tier__row { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: var(--s-4); }
.tier__row h3 {
    font-size: var(--fs-xl);
    margin: 0;
    font-weight: var(--fw-semibold);
}
.tier__tag {
    font-size: var(--fs-xs);
    text-transform: uppercase;
    letter-spacing: var(--tracking-wide);
    color: var(--accent-primary);
    font-weight: var(--fw-semibold);
}
.tier__price {
    font-size: var(--fs-3xl);
    line-height: 1;
    font-weight: var(--fw-semibold);
    letter-spacing: var(--tracking-tight);
    margin-bottom: var(--s-2);
}
.tier__price small {
    font-size: var(--fs-sm);
    color: var(--fg-muted);
    font-weight: var(--fw-regular);
    letter-spacing: 0;
}
.tier > p {
    color: var(--fg-muted);
    margin: 0 0 var(--s-6);
    font-size: var(--fs-sm);
}
.tier__features {
    list-style: none;
    padding: 0;
    margin: 0 0 var(--s-8);
    display: grid;
    gap: var(--s-3);
    flex: 1;
}
.tier__features li {
    position: relative;
    padding-left: 22px;
    font-size: var(--fs-sm);
    line-height: var(--lh-relaxed);
}
.tier__features li::before {
    content: "✓";
    position: absolute;
    left: 0;
    top: 0;
    color: var(--accent-primary);
    font-weight: var(--fw-bold);
}
.tier .btn { width: 100%; }

/* ---- persona / story page ---- */
.story-block {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--s-12);
    align-items: center;
    padding: var(--s-12) 0;
    border-top: 1px solid var(--border);
}
.story-block:first-of-type { border-top: 0; }
.story-block__visual {
    aspect-ratio: 4/3;
    border-radius: var(--r-xl);
    background: linear-gradient(135deg, var(--block-from, var(--c-blue-300)), var(--block-to, var(--c-purple-400)));
    box-shadow: var(--sh-2);
}
.story-block h3 {
    font-size: var(--fs-2xl);
    line-height: var(--lh-snug);
    font-weight: var(--fw-semibold);
    margin: 0 0 var(--s-4);
}
.story-block p {
    font-size: var(--fs-md);
    line-height: var(--lh-relaxed);
    color: var(--fg-muted);
    margin: 0 0 var(--s-3);
}
.story-block:nth-child(even) { grid-template-columns: 1fr 1fr; direction: rtl; }
.story-block:nth-child(even) > * { direction: ltr; }

/* ---- security guarantees grid ---- */
.guarantees {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--s-5);
}
.guarantee {
    padding: var(--s-6);
    border: 1px solid var(--border);
    border-radius: var(--r-lg);
    background: var(--bg-card);
}
.guarantee h4 {
    font-size: var(--fs-md);
    margin: 0 0 var(--s-2);
    font-weight: var(--fw-semibold);
}
.guarantee p {
    font-size: var(--fs-sm);
    line-height: var(--lh-relaxed);
    color: var(--fg-muted);
    margin: 0;
}

/* ---- pull quote ---- */
.pullquote {
    border-left: 3px solid var(--fg);
    padding: var(--s-2) 0 var(--s-2) var(--s-6);
    margin: var(--s-12) auto;
    max-width: var(--container-text);
}
.pullquote blockquote {
    font-size: var(--fs-xl);
    line-height: var(--lh-snug);
    margin: 0 0 var(--s-3);
    font-weight: var(--fw-medium);
    letter-spacing: var(--tracking-snug);
}
.pullquote cite {
    font-style: normal;
    color: var(--fg-muted);
    font-size: var(--fs-sm);
}

/* ---- long-form article (guides, blog) ---- */
.article-meta {
    color: var(--fg-muted);
    font-size: var(--fs-sm);
    text-align: center;
    margin: 0 0 var(--s-3);
    letter-spacing: var(--tracking-wide);
    text-transform: uppercase;
}
.article {
    max-width: 720px;
    margin: 0 auto;
    padding: 0 var(--s-4) var(--s-12);
}
.article > * + * { margin-top: var(--s-5); }
.article p {
    font-size: 18px;
    line-height: 1.72;
    color: var(--fg);
    margin: 0;
}
.article p + p { margin-top: var(--s-5); }
.article h2 {
    font-size: clamp(26px, 3vw, 34px);
    line-height: var(--lh-snug);
    font-weight: var(--fw-semibold);
    letter-spacing: var(--tracking-snug);
    margin: var(--s-12) 0 var(--s-4);
    color: var(--fg);
}
.article h3 {
    font-size: clamp(20px, 2vw, 22px);
    line-height: var(--lh-snug);
    font-weight: var(--fw-semibold);
    margin: var(--s-8) 0 var(--s-3);
}
.article ul, .article ol {
    padding-left: var(--s-6);
    margin: var(--s-4) 0;
}
.article li {
    font-size: 18px;
    line-height: 1.72;
    margin-bottom: var(--s-2);
    color: var(--fg);
}
.article li::marker {
    color: var(--fg-muted);
}
.article blockquote {
    border-left: 3px solid var(--fg);
    padding: var(--s-2) 0 var(--s-2) var(--s-5);
    margin: var(--s-8) 0;
    color: var(--fg-muted);
    font-style: italic;
    font-size: 18px;
    line-height: 1.6;
}
.article a {
    color: var(--fg);
    text-decoration: underline;
    text-underline-offset: 3px;
    text-decoration-thickness: 1px;
}
.article a:hover { color: var(--accent-primary); }
.article hr {
    border: 0;
    border-top: 1px solid var(--border);
    margin: var(--s-12) 0;
}
.article code {
    background: var(--bg-muted);
    padding: 2px 6px;
    border-radius: 4px;
    font-size: 0.92em;
    font-family: ui-monospace, "SF Mono", Menlo, monospace;
}
.article-cta {
    margin: var(--s-12) auto 0;
    padding: var(--s-8);
    border: 1px solid var(--border);
    background: var(--bg-elevated);
    border-radius: var(--r-xl);
    text-align: center;
    max-width: 720px;
}
.article-cta h3 {
    font-size: var(--fs-2xl);
    margin: 0 0 var(--s-3);
    font-weight: var(--fw-semibold);
}
.article-cta p {
    color: var(--fg-muted);
    margin: 0 0 var(--s-5);
    font-size: var(--fs-md);
}

/* ---- guides index grid ---- */
.guide-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--s-5);
    max-width: 980px;
    margin: 0 auto;
}
.guide-card {
    display: flex;
    flex-direction: column;
    padding: var(--s-7);
    border: 1px solid var(--border);
    background: var(--bg-elevated);
    border-radius: var(--r-xl);
    text-decoration: none;
    color: var(--fg);
    transition: transform var(--t-base) var(--ease-out), box-shadow var(--t-base) var(--ease-out), border-color var(--t-base) var(--ease-out);
}
.guide-card:hover {
    transform: translateY(-3px);
    box-shadow: var(--sh-3);
    border-color: var(--fg);
}
.guide-card__category {
    color: var(--accent-primary);
    font-size: var(--fs-xs);
    font-weight: var(--fw-semibold);
    text-transform: uppercase;
    letter-spacing: var(--tracking-wide);
    margin: 0 0 var(--s-3);
}
.guide-card h3 {
    font-size: var(--fs-xl);
    line-height: var(--lh-snug);
    font-weight: var(--fw-semibold);
    margin: 0 0 var(--s-3);
}
.guide-card p {
    color: var(--fg-muted);
    margin: 0;
    font-size: var(--fs-sm);
    line-height: var(--lh-relaxed);
    flex: 1;
}
.guide-card__time {
    margin-top: var(--s-5);
    padding-top: var(--s-4);
    border-top: 1px solid var(--border);
    color: var(--fg-muted-subtle);
    font-size: var(--fs-xs);
}

/* ---- FAQ / long-tail Variant B layout ---- */
.faq-shell {
    max-width: 1180px;
    margin: 0 auto;
    padding: var(--s-10) var(--s-6) var(--s-16);
}
.faq-head { max-width: 880px; margin: 0 0 var(--s-10); }

.breadcrumb {
    list-style: none;
    padding: 0;
    margin: 0 0 var(--s-5);
    display: flex;
    flex-wrap: wrap;
    gap: var(--s-2);
    color: var(--fg-muted);
    font-size: var(--fs-sm);
}
.breadcrumb li { display: inline-flex; align-items: center; gap: var(--s-2); }
.breadcrumb li:not(:last-child)::after {
    content: '\203A';
    color: var(--fg-muted-subtle);
    margin-left: var(--s-2);
}
.breadcrumb a { color: var(--fg-muted); text-decoration: none; }
.breadcrumb a:hover { color: var(--fg); text-decoration: underline; text-underline-offset: 3px; }
.breadcrumb li:last-child { color: var(--fg); }

.faq-tags {
    display: inline-flex;
    flex-wrap: wrap;
    gap: var(--s-2);
    margin: 0 0 var(--s-5);
}
.faq-tag {
    display: inline-block;
    padding: 4px 12px;
    border-radius: 999px;
    font-size: var(--fs-xs);
    font-weight: var(--fw-medium);
    background: var(--bg-muted);
    color: var(--fg);
    border: 1px solid var(--border);
}
.faq-tag--accent {
    background: rgba(120,150,255,0.12);
    color: #4364c8;
    border-color: rgba(120,150,255,0.3);
}

.faq-h1 {
    font-size: clamp(32px, 4.5vw, 46px);
    line-height: var(--lh-tight);
    letter-spacing: var(--tracking-tight);
    font-weight: var(--fw-semibold);
    margin: 0 0 var(--s-5);
}
.faq-tldr {
    font-size: 19px;
    line-height: 1.65;
    color: var(--fg-muted);
    margin: 0;
    padding: var(--s-5) var(--s-6);
    border-left: 4px solid var(--accent-primary);
    background: var(--bg-muted);
    border-radius: 0 var(--r-md) var(--r-md) 0;
}
.faq-tldr strong { color: var(--fg); font-weight: var(--fw-semibold); }

.faq-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 280px;
    gap: var(--s-12);
    align-items: start;
}

.faq-body { max-width: 760px; }
.faq-body p, .faq-body li {
    font-size: 18px;
    line-height: 1.72;
    color: var(--fg);
    margin: 0 0 var(--s-5);
}
.faq-body ul, .faq-body ol { padding-left: var(--s-6); margin: var(--s-4) 0; }
.faq-body li { margin-bottom: var(--s-2); }
.faq-body h2 {
    font-size: clamp(24px, 2.6vw, 30px);
    font-weight: var(--fw-semibold);
    line-height: var(--lh-snug);
    margin: var(--s-10) 0 var(--s-4);
    scroll-margin-top: 80px;
}
.faq-body h3 {
    font-size: var(--fs-xl);
    font-weight: var(--fw-semibold);
    line-height: var(--lh-snug);
    margin: var(--s-8) 0 var(--s-3);
}

.faq-side {
    display: grid;
    gap: var(--s-5);
    position: sticky;
    top: var(--s-6);
}
.faq-side__card {
    background: var(--bg-elevated);
    border: 1px solid var(--border);
    border-radius: var(--r-lg);
    padding: var(--s-5) var(--s-6);
}
.faq-side__card h3 {
    font-size: var(--fs-sm);
    font-weight: var(--fw-semibold);
    text-transform: uppercase;
    letter-spacing: var(--tracking-wide);
    color: var(--fg-muted);
    margin: 0 0 var(--s-4);
}
.faq-side__card ol {
    list-style: none;
    padding: 0;
    margin: 0;
    counter-reset: toc;
}
.faq-side__card ol li {
    counter-increment: toc;
    padding: var(--s-2) 0;
    border-bottom: 1px solid var(--border);
}
.faq-side__card ol li:last-child { border-bottom: 0; }
.faq-side__card ol a {
    color: var(--fg);
    text-decoration: none;
    font-size: var(--fs-sm);
    line-height: 1.45;
    display: flex;
    gap: var(--s-2);
}
.faq-side__card ol a::before {
    content: counter(toc, decimal-leading-zero);
    color: var(--fg-muted-subtle);
    font-variant-numeric: tabular-nums;
    flex-shrink: 0;
}
.faq-side__card ol a:hover { color: var(--accent-primary); }

.faq-related ul {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    gap: var(--s-3);
}
.faq-related a {
    display: block;
    color: var(--fg);
    text-decoration: none;
    font-size: var(--fs-sm);
    line-height: 1.5;
    padding: var(--s-2) 0;
    border-bottom: 1px solid var(--border);
}
.faq-related li:last-child a { border-bottom: 0; }
.faq-related a:hover { color: var(--accent-primary); }

.faq-cta-mini {
    background: var(--fg);
    color: var(--bg);
    border-radius: var(--r-lg);
    padding: var(--s-6);
}
.faq-cta-mini h3 {
    font-size: var(--fs-md);
    font-weight: var(--fw-semibold);
    margin: 0 0 var(--s-2);
    color: var(--bg);
    text-transform: none;
    letter-spacing: 0;
}
.faq-cta-mini p {
    color: var(--bg-muted-2);
    font-size: var(--fs-sm);
    margin: 0 0 var(--s-4);
    line-height: 1.5;
}
.faq-cta-mini .btn {
    width: 100%;
    justify-content: center;
    background: var(--bg);
    color: var(--fg);
}

/* ---- responsive ---- */
@media (max-width: 960px) {
    .tiers { grid-template-columns: 1fr; }
    .tier--featured { transform: none; }
    .story-block { grid-template-columns: 1fr; gap: var(--s-6); padding: var(--s-8) 0; }
    .story-block:nth-child(even) { direction: ltr; }
    .guarantees { grid-template-columns: 1fr; }
    .guide-grid { grid-template-columns: 1fr; }
    .faq-grid { grid-template-columns: 1fr; }
    .faq-side { position: static; }
}
@media (max-width: 720px) {
    .faq-shell { padding: var(--s-8) var(--s-4) var(--s-12); }
}