/* Full pricing content, scoped to the homepage Pricing view. */
.homepage-pricing[hidden], .state-details[hidden] { display: none; }
.homepage-pricing {
 --max-width: 1200px; --fg: var(--ink); --fg-muted: var(--muted); --fg-subtle: #697069;
 --bg: #fff; --bg-soft: var(--soft); --bg-elevated: #fff; --border: var(--line);
 --border-strong: rgba(13,16,14,.2); --radius: 16px; --radius-lg: 24px;
 --accent: var(--talle-green); --accent-text: #426c1b; --accent-ink: #0d100e;
 --card-shadow: 0 12px 32px rgba(13,16,14,.08);
 padding-top: 64px; scroll-margin-top: 150px; transition: opacity .18s ease, transform .28s ease;
}
.homepage-pricing.is-switching { opacity: 0; transform: translateY(12px); }
.homepage-pricing-heading { text-align: center; padding: 0 24px 32px; }
.homepage-pricing-heading h2 { font-size: clamp(32px,4vw,48px); line-height: 1.1; letter-spacing: -.045em; margin: 0; }
.homepage-pricing-heading > p:last-child { color: var(--muted); }
#homepage-pricing .btn-primary, #homepage-pricing .btn-ghost {
 display: inline-flex; justify-content: center; align-items: center; padding: 13px 22px;
 border-radius: 999px; font-size: 14px; font-weight: 600; border: 1px solid var(--border-strong);
}
#homepage-pricing .btn-primary { background: var(--ink); color: #fff; }
#homepage-pricing .btn-ghost { background: #fff; color: var(--ink); }
#homepage-pricing .early { text-align: center; padding: 48px 24px 72px; scroll-margin-top: 150px; }
#homepage-pricing .early h2 { font-size: clamp(28px,4vw,42px); letter-spacing: -.035em; line-height: 1.15; }
#homepage-pricing .early p { color: var(--muted); max-width: 640px; margin: 0 auto 24px; }
#homepage-pricing .cta-row { display: flex; flex-wrap: wrap; gap: 12px; }
#homepage-pricing .pricing-hero {
            text-align: center;
            padding: 72px 32px 32px;
            max-width: var(--max-width);
            margin: 0 auto;
        }
#homepage-pricing .pricing-hero h1 {
            font-size: clamp(32px, 4.5vw, 52px);
            font-weight: 700;
            letter-spacing: -0.02em;
            margin: 0 0 12px;
        }
#homepage-pricing .pricing-hero p {
            font-size: 18px;
            color: var(--fg-muted);
            max-width: 560px;
            margin: 0 auto 32px;
        }
#homepage-pricing .toggle-wrap {
            display: flex;
            justify-content: center;
            margin-bottom: 48px;
        }
#homepage-pricing .toggle {
            display: inline-flex;
            background: var(--bg-soft);
            border: 1px solid var(--border);
            border-radius: 999px;
            padding: 4px;
            gap: 0;
        }
#homepage-pricing .toggle button {
            border: none;
            background: none;
            padding: 10px 24px;
            font-family: inherit;
            font-size: 14px;
            font-weight: 600;
            color: var(--fg-muted);
            border-radius: 999px;
            cursor: pointer;
            transition: all 0.2s ease;
        }
#homepage-pricing .toggle button.active {
            background: var(--fg);
            color: var(--bg);
        }
#homepage-pricing .toggle .save-badge {
            font-size: 11px;
            font-weight: 700;
            color: var(--accent-text);
            margin-left: 6px;
        }
#homepage-pricing .pricing-grid {
            display: grid;
            grid-template-columns: repeat(4, minmax(0, 1fr));
            gap: 16px;
            max-width: var(--max-width);
            margin: 0 auto;
            padding: 0 32px 36px;
        }
#homepage-pricing .pricing-card {
            background: var(--bg-elevated);
            border: 1px solid var(--border);
            border-radius: var(--radius-lg);
            padding: 32px 24px;
            display: flex;
            flex-direction: column;
            position: relative;
        }
#homepage-pricing .pricing-card.featured {
            border: 1.5px solid var(--accent);
            box-shadow: 0 6px 28px rgba(137, 255, 0, 0.18);
        }
#homepage-pricing .pricing-card .badge {
            position: absolute;
            top: -12px;
            left: 50%;
            transform: translateX(-50%);
            background: var(--accent);
            color: var(--accent-ink);
            font-size: 11px;
            font-weight: 700;
            letter-spacing: 0.06em;
            text-transform: uppercase;
            padding: 4px 14px;
            border-radius: 999px;
            white-space: nowrap;
        }
#homepage-pricing .pricing-card .plan-name {
            font-size: 18px;
            font-weight: 700;
            margin-bottom: 12px;
            display: flex;
            align-items: center;
            gap: 9px;
        }
#homepage-pricing .pricing-card .plan-icon {
            width: 22px;
            height: 22px;
            border-radius: 50%;
            flex-shrink: 0;
        }
#homepage-pricing .pricing-card .icon-stack { display: inline-flex; align-items: center; flex-shrink: 0; }
#homepage-pricing .pricing-card .icon-stack img { width: 22px; height: 22px; border-radius: 50%; }
#homepage-pricing .pricing-card .icon-stack img:not(:first-child) { margin-left: -7px; }
#homepage-pricing .pricing-card .plan-desc {
            font-size: 13px;
            color: var(--fg-muted);
            margin-bottom: 20px;
            line-height: 1.45;
            min-height: 38px;
        }
#homepage-pricing .pricing-card .price {
            font-size: 36px;
            font-weight: 700;
            letter-spacing: -0.02em;
            margin-bottom: 2px;
        }
#homepage-pricing .pricing-card .price .period {
            font-size: 14px;
            font-weight: 500;
            color: var(--fg-muted);
        }
#homepage-pricing .pricing-card .price-note {
            font-size: 12px;
            color: var(--fg-subtle);
            margin-bottom: 24px;
            min-height: 18px;
        }
#homepage-pricing .pricing-card .feature-list {
            list-style: none;
            padding: 0;
            margin: 0 0 24px;
            flex: 1;
        }
#homepage-pricing .pricing-card .feature-list li {
            font-size: 13px;
            padding: 5px 0;
            display: flex;
            align-items: flex-start;
            gap: 8px;
        }
#homepage-pricing .pricing-card .feature-list .check {
            color: var(--accent-text);
            font-weight: 700;
            font-size: 14px;
            flex-shrink: 0;
            line-height: 1.3;
        }
#homepage-pricing .pricing-card .feature-list .x {
            color: var(--fg-subtle);
            font-size: 14px;
            flex-shrink: 0;
            line-height: 1.3;
        }
#homepage-pricing .pricing-card .cta {
            display: block;
            text-align: center;
            padding: 13px 18px;
            border-radius: 999px;
            font-size: 14px;
            font-weight: 600;
            text-decoration: none;
            transition: all 0.2s ease;
            margin: 4px 0 14px;
        }
#homepage-pricing .pricing-card .cta.primary {
            background: var(--fg);
            color: #fff;
        }
#homepage-pricing .pricing-card .cta.primary:hover { opacity: 0.9; }
#homepage-pricing .pricing-card.featured {
            background: linear-gradient(155deg, #1a3a20 0%, #11181b 55%);
            border: 1px solid rgba(137, 255, 0, 0.35);
            box-shadow: 0 12px 40px rgba(137, 255, 0, 0.16);
        }
#homepage-pricing .pricing-card.featured .badge {
            background: linear-gradient(90deg, #ffd84d, #ffc01e);
            color: #3a2c00;
        }
#homepage-pricing .pricing-card.featured .icon-stack img { box-shadow: 0 0 0 2px #11181b; }
#homepage-pricing .pricing-card.featured .plan-name { color: #fff; }
#homepage-pricing .pricing-card.featured .plan-desc { color: rgba(255, 255, 255, 0.7); }
#homepage-pricing .pricing-card.featured .price { color: #fff; }
#homepage-pricing .pricing-card.featured .price .period { color: rgba(255, 255, 255, 0.6); }
#homepage-pricing .pricing-card.featured .price-note { color: rgba(255, 255, 255, 0.55); }
#homepage-pricing .pricing-card.featured .feature-list li { color: rgba(255, 255, 255, 0.92); }
#homepage-pricing .pricing-card.featured .feature-list .check { color: var(--accent); }
#homepage-pricing .pricing-card.featured .cta.primary { background: var(--accent); color: var(--accent-ink); }
#homepage-pricing .free-block { max-width: var(--max-width); margin: 0 auto; padding: 0 32px 56px; }
#homepage-pricing .free-block-inner {
            background: var(--bg-soft);
            border-radius: var(--radius-lg);
            padding: 36px 40px;
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 28px;
            flex-wrap: wrap;
        }
#homepage-pricing .free-block-text { max-width: 640px; }
#homepage-pricing .free-tag { display: inline-flex; align-items: center; gap: 8px; font-size: 12px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--fg-muted); margin-bottom: 10px; }
#homepage-pricing .free-tag::before { content: ""; width: 9px; height: 9px; border-radius: 50%; background: var(--accent); }
#homepage-pricing .free-block h3 { font-size: 22px; font-weight: 700; letter-spacing: -0.01em; margin: 0 0 8px; }
#homepage-pricing .free-block p { font-size: 14px; color: var(--fg-muted); line-height: 1.55; margin: 0; }
#homepage-pricing .free-cta {
            display: inline-flex; align-items: center; justify-content: center;
            padding: 13px 30px; border-radius: 999px;
            border: 1px solid var(--border-strong); background: var(--bg-elevated);
            color: var(--fg); font-size: 15px; font-weight: 600; text-decoration: none;
            white-space: nowrap; transition: all 0.2s ease;
        }
#homepage-pricing .free-cta:hover { box-shadow: var(--card-shadow); }
@media (max-width: 600px) {
#homepage-pricing .free-block-inner { flex-direction: column; align-items: flex-start; padding: 28px 22px; }
#homepage-pricing .free-block { padding: 0 20px 40px; }
}
#homepage-pricing .pricing-card .cta.outline {
            background: none;
            border: 1px solid var(--border-strong);
            color: var(--fg);
        }
#homepage-pricing .pricing-card .cta.outline:hover { background: var(--bg-soft); opacity: 1; }
#homepage-pricing .pricing-card .cta-sub {
            display: block;
            text-align: center;
            margin-top: 8px;
            font-size: 11px;
            color: var(--fg-subtle);
        }
#homepage-pricing .org-section {
            max-width: var(--max-width);
            margin: 0 auto;
            padding: 0 32px 80px;
        }
#homepage-pricing .org-card {
            background: var(--bg-soft);
            border: 1px solid var(--border);
            border-radius: var(--radius-lg);
            padding: 48px;
            display: grid;
            grid-template-columns: 1.2fr 0.8fr;
            gap: 48px;
            align-items: center;
        }
#homepage-pricing .org-card h3 {
            font-size: 28px;
            font-weight: 700;
            letter-spacing: -0.01em;
            margin-bottom: 12px;
        }
#homepage-pricing .org-card p {
            font-size: 16px;
            color: var(--fg-muted);
            line-height: 1.55;
            margin-bottom: 16px;
        }
#homepage-pricing .org-card ul {
            list-style: none;
            padding: 0;
            margin: 0 0 24px;
        }
#homepage-pricing .org-card ul li {
            font-size: 14px;
            padding: 5px 0;
            display: flex;
            gap: 8px;
            align-items: flex-start;
        }
#homepage-pricing .org-card ul li .check { color: var(--accent-text); font-weight: 700; }
#homepage-pricing .org-card .org-cta { text-align: center; }
#homepage-pricing .org-card .org-cta .price-label {
            font-size: 13px;
            color: var(--fg-muted);
            margin-bottom: 8px;
        }
#homepage-pricing .org-card .org-cta .price-big {
            font-size: 32px;
            font-weight: 700;
            margin-bottom: 16px;
        }
#homepage-pricing .addon-section {
            max-width: var(--max-width);
            margin: 0 auto;
            padding: 8px 32px 72px;
        }
#homepage-pricing .addon-header {
            text-align: center;
            max-width: 720px;
            margin: 0 auto 32px;
        }
#homepage-pricing .addon-kicker {
            display: inline-block;
            font-size: 12px;
            font-weight: 700;
            letter-spacing: 0.08em;
            text-transform: uppercase;
            color: var(--accent-text);
            margin-bottom: 12px;
        }
#homepage-pricing .addon-header h2 {
            font-size: clamp(28px, 4vw, 42px);
            font-weight: 700;
            letter-spacing: -0.02em;
            line-height: 1.12;
            margin: 0 0 12px;
        }
#homepage-pricing .addon-header p {
            font-size: 16px;
            color: var(--fg-muted);
            line-height: 1.55;
            margin: 0;
        }
#homepage-pricing .engage-use-grid {
            display: grid;
            grid-template-columns: repeat(3, minmax(0, 1fr));
            gap: 12px;
            margin-bottom: 20px;
        }
#homepage-pricing .engage-use {
            background: var(--bg-soft);
            border: 1px solid var(--border);
            border-radius: var(--radius);
            padding: 18px;
        }
#homepage-pricing .engage-use h3 {
            font-size: 15px;
            font-weight: 700;
            margin: 0 0 6px;
        }
#homepage-pricing .engage-use p {
            font-size: 13px;
            color: var(--fg-muted);
            line-height: 1.45;
            margin: 0;
        }
#homepage-pricing .addon-grid {
            display: grid;
            grid-template-columns: repeat(3, minmax(0, 1fr));
            gap: 16px;
        }
#homepage-pricing .addon-card {
            background: var(--bg-elevated);
            border: 1px solid var(--border);
            border-radius: var(--radius-lg);
            padding: 28px 24px;
            display: flex;
            flex-direction: column;
        }
#homepage-pricing .addon-card.featured {
            border: 2px solid var(--accent-text);
            box-shadow: 0 4px 24px rgba(61, 122, 0, 0.1);
        }
#homepage-pricing .addon-card .plan-name {
            font-size: 18px;
            font-weight: 700;
            margin-bottom: 4px;
        }
#homepage-pricing .addon-card .plan-desc {
            font-size: 13px;
            color: var(--fg-muted);
            line-height: 1.45;
            min-height: 38px;
            margin-bottom: 18px;
        }
#homepage-pricing .addon-card .price {
            font-size: 34px;
            font-weight: 700;
            letter-spacing: -0.02em;
            margin-bottom: 2px;
        }
#homepage-pricing .addon-card .price .period {
            font-size: 14px;
            font-weight: 500;
            color: var(--fg-muted);
        }
#homepage-pricing .addon-card .price-note {
            font-size: 12px;
            color: var(--fg-subtle);
            margin-bottom: 18px;
        }
#homepage-pricing .addon-card ul {
            list-style: none;
            padding: 0;
            margin: 0;
            flex: 1;
        }
#homepage-pricing .addon-card li {
            font-size: 13px;
            padding: 6px 0;
            border-bottom: 1px solid var(--border);
            display: flex;
            gap: 8px;
            align-items: flex-start;
        }
#homepage-pricing .addon-card li:last-child { border-bottom: none; }
#homepage-pricing .addon-card .check {
            color: var(--accent-text);
            font-weight: 700;
            flex-shrink: 0;
            line-height: 1.3;
        }
#homepage-pricing .topup-card {
            margin-top: 16px;
            background: var(--bg-soft);
            border: 1px solid var(--border);
            border-radius: var(--radius-lg);
            padding: 24px;
            display: grid;
            grid-template-columns: 1fr auto;
            gap: 24px;
            align-items: center;
        }
#homepage-pricing .topup-card h3 {
            font-size: 18px;
            font-weight: 700;
            margin: 0 0 6px;
        }
#homepage-pricing .topup-card p {
            font-size: 14px;
            color: var(--fg-muted);
            line-height: 1.55;
            margin: 0;
        }
#homepage-pricing .topup-price {
            text-align: right;
            min-width: 150px;
        }
#homepage-pricing .topup-price strong {
            display: block;
            font-size: 30px;
            letter-spacing: -0.02em;
        }
#homepage-pricing .topup-price span {
            display: block;
            font-size: 12px;
            color: var(--fg-muted);
        }
#homepage-pricing .org-strip-section {
            max-width: var(--max-width);
            margin: 0 auto;
            padding: 0 32px 8px;
        }
#homepage-pricing .org-strip {
            background: var(--bg-soft);
            border: 1px solid var(--border);
            border-radius: var(--radius-lg);
            padding: 28px 32px;
            display: grid;
            grid-template-columns: 1fr auto;
            gap: 32px;
            align-items: center;
        }
#homepage-pricing .org-strip .org-strip-kicker {
            display: inline-block;
            font-size: 12px;
            font-weight: 700;
            letter-spacing: 0.08em;
            text-transform: uppercase;
            color: var(--accent-text);
            margin-bottom: 8px;
        }
#homepage-pricing .org-strip h3 { font-size: 22px; font-weight: 700; margin: 0 0 8px; }
#homepage-pricing .org-strip p { font-size: 14px; color: var(--fg-muted); line-height: 1.55; margin: 0; max-width: 660px; }
#homepage-pricing .org-strip-cta { text-align: right; min-width: 190px; }
#homepage-pricing .org-strip-cta .org-price { font-size: 30px; font-weight: 700; letter-spacing: -0.02em; }
#homepage-pricing .org-strip-cta .org-price .period { font-size: 14px; font-weight: 500; color: var(--fg-muted); }
#homepage-pricing .org-strip-cta .price-note { font-size: 12px; color: var(--fg-muted); margin: 4px 0 14px; }
#homepage-pricing .faq-section {
            max-width: 760px;
            margin: 0 auto;
            padding: 80px 32px;
        }
#homepage-pricing .faq-section h2 {
            font-size: 28px;
            font-weight: 700;
            text-align: center;
            margin-bottom: 40px;
        }
#homepage-pricing .faq-item {
            border-bottom: 1px solid var(--border);
            padding: 20px 0;
        }
#homepage-pricing .faq-item:first-of-type { border-top: 1px solid var(--border); }
#homepage-pricing .faq-item h4 {
            font-size: 15px;
            font-weight: 600;
            margin: 0 0 8px;
        }
#homepage-pricing .faq-item p {
            font-size: 14px;
            color: var(--fg-muted);
            margin: 0;
            line-height: 1.55;
        }
@media (max-width: 1120px) {
#homepage-pricing .pricing-grid { grid-template-columns: repeat(2, 1fr); }
#homepage-pricing .addon-grid { grid-template-columns: 1fr; }
#homepage-pricing .engage-use-grid { grid-template-columns: 1fr; }
#homepage-pricing .org-card { grid-template-columns: 1fr; }
}
@media (max-width: 600px) {
#homepage-pricing .pricing-grid { grid-template-columns: 1fr; padding: 0 20px 48px; }
#homepage-pricing .org-strip { grid-template-columns: 1fr; }
#homepage-pricing .org-strip-cta { text-align: left; }
#homepage-pricing .pricing-hero { padding: 56px 20px 24px; }
#homepage-pricing .addon-section { padding: 0 20px 56px; }
#homepage-pricing .topup-card { grid-template-columns: 1fr; }
#homepage-pricing .topup-price { text-align: left; }
#homepage-pricing .org-section { padding: 0 20px 64px; }
#homepage-pricing .org-card { padding: 32px 24px; }
#homepage-pricing .faq-section { padding: 56px 20px; }
}
#homepage-pricing .engage-choice-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
#homepage-pricing .addon-card h3.plan-name { margin-top: 0; }
#homepage-pricing .line-price { font-size: 16px; margin: 8px 0 12px; }
#homepage-pricing .engage-comparison { padding: 28px 0 8px; }
#homepage-pricing .engage-comparison h3 { font-size: 22px; margin: 0 0 12px; }
#homepage-pricing .engage-comparison p { color: var(--fg-muted); font-size: 14px; line-height: 1.65; }
#homepage-pricing .engage-comparison details { padding: 14px 0; border-top: 1px solid var(--border); }
#homepage-pricing .engage-comparison summary { font-weight: 600; cursor: pointer; }
#homepage-pricing .engage-comparison a { text-decoration: underline; text-underline-offset: 3px; }
#homepage-pricing .engage-comparison .engage-terms { font-size: 12px; }
#homepage-pricing .topup-card { grid-template-columns: 1fr minmax(260px, .8fr); align-items: start; gap: 32px; }
#homepage-pricing .topup-card p + p { margin-top: 12px; }
#homepage-pricing .engage-choice-grid .addon-card { padding: 24px 22px; }
#homepage-pricing .engage-choice-grid .line-price { margin: 6px 0 0; }
#homepage-pricing .engage-custom { grid-column: 1 / -1; background: var(--bg-soft); }
#homepage-pricing .engage-custom a, #homepage-pricing .engage-cta-note a, #homepage-pricing .faq-item a { text-decoration: underline; text-underline-offset: 3px; }
#homepage-pricing .engage-details { margin: 12px 0 0; padding-left: 18px; font-size: 14px; line-height: 1.55; color: var(--fg-muted); }
#homepage-pricing .engage-details li + li { margin-top: 6px; }
#homepage-pricing .engage-cta { text-align: right; }
#homepage-pricing .topup-card .engage-cta-note { margin-top: 12px; font-size: 13px; }
@media (max-width: 700px) {
#homepage-pricing .topup-card { grid-template-columns: 1fr; }
#homepage-pricing .engage-choice-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
#homepage-pricing .engage-choice-grid .addon-card { padding: 20px 16px; }
#homepage-pricing .engage-cta { text-align: left; }
}
@media (max-width: 359px) {
#homepage-pricing .engage-choice-grid { grid-template-columns: 1fr; }
}
