/* =========================================================
APPLYKPI DESIGN SYSTEM
Unified Marketing + Articles + Detail Stylesheet
========================================================= */

/* =========================================================

1. ROOT VARIABLES
========================================================= */

:root {
--brand-green: rgb(0, 196, 0);
--brand-blue: #1e40af;

--bg: #eef2f7;
--text: #0f172a;
--text-soft: #475569;
--muted: #64748b;
--border: #dbe2ea;

--canvas: #eef2f7;
--surface: #ffffff;
--surface-soft: #f1f5f9;

--text-primary: #0f172a;
--text-secondary: #475569;
--text-muted: #64748b;

--radius-sm: 12px;
--radius-md: 16px;
--radius-lg: 20px;
--radius-xl: 24px;

--shadow-soft: 0 10px 30px rgba(15, 23, 42, 0.08);
--shadow-card: 0 6px 18px rgba(15, 23, 42, 0.06);

--max-width-article: 820px;
--max-width-wide: 1100px;

--transition-fast: 0.2s ease;

/* =========================================================
2. GLOBAL RESET + BASE
========================================================= */

* {
margin: 0;
padding: 0;
box-sizing: border-box;
}

body {
font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
color: var(--text);
line-height: 1.6;
min-height: 100vh;
padding: 40px 20px;

background-color: var(--bg);
background-image:
radial-gradient(circle at 50% 15%, rgba(30, 64, 175, 0.07), transparent 55%),
radial-gradient(circle at 85% 85%, rgba(0, 196, 0, 0.06), transparent 60%),
linear-gradient(rgba(15, 23, 42, 0.04) 1px, transparent 1px),
linear-gradient(90deg, rgba(15, 23, 42, 0.04) 1px, transparent 1px);
background-size: auto, auto, 48px 48px, 48px 48px;
background-attachment: fixed;
}

/* =========================================================
3. BRAND SYSTEM
========================================================= */

a.brand-lockup,
.brand-lockup {
display: flex;
align-items: center;
gap: 16px;
text-decoration: none;
color: inherit;
}

a.brand-lockup:hover {
opacity: 0.85;
transition: opacity 0.2s ease;
}

.brand-icon {
width: 42px;
height: auto;
}

.brand-name {
font-family: 'Montserrat', sans-serif;
font-size: 2.2rem;
font-weight: 800;
letter-spacing: -0.02em;
}

.apply {
color: var(--brand-blue);
}

.kpi {
color: var(--brand-green);
}

/* =========================================================
4. MARKETING LANDING PAGE SYSTEM (/index.html)
========================================================= */

.hero-container {
max-width: 1150px;
margin: 0 auto;
background: white;
border: 1px solid var(--border);
border-radius: 30px;
padding: 60px 70px 70px 70px;
box-shadow:
0 40px 80px rgba(15, 23, 42, 0.08),
0 8px 20px rgba(15, 23, 42, 0.04);
}

.hero-grid {
display: grid;
grid-template-columns: 1.1fr 1fr;
align-items: center;
gap: 60px;
}

.nav-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 40px;
gap: 28px;
}

.nav-right {
display: flex;
gap: 20px;
align-items: center;
margin-left: auto;
}

.nav-link {
text-decoration: none;
font-weight: 600;
font-size: 0.9rem;
color: var(--brand-blue);
}

.nav-link:hover {
text-decoration: underline;
}

.nav-header .cta-button {
padding: 10px 20px;
font-size: 0.9rem;
white-space: nowrap;
}

h1 {
font-family: 'Montserrat', sans-serif;
font-size: clamp(2.6rem, 4vw, 3.6rem);
font-weight: 900;
letter-spacing: -0.04em;
line-height: 1.08;
margin-bottom: 24px;
}

.subheadline {
font-size: 1.2rem;
color: var(--text-soft);
margin-bottom: 34px;
}

.cta-button {
display: inline-block;
padding: 15px 28px;
border-radius: 999px;
background: var(--brand-blue);
color: white;
font-weight: 600;
text-decoration: none;
transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.cta-button:hover {
transform: translateY(-2px);
box-shadow: 0 12px 28px rgba(30, 64, 175, 0.25);
}

.future-note {
margin-top: 16px;
font-size: 0.9rem;
color: var(--muted);
}

.divider {
margin: 40px 0 24px 0;
height: 1px;
background: var(--border);
}

.positioning-title {
font-weight: 700;
margin-bottom: 12px;
}

.positioning-text {
font-size: 1rem;
color: var(--text-soft);
max-width: 620px;
}

.inline-brand {
display: inline-flex;
align-items: center;
gap: 6px;
font-weight: 600;
vertical-align: middle;
}

.inline-brand img {
width: 16px;
transform: translateY(-1px);
}

.hero-image {
display: flex;
align-items: center;
justify-content: center;
}

.hero-image-link,
.landing-proof-image-link {
display: block;
text-decoration: none;
color: inherit;
cursor: zoom-in;
}

.hero-visual-shell {
width: 100%;
max-width: 660px;
background: var(--surface);
border: 1px solid rgba(15, 23, 42, 0.10);
border-radius: 30px;
overflow: hidden;
box-shadow:
0 44px 90px rgba(15, 23, 42, 0.14),
0 14px 36px rgba(15, 23, 42, 0.08);
}

.hero-visual-header {
height: 46px;
display: flex;
align-items: center;
gap: 10px;
padding: 0 18px;
background: linear-gradient(180deg, #f8fbff 0%, #eef4fb 100%);
border-bottom: 1px solid rgba(15, 23, 42, 0.08);
}

.hero-visual-dot {
width: 10px;
height: 10px;
border-radius: 50%;
background: rgba(148, 163, 184, 0.35);
}

.hero-visual-screen {
background: var(--surface);
}

.hero-visual-screen img {
width: 100%;
display: block;
height: auto;
}

.landing-proof-section {
display: grid;
grid-template-columns: minmax(0, 1.15fr) minmax(300px, 0.85fr);
gap: 32px;
align-items: center;
margin-bottom: 70px;
}

.landing-proof-visual-wrap {
display: grid;
gap: 16px;
}

.landing-proof-kicker {
display: inline-block;
width: fit-content;
font-size: 0.72rem;
font-weight: 800;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--brand-blue);
background: rgba(30, 64, 175, 0.08);
padding: 6px 12px;
border-radius: 999px;
}

.landing-proof-heading {
font-size: clamp(1.5rem, 2.8vw, 2rem);
font-weight: 800;
letter-spacing: -0.03em;
line-height: 1.15;
color: var(--text-primary);
}

.landing-proof-visual {
background: var(--surface);
border: 1px solid var(--border);
border-radius: 24px;
overflow: hidden;
box-shadow: var(--shadow-soft);
}

.landing-proof-browser-header {
height: 44px;
display: flex;
align-items: center;
gap: 10px;
padding: 0 18px;
background: linear-gradient(180deg, #f8fbff 0%, #eef4fb 100%);
border-bottom: 1px solid rgba(15, 23, 42, 0.08);
}

.landing-proof-browser-dot {
width: 9px;
height: 9px;
border-radius: 50%;
background: rgba(148, 163, 184, 0.35);
}

.landing-proof-visual img {
width: 100%;
display: block;
}

.landing-proof-copy {
display: grid;
gap: 18px;
}

.landing-proof-block {
padding: 24px;
border-radius: 20px;
background: var(--surface-soft);
border: 1px solid var(--border);
box-shadow: var(--shadow-card);
display: flex;
align-items: flex-start;
gap: 16px;
}

.landing-proof-icon {
display: inline-flex;
align-items: center;
justify-content: center;
width: 42px;
height: 42px;
flex: 0 0 42px;
border-radius: 14px;
background: rgba(30, 64, 175, 0.08);
color: var(--brand-blue);
box-shadow: inset 0 0 0 1px rgba(30, 64, 175, 0.08);
}

.landing-proof-icon svg {
width: 22px;
height: 22px;
display: block;
stroke: currentColor;
stroke-width: 1.9;
stroke-linecap: round;
stroke-linejoin: round;
fill: none;
}

.landing-proof-icon-accent {
stroke: var(--brand-green);
fill: var(--brand-green);
}

.landing-proof-body {
flex: 1;
min-width: 0;
}

.landing-proof-title {
font-size: 1.05rem;
font-weight: 800;
margin-bottom: 10px;
color: var(--text-primary);
}

.landing-proof-text {
font-size: 0.95rem;
color: var(--text-secondary);
}

/* =========================================================
4A. PRODUCT PAGE SYSTEM (/app.html)
========================================================= */

.app-nav {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 60px;
}

.nav-links {
display: flex;
align-items: center;
gap: 24px;
}

.nav-links a {
text-decoration: none;
color: var(--text-soft);
font-weight: 600;
}

.nav-links .cta-button {
color: white;
}

.app-hero {
text-align: center;
max-width: 800px;
margin: 0 auto 60px auto;
}

.screenshots-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
gap: 30px;
margin-bottom: 80px;
}

.browser-mockup {
display: block;
text-decoration: none;
color: inherit;
cursor: zoom-in;
background: var(--surface);
border: 1px solid var(--border);
border-radius: var(--radius-sm);
overflow: hidden;
box-shadow: var(--shadow-card);
transition: transform 0.3s ease, box-shadow 0.3s ease;
cursor: zoom-in;
}

.browser-mockup:hover {
transform: translateY(-5px);
box-shadow: var(--shadow-soft);
}

.screenshot-meta {
padding: 18px 20px 22px 20px;
background: var(--surface);
}

.screenshot-title {
font-size: 1rem;
font-weight: 800;
color: var(--text-primary);
margin-bottom: 6px;
}

.screenshot-text {
font-size: 0.92rem;
line-height: 1.5;
color: var(--text-secondary);
}

.app-showcase-intro {
max-width: 760px;
margin: 0 auto 34px auto;
text-align: center;
color: var(--text-secondary);
font-size: 1.05rem;
}

.app-screenshot-grid {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 30px;
margin-bottom: 80px;
}

.browser-header {
background: var(--surface-soft);
padding: 12px;
display: flex;
gap: 8px;
border-bottom: 1px solid var(--border);
}

.dot {
width: 8px;
height: 8px;
border-radius: 50%;
background: var(--border);
}

.screenshot-container {
width: 100%;
aspect-ratio: 16 / 9;
overflow: hidden;
background: var(--surface-soft);
}

.screenshot-img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}

.modal {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(15, 23, 42, 0.9);
display: flex;
align-items: center;
justify-content: center;
opacity: 0;
visibility: hidden;
transition: all 0.3s ease;
z-index: 9999;
padding: 40px;
}

.modal:target {
opacity: 1;
visibility: visible;
}

.modal-content {
max-width: 1200px;
width: 100%;
position: relative;
background: var(--surface);
padding: 10px;
border-radius: var(--radius-sm);
}

.modal-content img {
width: 100%;
height: auto;
border-radius: 6px;
display: block;
}

.close-modal {
position: absolute;
top: -40px;
right: 0;
color: white;
font-size: 30px;
text-decoration: none;
font-weight: bold;
}

.modal-overlay {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
cursor: zoom-out;
}

.app-section-title {
text-align: center;
font-size: 1.5rem;
margin-bottom: 40px;
color: var(--brand-blue);
}

.app-section-lead {
max-width: 760px;
margin: -22px auto 40px auto;
text-align: center;
color: var(--text-secondary);
font-size: 1.02rem;
}

.app-features-grid {
margin-bottom: 0;
}

.app-feature-card {
height: 100%;
background: var(--surface);
border: 1px solid var(--border);
box-shadow: var(--shadow-card);
}

.app-feature-card .card-content {
height: 100%;
display: flex;
align-items: flex-start;
gap: 16px;
}

.app-feature-icon {
display: inline-flex;
align-items: center;
justify-content: center;
width: 44px;
height: 44px;
flex: 0 0 44px;
border-radius: 14px;
background: rgba(30, 64, 175, 0.08);
color: var(--brand-blue);
box-shadow: inset 0 0 0 1px rgba(30, 64, 175, 0.08);
}

.app-feature-icon svg {
width: 24px;
height: 24px;
display: block;
stroke: currentColor;
stroke-width: 1.9;
stroke-linecap: round;
stroke-linejoin: round;
fill: none;
}

.app-feature-icon-accent {
stroke: var(--brand-green);
fill: var(--brand-green);
}

.app-feature-body {
flex: 1;
min-width: 0;
}

.pricing-table-wrapper {
margin: 60px 0;
overflow-x: auto;
}

.app-pricing-title {
text-align: center;
margin-bottom: 30px;
color: var(--brand-blue);
}

.app-support-section {
display: grid;
grid-template-columns: minmax(0, 1.05fr) minmax(320px, 0.95fr);
gap: 30px;
align-items: center;
padding: 34px;
margin: 0 0 60px 0;
background: var(--surface-soft);
border: 1px solid var(--border);
border-radius: 24px;
box-shadow: var(--shadow-card);
}

.app-support-copy {
max-width: 520px;
}

.app-support-kicker {
display: inline-block;
font-size: 0.72rem;
font-weight: 800;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--brand-blue);
background: rgba(30, 64, 175, 0.08);
padding: 6px 12px;
border-radius: 999px;
margin-bottom: 14px;
}

.app-support-title {
font-size: clamp(1.7rem, 3vw, 2.15rem);
font-weight: 800;
letter-spacing: -0.03em;
line-height: 1.15;
margin-bottom: 14px;
color: var(--text-primary);
}

.app-support-text {
font-size: 1rem;
line-height: 1.7;
color: var(--text-secondary);
}

.app-temporary-note {
margin-top: 10px;
font-size: 0.88rem;
line-height: 1.5;
color: var(--muted);
}

.app-support-visual {
background: var(--surface);
border: 1px solid var(--border);
border-radius: 22px;
overflow: hidden;
box-shadow: var(--shadow-card);
}

.app-support-visual img {
width: 100%;
display: block;
}

.app-analytics-section {
display: grid;
grid-template-columns: minmax(300px, 0.9fr) minmax(0, 1.1fr);
gap: 30px;
align-items: center;
padding: 34px;
margin: 0 0 60px 0;
background: var(--surface);
border: 1px solid var(--border);
border-radius: 24px;
box-shadow: var(--shadow-card);
}

.app-analytics-copy {
max-width: 420px;
}

.app-analytics-kicker {
display: inline-block;
font-size: 0.72rem;
font-weight: 800;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--brand-blue);
background: rgba(30, 64, 175, 0.08);
padding: 6px 12px;
border-radius: 999px;
margin-bottom: 14px;
}

.app-analytics-title {
font-size: clamp(1.7rem, 3vw, 2.15rem);
font-weight: 800;
letter-spacing: -0.03em;
line-height: 1.15;
margin-bottom: 14px;
color: var(--text-primary);
}

.app-analytics-text {
font-size: 1rem;
line-height: 1.7;
color: var(--text-secondary);
}

.app-analytics-visual-link {
display: block;
text-decoration: none;
color: inherit;
cursor: zoom-in;
}

.app-analytics-visual {
background: var(--surface);
border: 1px solid var(--border);
border-radius: 22px;
overflow: hidden;
box-shadow: var(--shadow-soft);
}

.app-analytics-browser-header {
height: 44px;
display: flex;
align-items: center;
gap: 10px;
padding: 0 18px;
background: var(--surface-soft);
border-bottom: 1px solid var(--border);
}

.app-analytics-browser-dot {
width: 9px;
height: 9px;
border-radius: 50%;
background: rgba(148, 163, 184, 0.35);
}

.app-analytics-visual img {
width: 100%;
display: block;
}

.pricing-table {
width: 100%;
border-collapse: collapse;
background: var(--surface-soft);
border-radius: 20px;
overflow: hidden;
}

.pricing-table th,
.pricing-table td {
padding: 20px;
border-bottom: 1px solid var(--border);
text-align: left;
}

.pricing-table th {
background: var(--brand-blue);
font-weight: 800;
color: white;
}

.pricing-highlight {
color: var(--brand-blue);
font-weight: 800;
background: rgba(30, 64, 175, 0.05);
}

.app-final-cta {
text-align: center;
padding: 60px;
background: linear-gradient(180deg, rgba(30, 64, 175, 0.10) 0%, rgba(30, 64, 175, 0.16) 100%);
border: 1px solid rgba(30, 64, 175, 0.14);
border-radius: var(--radius-lg);
margin-top: 80px;
box-shadow: var(--shadow-soft);
}

.app-final-cta .article-title,
.app-final-cta .subheadline {
color: var(--text-primary);
}

.app-final-cta .subheadline {
max-width: 640px;
margin: 0 auto 34px auto;
color: var(--text-secondary);
}

.app-final-cta .cta-button {
background: var(--brand-blue);
color: white;
}

.app-footer-brand-icon {
width: 24px;
}

.app-footer-brand-name {
font-size: 1.2rem;
}

/* =========================================================
5. ARTICLES LIBRARY SYSTEM (/articles/index.html)
========================================================= */

.intelligence-container {
max-width: 1150px;
margin: 0 auto;
background: white;
border: 1px solid var(--border);
border-radius: 30px;
padding: 60px 70px 70px 70px;
box-shadow:
0 40px 80px rgba(15, 23, 42, 0.08),
0 8px 20px rgba(15, 23, 42, 0.04);
}

.hero {
max-width: 760px;
margin-top: 44px;
margin-bottom: 60px;
}

.hero h1 {
font-size: clamp(2.6rem, 4vw, 3.4rem);
}

.hero-subheadline {
font-size: 1.2rem;
color: var(--text-soft);
margin-bottom: 30px;
}

.hero-cta {
display: inline-block;
padding: 15px 28px;
border-radius: 999px;
background: var(--brand-blue);
color: white;
font-weight: 600;
text-decoration: none;
transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.hero-cta:hover {
transform: translateY(-2px);
box-shadow: 0 12px 28px rgba(30, 64, 175, 0.25);
}

.hero-jump-link {
display: inline-block;
color: var(--brand-blue);
font-weight: 700;
text-decoration: none;
margin-bottom: 4px;
}

.hero-jump-link:hover {
text-decoration: underline;
}

.hero-support {
margin-top: 20px;
font-size: 0.95rem;
color: var(--muted);
}

.section-divider {
margin: 50px 0 40px 0;
height: 1px;
background: var(--border);
}

.featured-wrapper {
margin-bottom: 70px;
}

.featured-label {
display: inline-block;
font-size: 0.75rem;
font-weight: 700;
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--brand-blue);
background: rgba(30, 64, 175, 0.08);
padding: 8px 16px;
border-radius: 999px;
margin-bottom: 28px;
}

/* CARD SYSTEM */

.card {
display: block;
text-decoration: none;
border-radius: 18px;
overflow: hidden;
background: #ffffff;
transition: transform 0.25s ease, box-shadow 0.25s ease;
box-shadow: 0 10px 30px rgba(15, 23, 42, 0.06);
}

.card:hover {
transform: translateY(-4px);
box-shadow: 0 20px 55px rgba(15, 23, 42, 0.10);
}

.card-image img {
width: 100%;
display: block;
object-fit: cover;
}

.card.featured .card-image img {
height: 340px;
}

.card.standard .card-image img {
height: 220px;
}

.card-content {
padding: 22px 24px;
}

.card-tag {
font-size: 0.75rem;
font-weight: 700;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--muted);
margin-bottom: 10px;
}

.card-title {
font-size: 1.15rem;
line-height: 1.4;
color: var(--text);
}

.card-subtext {
font-size: 0.95rem;
color: var(--text-soft);
margin-top: 8px;
line-height: 1.5;
}

.articles-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
gap: 28px;
margin-bottom: 70px;
}

.articles-cta {
padding: 40px 34px;
text-align: center;
background: #f8fafc;
border-radius: 18px;
border: 1px solid var(--border);
}

.articles-cta h3 {
font-size: 1.4rem;
margin-bottom: 12px;
}

.articles-cta p {
color: var(--text-soft);
margin-bottom: 24px;
}

.articles-cta-button {
display: inline-block;
padding: 12px 22px;
border-radius: 999px;
background: var(--brand-blue);
color: white;
font-weight: 600;
text-decoration: none;
}

/* =========================================================
6. ARTICLE DETAIL PAGE SYSTEM (/articles/*.html)
========================================================= */

.article-page {
max-width: 900px;
margin: 0 auto;
background: #ffffff;
border: 1px solid var(--border);
border-radius: 30px;
padding: 60px 70px 70px 70px;
box-shadow:
0 40px 80px rgba(15, 23, 42, 0.08),
0 8px 20px rgba(15, 23, 42, 0.04);
}

/* ARTICLE HERO IMAGE */

.article-hero-image {
margin: 40px 0 50px 0;
}

.article-hero-image img {
width: 100%;
height: auto;
border-radius: 24px;
object-fit: cover;
box-shadow:
0 30px 60px rgba(15, 23, 42, 0.12),
0 8px 20px rgba(15, 23, 42, 0.06);
}

/* HEADER */

.article-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 40px;
}

.article-logo-img {
height: 42px;
}

.article-nav {
display: flex;
align-items: center;
gap: 14px;
}

.article-nav a {
text-decoration: none;
font-weight: 600;
color: var(--brand-blue);
}

.article-header-cta {
display: inline-block;
padding: 8px 18px;
border-radius: 999px;
background: var(--brand-blue);
color: white;
font-size: 0.85rem;
font-weight: 700;
text-decoration: none;
box-shadow: var(--shadow-card);
transition: transform var(--transition-fast), box-shadow var(--transition-fast);
}

.article-nav a.article-header-cta {
color: white;
}

.article-header-cta:hover {
transform: translateY(-1px);
box-shadow: var(--shadow-soft);
}

/* TITLE BLOCK */

.article-title-block {
margin-bottom: 24px;
}

.article-kicker {
font-size: 0.75rem;
text-transform: uppercase;
letter-spacing: 0.12em;
font-weight: 700;
color: var(--muted);
margin-bottom: 10px;
}

.article-title {
font-family: 'Montserrat', sans-serif;
font-size: clamp(2.2rem, 4vw, 3rem);
font-weight: 900;
letter-spacing: -0.03em;
line-height: 1.15;
margin-bottom: 16px;
}

.article-subtitle {
font-size: 1.15rem;
color: var(--text-soft);
}

/* META */

.article-meta {
display: flex;
flex-wrap: wrap;
gap: 14px;
align-items: center;
font-size: 0.9rem;
color: var(--muted);
margin: 28px 0 40px 0;
}

.article-meta-divider {
width: 4px;
height: 4px;
background: var(--border);
border-radius: 50%;
}

.article-tag-pill {
background: rgba(30, 64, 175, 0.08);
color: var(--brand-blue);
padding: 6px 12px;
border-radius: 999px;
font-size: 0.75rem;
font-weight: 700;
}

/* ARTICLE BODY */

.article-content {
font-size: 1.05rem;
line-height: 1.75;
}

.article-content p {
margin-bottom: 20px;
color: var(--text);
}

.article-content h2 {
font-size: 1.6rem;
margin: 50px 0 18px 0;
font-weight: 800;
}

.article-content h3 {
font-size: 1.2rem;
margin: 28px 0 12px 0;
font-weight: 700;
}

.article-content ul,
.article-content ol {
margin: 0 0 24px 20px;
}

.article-content li {
margin-bottom: 10px;
}

.article-content a {
color: var(--brand-blue);
font-weight: 600;
text-decoration: underline;
}

/* TABLES */

.article-content table {
width: 100%;
border-collapse: collapse;
margin: 30px 0;
font-size: 0.95rem;
}

.article-content th,
.article-content td {
border: 1px solid var(--border);
padding: 12px;
text-align: left;
}

.article-content th {
background: #f8fafc;
font-weight: 700;
}

/* CALLOUT */

.article-callout {
border-left: 4px solid var(--brand-blue);
background: #f8fafc;
padding: 20px;
margin: 30px 0;
border-radius: 8px;
}

.article-callout-title {
font-weight: 700;
margin-bottom: 8px;
}

/* FOOTER CTA */

.article-footer {
margin-top: 60px;
}

.article-footer-cta {
padding: 30px;
border-radius: 20px;
background: #f8fafc;
border: 1px solid var(--border);
display: flex;
justify-content: space-between;
align-items: center;
gap: 30px;
flex-wrap: wrap;
}

.article-footer-cta-text {
max-width: 500px;
font-size: 0.95rem;
color: var(--text-soft);
}

.article-footer-cta-highlight {
display: block;
font-weight: 700;
margin-bottom: 6px;
color: var(--text);
}

.article-footer-cta-button {
display: inline-block;
padding: 12px 24px;
border-radius: 999px;
background: var(--brand-blue);
color: white;
font-weight: 600;
text-decoration: none;
}

.article-footer-meta {
margin-top: 18px;
display: flex;
justify-content: center;
align-items: center;
gap: 12px;
flex-wrap: wrap;
}

.article-footer-legal {
display: flex;
align-items: center;
justify-content: center;
gap: 0;
flex-wrap: wrap;
}

.article-footer-legal > * {
font-size: 0.78rem;
font-weight: 500;
line-height: 1;
color: rgba(100, 116, 139, 0.82);
}

.article-footer-legal > * + * {
position: relative;
margin-left: 12px;
padding-left: 12px;
}

.article-footer-legal > * + *::before {
content: "";
position: absolute;
left: 0;
top: 50%;
width: 1px;
height: 10px;
background: rgba(148, 163, 184, 0.45);
transform: translateY(-50%);
}

.article-footer-legal a {
color: rgba(100, 116, 139, 0.82);
text-decoration: none;
}

.article-footer-legal a:hover {
color: var(--text-secondary);
}

.article-footer-copyright {
white-space: nowrap;
}

/* =========================================================
7. RESPONSIVE RULES
========================================================= */

@media (max-width: 900px) {

.hero-grid {
grid-template-columns: 1fr;
text-align: center;
}

.hero-image {
order: 0;
margin-top: 30px;
margin-bottom: 0;
}

.positioning-text {
margin: 0 auto;
}

.brand-lockup {
justify-content: center;
}

.nav-header {
flex-direction: column;
align-items: center;
}

.nav-right {
margin-left: 0;
}

.landing-proof-section,
.app-screenshot-grid {
grid-template-columns: 1fr;
}

.screenshots-grid {
grid-template-columns: 1fr;
}

.app-support-section {
grid-template-columns: 1fr;
}

.app-analytics-section {
grid-template-columns: 1fr;
}
}

@media (max-width: 768px) {

body {
padding: 40px 14px;
}

.hero-container,
.intelligence-container,
.article-page {
padding: 40px 24px 50px 24px;
border-radius: 24px;
}

.brand-name {
font-size: 1.9rem;
}

.brand-icon {
width: 34px;
}

.nav-right {
width: 100%;
justify-content: center;
flex-wrap: wrap;
gap: 14px;
}

.nav-header .cta-button {
width: 100%;
max-width: 220px;
text-align: center;
padding: 8px 18px;
font-size: 0.95rem;
}

.hero h1 {
font-size: 2.2rem;
}

.hero {
margin-top: 32px;
}

.cta-button {
padding: 13px 24px;
font-size: 0.92rem;
white-space: nowrap;
line-height: 1.2;
}

.articles-cta-button {
white-space: nowrap;
font-size: 0.92rem;
line-height: 1.2;
}

.app-nav {
flex-direction: column;
gap: 20px;
}

.app-hero h1 {
font-size: 2rem;
}

.modal {
padding: 10px;
}

.article-header {
flex-direction: column;
align-items: flex-start;
gap: 16px;
}

.article-nav {
flex-wrap: wrap;
}

.article-footer-cta {
justify-content: center;
text-align: center;
}

.article-footer-meta,
.article-footer-legal {
justify-content: center;
text-align: center;
}

.article-footer-legal > * + * {
margin-left: 10px;
padding-left: 10px;
}

.article-footer-cta-text {
max-width: none;
}

.article-footer-cta-button {
margin: 0 auto;
}

.pricing-table th,
.pricing-table td {
padding: 14px 12px;
font-size: 0.88rem;
}
}