/* plugin-page.css
 * Styles for rf_plugin Custom Post Type pages.
 * Enqueued conditionally only on rf_plugin posts — see inc/enqueue.php.
 * Source: PAGE-PLUGIN-TIMESHEET.html <style> block (SEC-09 through SEC-27, SEC-11)
 * Excludes: body/container reset (global.css), SEC-16 nav (sec-16-nav.css),
 *           SEC-08 footer (sec-08-footer.css), megamenu/nav-link-primary (sec-16-nav.css)
 */

/* Shared button family */
.btn { display: inline-flex; align-items: center; gap: var(--space-2); padding: 13px 22px; border-radius: var(--radius-sm); font-family: var(--font-body); font-size: var(--text-base); font-weight: var(--fw-semibold); text-decoration: none; border: 1.5px solid transparent; transition: all var(--transition); white-space: nowrap; }
.btn-primary { background: var(--primary); color: var(--text-inverse); }
.btn-primary:hover { background: var(--primary-hover); }
.btn-secondary { border-color: var(--primary); color: var(--primary); }
.btn-secondary:hover { background: var(--primary-soft); }
.btn-accent { display: inline-flex; align-items: center; gap: var(--space-2); padding: 14px 24px; border-radius: var(--radius-sm); font-size: var(--text-base); font-weight: var(--fw-semibold); text-decoration: none; background: var(--accent); color: var(--text-inverse); transition: background var(--transition); }
.btn-accent:hover { background: var(--accent-hover); }
.btn-textlink { display: inline-flex; align-items: center; gap: 6px; padding: 14px 4px; background: transparent; border: none; color: var(--text-heading); font-size: var(--text-base); font-weight: var(--fw-semibold); text-decoration: none; border-bottom: 1px solid transparent; transition: border-color var(--transition); }
.btn-textlink:hover { border-bottom-color: var(--text-heading); }
.container-narrow { max-width: var(--container-narrow); margin: 0 auto; padding: 0 var(--container-px); }

/* ===== SEC-09 plugin-page-hero (v1.1) ============================= */
.sec-09 { padding: var(--space-20) 0 var(--space-24); background: var(--bg-page); }
.pp-hero-grid { display: grid; grid-template-columns: 1fr 1.2fr; gap: var(--space-14); align-items: center; }
.pp-hero-badge { display: inline-block; padding: 6px 14px; background: var(--accent-soft); color: var(--accent-hover); font-size: var(--text-xs); font-weight: var(--fw-bold); text-transform: uppercase; letter-spacing: var(--ls-widest); border-radius: var(--radius-full); margin-bottom: var(--space-5); }
.pp-hero-h1 { font-family: var(--font-display); font-size: var(--text-6xl); font-weight: var(--fw-medium); line-height: var(--lh-tight); letter-spacing: var(--ls-tighter); color: var(--text-heading); margin: 0 0 var(--space-5) 0; }
.pp-hero-tagline { font-size: var(--text-xl); line-height: var(--lh-normal); color: var(--text-body); margin: 0 0 var(--space-6) 0; }
.pp-hero-price-block { display: flex; align-items: baseline; gap: var(--space-4); padding: var(--space-5) 0; border-top: 1px solid var(--divider); border-bottom: 1px solid var(--divider); margin-bottom: var(--space-6); flex-wrap: wrap; }
.pp-hero-price-num { font-family: var(--font-display); font-size: 54px; font-weight: var(--fw-medium); line-height: 1; letter-spacing: var(--ls-tighter); color: var(--text-heading); }
.pp-hero-price-details { display: flex; flex-direction: column; gap: 2px; flex: 1; min-width: 200px; }
.pp-hero-price-period { font-size: var(--text-base); font-weight: var(--fw-semibold); color: var(--text-heading); margin: 0; }
.pp-hero-price-note { font-size: var(--text-sm); color: var(--text-muted); margin: 0; }
.pp-hero-price-licensing { font-size: var(--text-xs); color: var(--text-subtle); margin: 2px 0 0 0; }
.pp-hero-price-tag { font-size: var(--text-xs); font-weight: var(--fw-bold); text-transform: uppercase; letter-spacing: var(--ls-wider); padding: 4px 10px; background: var(--accent-soft); color: var(--accent-hover); border-radius: var(--radius-full); align-self: center; white-space: nowrap; }
.pp-hero-ctas { display: flex; gap: var(--space-3); margin-bottom: var(--space-3); align-items: center; flex-wrap: wrap; }
.pp-hero-demo-note { font-size: var(--text-sm); color: var(--text-muted); margin: 0 0 var(--space-6) 0; display: flex; align-items: center; gap: 6px; }
.pp-hero-demo-note svg { color: var(--accent); flex-shrink: 0; }
.pp-hero-trust { font-size: var(--text-sm); color: var(--text-muted); }
.pp-hero-trust span { margin: 0 var(--space-2); color: var(--text-subtle); }
.pp-hero-mock { aspect-ratio: 16/10; background: linear-gradient(135deg, #E8EFE5 0%, #F7FAF6 50%, #DDE7DA 100%); border: 1px solid var(--border); border-radius: var(--radius-xl); box-shadow: var(--shadow-xl); display: flex; align-items: center; justify-content: center; color: var(--text-muted); font-size: var(--text-sm); padding: var(--space-8); }
.pp-hero-caption { margin-top: var(--space-4); font-size: var(--text-sm); color: var(--text-muted); text-align: center; }
@media (max-width: 900px) { .pp-hero-grid { grid-template-columns: 1fr; gap: var(--space-10); } .pp-hero-h1 { font-size: var(--text-5xl); } .sec-09 { padding: var(--space-14) 0 var(--space-16); } }

/* ===== SEC-18 problem ============================================== */
.sec-18 { padding: var(--section-py) 0; background: var(--bg-page); }
.sec-18-inner { max-width: 760px; margin: 0 auto; text-align: center; }
.sec-18-label { font-size: var(--text-xs); font-weight: var(--fw-bold); text-transform: uppercase; letter-spacing: var(--ls-widest); color: var(--text-muted); margin: 0 0 var(--space-5) 0; }
.sec-18-heading { font-family: var(--font-display); font-size: var(--text-4xl); font-weight: var(--fw-medium); line-height: var(--lh-snug); letter-spacing: var(--ls-tight); color: var(--text-heading); margin: 0 0 var(--space-6) 0; }
.sec-18-text { font-size: var(--text-lg); line-height: var(--lh-relaxed); color: var(--text-body); margin: 0; }

/* ===== SEC-19 what-is (v1.1) ======================================= */
.sec-19 { padding: var(--space-12) 0; background: var(--bg-surface); border-top: 1px solid var(--divider); border-bottom: 1px solid var(--divider); }
.sec-19-inner { max-width: 820px; margin: 0 auto; display: grid; grid-template-columns: auto 1fr; gap: var(--space-8); align-items: baseline; }
.sec-19-label { font-size: var(--text-xs); font-weight: var(--fw-bold); text-transform: uppercase; letter-spacing: var(--ls-widest); color: var(--text-muted); margin: 0; white-space: nowrap; }
.sec-19-heading { font-family: var(--font-display); font-size: var(--text-xl); font-weight: var(--fw-medium); line-height: var(--lh-snug); color: var(--text-heading); margin: 0 0 var(--space-2) 0; }
.sec-19-text { font-size: var(--text-md); line-height: var(--lh-relaxed); color: var(--text-body); margin: 0; }
@media (max-width: 640px) { .sec-19-inner { grid-template-columns: 1fr; gap: var(--space-3); } }

/* ===== SEC-20 value-prop-split ===================================== */
.sec-20 { padding: var(--section-py) 0; background: var(--bg-page); }
.sec-20-grid { display: grid; grid-template-columns: 1fr 1.1fr; gap: var(--space-14); align-items: center; }
.sec-20-h2 { font-family: var(--font-display); font-size: var(--text-5xl); font-weight: var(--fw-medium); line-height: var(--lh-snug); letter-spacing: var(--ls-tight); color: var(--text-heading); margin: 0 0 var(--space-6) 0; }
.sec-20-h2 em { color: var(--text-heading); font-style: italic; }
.sec-20-body p { font-size: var(--text-lg); line-height: var(--lh-relaxed); color: var(--text-body); margin: 0 0 var(--space-4) 0; }
.sec-20-body p:last-child { margin-bottom: 0; }
.sec-20-mock { aspect-ratio: 4/3; background: linear-gradient(135deg, #E8EFE5 0%, #F7FAF6 100%); border: 1px solid var(--border); border-radius: var(--radius-xl); box-shadow: var(--shadow-lg); display: flex; align-items: center; justify-content: center; color: var(--text-muted); font-size: var(--text-sm); padding: var(--space-6); }
@media (max-width: 900px) { .sec-20-grid { grid-template-columns: 1fr; gap: var(--space-8); } .sec-20-h2 { font-size: var(--text-4xl); } }

/* ===== SEC-21 gains — v1.1 accordion =============================== */
.sec-21 { padding: var(--section-py-lg) 0; background: var(--bg-surface); }
.sec-21-header { text-align: center; max-width: 820px; margin: 0 auto var(--space-16) auto; }
.sec-21-eyebrow { font-size: var(--text-base); font-weight: var(--fw-bold); text-transform: uppercase; letter-spacing: var(--ls-widest); color: var(--accent-hover); margin: 0 0 var(--space-4) 0; }
.sec-21-h2 { font-family: var(--font-display); font-size: var(--text-7xl); font-weight: var(--fw-medium); line-height: var(--lh-tight); letter-spacing: var(--ls-tighter); color: var(--text-heading); margin: 0 0 var(--space-4) 0; }
.sec-21-sub { font-size: var(--text-xl); line-height: var(--lh-normal); color: var(--text-body); margin: 0; }
@media (max-width: 900px) { .sec-21-h2 { font-size: var(--text-5xl); } .sec-21-sub { font-size: var(--text-lg); } .sec-21-header { margin-bottom: var(--space-12); } }
.gains-accordion { max-width: var(--container); margin: 0 auto; display: flex; flex-direction: column; gap: var(--space-3); }
.gain { background: var(--bg-surface); border: 1px solid var(--border); border-radius: var(--radius-lg); overflow: hidden; transition: all var(--transition); }
.gain[open] { background: var(--bg-muted); border-color: var(--border-strong); box-shadow: var(--shadow-md); }
.gain-summary { list-style: none; cursor: pointer; padding: var(--space-6) var(--space-8); display: grid; grid-template-columns: 48px 1fr auto; align-items: center; gap: var(--space-5); transition: background var(--transition); }
.gain-summary::-webkit-details-marker { display: none; }
.gain-summary:hover { background: var(--primary-soft); }
.gain[open] .gain-summary:hover { background: transparent; }
.gain-num { font-family: var(--font-display); font-size: var(--text-base); font-weight: var(--fw-medium); color: var(--text-muted); }
.gain[open] .gain-num { color: var(--accent-hover); }
.gain-title { font-family: var(--font-display); font-size: var(--text-2xl); font-weight: var(--fw-medium); line-height: var(--lh-snug); color: var(--text-heading); margin: 0; }
.gain-toggle { width: 36px; height: 36px; border-radius: var(--radius-full); background: var(--bg-page); display: inline-flex; align-items: center; justify-content: center; color: var(--text-muted); transition: all var(--transition); }
.gain[open] .gain-toggle { background: var(--accent); color: var(--text-inverse); }
.gain[open] .gain-toggle svg { transform: rotate(45deg); }
.gain-toggle svg { transition: transform var(--transition); }
.gain-content { padding: 0 var(--space-8) var(--space-8) var(--space-8); display: grid; grid-template-columns: 1fr 1.1fr; gap: var(--space-10); align-items: center; }
.gain-body { font-size: var(--text-lg); line-height: var(--lh-relaxed); color: var(--text-body); margin: 0; }
.gain-body em { font-style: italic; color: var(--text-heading); }
.gain-mock { aspect-ratio: 4/3; background: linear-gradient(135deg, #E8EFE5 0%, #F7FAF6 50%, #DDE7DA 100%); border: 1px solid var(--border); border-radius: var(--radius-md); box-shadow: var(--shadow-md); display: flex; align-items: center; justify-content: center; color: var(--text-muted); font-size: var(--text-sm); padding: var(--space-6); text-align: center; }
@media (max-width: 900px) { .gain-summary { grid-template-columns: 36px 1fr auto; padding: var(--space-5); gap: var(--space-3); } .gain-title { font-size: var(--text-lg); } .gain-content { grid-template-columns: 1fr; padding: 0 var(--space-5) var(--space-5); gap: var(--space-5); } }

/* ===== SEC-22 capabilities-list — v1.1 ============================= */
.sec-22 { padding: var(--section-py) 0; background: var(--bg-page); }
.sec-22-header { text-align: center; max-width: 720px; margin: 0 auto var(--space-12) auto; }
.sec-22-eyebrow { font-size: var(--text-xs); font-weight: var(--fw-bold); text-transform: uppercase; letter-spacing: var(--ls-widest); color: var(--text-muted); margin: 0 0 var(--space-3) 0; }
.sec-22-h2 { font-family: var(--font-display); font-size: var(--text-5xl); font-weight: var(--fw-medium); line-height: var(--lh-snug); letter-spacing: var(--ls-tight); color: var(--text-heading); margin: 0; }
.cap-list { display: flex; flex-direction: column; gap: var(--space-6); max-width: var(--container); margin: 0 auto; }
.cap-card { padding: var(--space-8); background: var(--bg-surface); border: 1px solid var(--border); border-radius: var(--radius-lg); display: grid; grid-template-columns: 1fr 1.1fr; gap: var(--space-10); align-items: center; }
.cap-card:nth-child(even) { grid-template-columns: 1.1fr 1fr; }
.cap-card:nth-child(even) .cap-body { order: 2; }
.cap-card:nth-child(even) .cap-visual { order: 1; }
.cap-tag { display: inline-block; font-family: var(--font-body); font-size: var(--text-xs); font-weight: var(--fw-bold); text-transform: uppercase; letter-spacing: var(--ls-widest); color: var(--accent-hover); margin: 0 0 var(--space-3) 0; }
.cap-title { font-family: var(--font-display); font-size: var(--text-3xl); font-weight: var(--fw-medium); line-height: var(--lh-snug); color: var(--text-heading); margin: 0 0 var(--space-5) 0; }
.cap-bullets { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: var(--space-3); }
.cap-bullets li { display: flex; align-items: flex-start; gap: var(--space-3); font-size: var(--text-md); line-height: var(--lh-normal); color: var(--text-body); }
.cap-bullets li svg { flex-shrink: 0; margin-top: 3px; color: var(--accent); }
.cap-visual { aspect-ratio: 4/3; background: linear-gradient(135deg, #E8EFE5 0%, #F7FAF6 50%, #DDE7DA 100%); border: 1px solid var(--border); border-radius: var(--radius-md); box-shadow: var(--shadow-sm); display: flex; align-items: center; justify-content: center; padding: var(--space-5); position: relative; overflow: hidden; }
.cap-diagram { width: 100%; height: 100%; }
@media (max-width: 900px) { .cap-card, .cap-card:nth-child(even) { grid-template-columns: 1fr; gap: var(--space-6); } .cap-card:nth-child(even) .cap-body { order: 1; } .cap-card:nth-child(even) .cap-visual { order: 2; } .cap-title { font-size: var(--text-2xl); } }

/* ===== SEC-23 integrations-pill-row ================================ */
.sec-23 { padding: var(--space-14) 0; background: var(--bg-page); border-top: 1px dashed var(--border); border-bottom: 1px dashed var(--border); }
.sec-23-inner { display: flex; align-items: center; flex-wrap: wrap; gap: var(--space-4); max-width: var(--container-narrow); margin: 0 auto; }
.sec-23-label { font-size: var(--text-xs); font-weight: var(--fw-bold); text-transform: uppercase; letter-spacing: var(--ls-widest); color: var(--text-muted); margin: 0; flex-shrink: 0; }
.integrations-pill { display: inline-flex; align-items: center; padding: 6px 14px; background: var(--bg-muted); border: 1px solid var(--border); border-radius: var(--radius-full); font-family: var(--font-body); font-size: var(--text-sm); color: var(--text-heading); text-decoration: none; transition: all var(--transition); }
.integrations-pill:hover { background: var(--primary-soft); border-color: var(--border-strong); }

/* ===== SEC-24 trust-stats-plus-testimonials ======================== */
.sec-24 { padding: var(--section-py) 0; background: var(--bg-surface); }
.stats-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-10); max-width: var(--container-narrow); margin: 0 auto var(--space-14) auto; padding-bottom: var(--space-14); border-bottom: 1px solid var(--divider); }
.stat-item { text-align: center; }
.stat-number { font-family: var(--font-display); font-size: var(--text-6xl); font-weight: var(--fw-medium); line-height: 1; letter-spacing: var(--ls-tighter); color: var(--text-heading); margin: 0 0 var(--space-3) 0; }
.stat-number-unit { font-size: var(--text-3xl); color: var(--text-muted); font-weight: var(--fw-regular); }
.stat-label { font-size: var(--text-md); color: var(--text-body); margin: 0; line-height: var(--lh-normal); }
.tm-wrap { max-width: 760px; margin: 0 auto; text-align: center; position: relative; }
.tm-mark { font-family: var(--font-display); font-size: 96px; font-weight: var(--fw-medium); line-height: 1; color: var(--accent-soft); position: absolute; left: -20px; top: -30px; }
.tm-quote { font-family: var(--font-display); font-size: var(--text-3xl); font-weight: var(--fw-medium); font-style: italic; line-height: var(--lh-snug); color: var(--text-heading); margin: 0 0 var(--space-6) 0; position: relative; z-index: 1; }
.tm-attr { display: inline-flex; align-items: center; gap: var(--space-4); }
.tm-avatar { width: 48px; height: 48px; border-radius: var(--radius-full); background: var(--accent-soft); color: var(--accent-hover); display: inline-flex; align-items: center; justify-content: center; font-family: var(--font-body); font-weight: var(--fw-bold); font-size: var(--text-base); }
.tm-meta { text-align: left; }
.tm-name { font-size: var(--text-base); font-weight: var(--fw-semibold); color: var(--text-heading); margin: 0; line-height: var(--lh-snug); }
.tm-role { font-size: var(--text-sm); color: var(--text-muted); margin: 2px 0 0 0; }
@media (max-width: 640px) { .stats-row { grid-template-columns: 1fr; gap: var(--space-6); } .stat-number { font-size: var(--text-5xl); } .tm-quote { font-size: var(--text-xl); } .tm-mark { font-size: 72px; left: 0; top: -10px; } }

/* ===== SEC-25 deployment-options-duo =============================== */
.sec-25 { padding: var(--section-py) 0; background: var(--bg-page); }
.sec-25-header { text-align: center; max-width: 720px; margin: 0 auto var(--space-12) auto; }
.sec-25-eyebrow { font-size: var(--text-xs); font-weight: var(--fw-bold); text-transform: uppercase; letter-spacing: var(--ls-widest); color: var(--text-muted); margin: 0 0 var(--space-3) 0; }
.sec-25-h2 { font-family: var(--font-display); font-size: var(--text-5xl); font-weight: var(--fw-medium); line-height: var(--lh-snug); letter-spacing: var(--ls-tight); color: var(--text-heading); margin: 0 0 var(--space-3) 0; }
.sec-25-sub { font-size: var(--text-lg); line-height: var(--lh-normal); color: var(--text-body); margin: 0; }
.deploy-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-6); max-width: var(--container-narrow); margin: 0 auto; }
.deploy-card { position: relative; padding: var(--space-8); background: var(--bg-surface); border: 1.5px solid var(--border); border-radius: var(--radius-xl); box-shadow: var(--shadow-md); display: flex; flex-direction: column; gap: var(--space-5); transition: all var(--transition); }
.deploy-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-lg); }
.deploy-card--featured { border-color: var(--accent); box-shadow: var(--shadow-xl); }
.deploy-card--featured .deploy-card-cta { background: var(--primary); color: var(--text-inverse); border-color: var(--primary); }
.deploy-card--featured .deploy-card-cta:hover { background: var(--primary-hover); border-color: var(--primary-hover); }
.deploy-card--featured .deploy-card-icon { background: var(--accent-soft); color: var(--accent-hover); }
.deploy-card-push { position: absolute; top: -12px; right: var(--space-6); padding: 4px 12px; background: var(--accent); color: var(--text-inverse); font-size: var(--text-xs); font-weight: var(--fw-bold); text-transform: uppercase; letter-spacing: var(--ls-wider); border-radius: var(--radius-full); white-space: nowrap; }
.deploy-card-icon { width: 48px; height: 48px; border-radius: var(--radius-md); background: linear-gradient(135deg, #EAF5FF 0%, #E2FBF3 100%); display: inline-flex; align-items: center; justify-content: center; color: var(--primary); }
.deploy-card-name { font-family: var(--font-display); font-size: var(--text-2xl); font-weight: var(--fw-medium); color: var(--text-heading); margin: 0; line-height: var(--lh-snug); }
.deploy-card-bullets { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: var(--space-3); }
.deploy-card-bullets li { display: flex; align-items: flex-start; gap: var(--space-3); font-size: var(--text-md); line-height: var(--lh-normal); color: var(--text-body); }
.deploy-card-bullets li::before { content: ''; width: 6px; height: 6px; margin-top: 8px; border-radius: var(--radius-full); background: var(--text-muted); flex-shrink: 0; }
.deploy-card-price { font-family: var(--font-display); font-size: var(--text-xl); font-weight: var(--fw-medium); color: var(--text-heading); margin: 0; }
.deploy-card-price-suffix { font-size: var(--text-base); color: var(--text-muted); font-weight: var(--fw-regular); }
.deploy-card-cta { display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2); padding: 12px 18px; font-family: var(--font-body); font-size: var(--text-base); font-weight: var(--fw-semibold); text-decoration: none; border-radius: var(--radius-sm); border: 1.5px solid var(--primary); background: transparent; color: var(--primary); transition: all var(--transition); margin-top: auto; }
.deploy-card-cta:hover { background: var(--primary-soft); }
@media (max-width: 900px) { .deploy-grid { grid-template-columns: 1fr; } }

/* ===== SEC-26 roles-gain-table ===================================== */
.sec-26 { padding: var(--section-py) 0; background: var(--bg-surface); }
.sec-26-header { text-align: center; max-width: 720px; margin: 0 auto var(--space-10) auto; }
.sec-26-eyebrow { font-size: var(--text-xs); font-weight: var(--fw-bold); text-transform: uppercase; letter-spacing: var(--ls-widest); color: var(--text-muted); margin: 0 0 var(--space-3) 0; }
.sec-26-h2 { font-family: var(--font-display); font-size: var(--text-5xl); font-weight: var(--fw-medium); line-height: var(--lh-snug); letter-spacing: var(--ls-tight); color: var(--text-heading); margin: 0; }
.roles-table { max-width: var(--container-narrow); margin: 0 auto; background: var(--bg-surface); border: 1px solid var(--border); border-radius: var(--radius-lg); overflow: hidden; }
.roles-row { display: grid; grid-template-columns: 220px 1fr; align-items: center; gap: var(--space-8); padding: var(--space-6) var(--space-8); border-top: 1px solid var(--divider); }
.roles-row:first-child { border-top: none; }
.roles-row-name { font-family: var(--font-display); font-size: var(--text-lg); font-weight: var(--fw-medium); color: var(--text-heading); margin: 0; }
.roles-row-name small { display: block; margin-top: 2px; font-family: var(--font-body); font-size: var(--text-sm); color: var(--text-muted); font-weight: var(--fw-regular); }
.roles-row-gain { font-size: var(--text-md); line-height: var(--lh-relaxed); color: var(--text-body); margin: 0; }
.roles-row-gain strong { color: var(--text-heading); font-weight: var(--fw-semibold); }
@media (max-width: 900px) { .roles-row { grid-template-columns: 1fr; gap: var(--space-2); padding: var(--space-5); } }

/* ===== inline-plugin-pricing ======================================= */
.inline-pricing { padding: var(--space-20) 0; background: var(--bg-page); }
.inline-pricing-header { text-align: center; max-width: 720px; margin: 0 auto var(--space-10) auto; }
.inline-pricing-eyebrow { font-size: var(--text-xs); font-weight: var(--fw-bold); text-transform: uppercase; letter-spacing: var(--ls-widest); color: var(--text-muted); margin: 0 0 var(--space-3) 0; }
.inline-pricing-h2 { font-family: var(--font-display); font-size: var(--text-5xl); font-weight: var(--fw-medium); line-height: var(--lh-snug); letter-spacing: var(--ls-tight); color: var(--text-heading); margin: 0; }
.price-card { display: grid; grid-template-columns: 1.2fr 1fr 1fr; gap: var(--space-5); max-width: var(--container-narrow); margin: 0 auto; align-items: stretch; }
.price-option { background: var(--bg-surface); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: var(--space-6); display: flex; flex-direction: column; gap: var(--space-3); }
.price-option--primary { background: var(--bg-muted); border: 2px solid var(--primary); box-shadow: var(--shadow-md); }
.price-option-label { font-size: var(--text-xs); font-weight: var(--fw-bold); text-transform: uppercase; letter-spacing: var(--ls-wider); color: var(--text-muted); margin: 0; }
.price-option-name { font-family: var(--font-display); font-size: var(--text-xl); font-weight: var(--fw-medium); color: var(--text-heading); margin: 0; line-height: var(--lh-snug); }
.price-option-price { display: flex; align-items: baseline; gap: var(--space-2); padding: var(--space-2) 0; }
.price-option-price-num { font-family: var(--font-display); font-size: 36px; font-weight: var(--fw-medium); color: var(--text-heading); line-height: 1; letter-spacing: var(--ls-tighter); }
.price-option-price-suffix { font-size: var(--text-sm); color: var(--text-muted); font-weight: var(--fw-medium); }
.price-option-renewal { font-size: var(--text-xs); color: var(--text-muted); margin: 0; }
.price-option-note { font-size: var(--text-sm); line-height: var(--lh-normal); color: var(--text-body); margin: 0; }
.price-option-licensing { font-size: var(--text-xs); color: var(--text-subtle); line-height: var(--lh-relaxed); margin: 0; border-top: 1px dashed var(--divider); padding-top: var(--space-2); }
.price-option-save { display: inline-block; padding: 2px 8px; background: var(--accent-soft); color: var(--accent-hover); font-size: var(--text-xs); font-weight: var(--fw-bold); text-transform: uppercase; letter-spacing: var(--ls-wider); border-radius: var(--radius-full); align-self: flex-start; margin-top: var(--space-1); }
.price-option-cta { display: inline-flex; align-items: center; justify-content: center; gap: 6px; margin-top: auto; padding: 10px 14px; font-size: var(--text-sm); font-weight: var(--fw-semibold); text-decoration: none; border-radius: var(--radius-sm); border: 1px solid var(--primary); background: transparent; color: var(--primary); transition: all var(--transition); }
.price-option-cta:hover { background: var(--primary-soft); }
.price-option--primary .price-option-cta { background: var(--primary); color: var(--text-inverse); }
.price-option--primary .price-option-cta:hover { background: var(--primary-hover); }
@media (max-width: 900px) { .price-card { grid-template-columns: 1fr; } }

/* ===== SEC-27 cta-banner-mid ======================================= */
.sec-27 { padding: var(--space-14) 0; background: var(--bg-surface); }
.cta-card { max-width: 780px; margin: 0 auto; text-align: center; padding: var(--space-12) var(--space-10); background: var(--bg-page); border-radius: var(--radius-xl); box-shadow: var(--shadow-sm); position: relative; overflow: hidden; }
.cta-accent-ribbon { position: absolute; top: 0; left: 0; right: 0; height: 6px; background: var(--accent); }
.cta-eyebrow { font-size: var(--text-xs); font-weight: var(--fw-bold); text-transform: uppercase; letter-spacing: var(--ls-widest); color: var(--text-muted); margin: 0 0 var(--space-4) 0; }
.cta-heading { font-family: var(--font-display); font-size: var(--text-4xl); font-weight: var(--fw-medium); line-height: var(--lh-snug); letter-spacing: var(--ls-tight); color: var(--text-heading); margin: 0 0 var(--space-4) 0; }
.cta-dek { font-size: var(--text-lg); line-height: var(--lh-normal); color: var(--text-body); margin: 0 0 var(--space-8) 0; max-width: 540px; margin-inline: auto; }
.cta-actions { display: inline-flex; gap: var(--space-3); flex-wrap: wrap; justify-content: center; align-items: center; }

/* ===== SEC-11 FAQ ================================================== */
.sec-11 { padding: var(--section-py) 0; background: var(--bg-page); }
.faq-wrap { display: grid; grid-template-columns: 1fr 1.3fr; gap: var(--space-14); align-items: start; }
.faq-intro { position: sticky; top: calc(80px + var(--space-4)); }
.faq-eyebrow { font-size: var(--text-xs); font-weight: var(--fw-bold); text-transform: uppercase; letter-spacing: var(--ls-widest); color: var(--text-muted); margin: 0 0 var(--space-3) 0; }
.faq-heading { font-family: var(--font-display); font-size: var(--text-5xl); font-weight: var(--fw-medium); line-height: var(--lh-snug); letter-spacing: var(--ls-tight); color: var(--text-heading); margin: 0 0 var(--space-4) 0; }
.faq-dek { font-size: var(--text-lg); line-height: var(--lh-normal); color: var(--text-body); margin: 0; }
.faq-list { display: flex; flex-direction: column; gap: var(--space-2); }
.faq-item { background: var(--bg-surface); border: 1px solid var(--border); border-radius: var(--radius-lg); transition: all var(--transition); overflow: hidden; }
.faq-item[open] { border-color: var(--border-strong); box-shadow: var(--shadow-sm); }
.faq-question { list-style: none; cursor: pointer; padding: var(--space-5) var(--space-6); display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); font-family: var(--font-display); font-size: var(--text-xl); font-weight: var(--fw-medium); color: var(--text-heading); line-height: var(--lh-snug); }
.faq-question::-webkit-details-marker { display: none; }
.faq-question:hover, .faq-item[open] .faq-question { color: var(--accent-hover); }
.faq-icon { width: 32px; height: 32px; flex-shrink: 0; border-radius: var(--radius-full); background: var(--bg-muted); display: inline-flex; align-items: center; justify-content: center; transition: all var(--transition); }
.faq-item[open] .faq-icon { background: var(--accent); color: var(--text-inverse); }
.faq-icon svg { transition: transform var(--transition); }
.faq-item[open] .faq-icon svg { transform: rotate(45deg); }
.faq-answer { padding: 0 var(--space-6) var(--space-5) var(--space-6); font-size: var(--text-md); line-height: var(--lh-relaxed); color: var(--text-body); }
.faq-answer p { margin: 0 0 var(--space-3) 0; }
.faq-answer p:last-child { margin-bottom: 0; }
.faq-answer a { color: var(--link); text-decoration: underline; text-underline-offset: 3px; }
@media (max-width: 1000px) { .faq-wrap { grid-template-columns: 1fr; gap: var(--space-10); } .faq-intro { position: static; } }
@media (max-width: 640px) { .faq-heading { font-size: var(--text-4xl); } .faq-question { font-size: var(--text-lg); padding: var(--space-4) var(--space-5); } }