/* ========================================================================== pricing-ab.css — the two A/B variants of the plan-selection page (variant 12 "anchored-ladder" = .ab-ladder, variant 13 "comparison-matrix" = .ab-matrix) Delivery: this file is NOT in css/externalcss.txt. The SPA discards page links, so javascript/Pricing_ssi.js injects at runtime (same pattern as influencers_ssi.js); Pricing_ssi.html also links it directly for the standalone per-language shells. Bump the ?v= query in Pricing_ssi.js when editing this file — pricing assets get no md5 cache-buster. Scoping: every rule lives under .pricing-ab; design tokens are custom properties on .pricing-ab (NOT :root — other SPA paras share the document). The matrix thead must stay sticky: never wrap .abm-table in an overflow container and keep ancestors overflow-free (the thead sticks to the viewport at top:0 because the legacy #header scrolls away; see the v7 sticky recon). ========================================================================== */ .pricing-ab{ --ab-ink:#22313f; --ab-ink-2:#46586a; --ab-muted:#5f7183; --ab-border:#dde3e9; --ab-border-strong:#c9d3dd; --ab-panel:#ffffff; --ab-panel-2:#f4f7fa; --ab-navy:#0F3F64; --ab-link:#1a66ad; --ab-accent:#106581; --ab-cta:#4f8c2a; --ab-cta-hover:#447c22; --ab-pos:#1d7a34; --ab-hl:#eef7ee; --ab-badge-bg:#e6f4ea; --ab-badge-ink:#1d7a34; --ab-shadow:0 1px 2px rgba(15,44,70,.08); font-family:-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif; font-size:14px; color:var(--ab-ink); line-height:1.45; } .pricing-ab *, .pricing-ab *:before, .pricing-ab *:after{box-sizing:border-box;} .pricing-ab a{color:var(--ab-link);} .pricing-ab a:hover{color:var(--ab-navy);} .pricing-ab button{font-family:inherit;} .pricing-ab [hidden]{display:none !important;} .pricing-ab.ab-empty .ab-cards, .pricing-ab.ab-empty .ab-more-row, .pricing-ab.ab-empty .ab-pro-banner, .pricing-ab.ab-empty .ab-compare, .pricing-ab.ab-empty .abm-table, .pricing-ab.ab-empty .abm-ht{display:none !important;} /* ---------- shared controls row ---------- */ .pricing-ab .ab-controls{ display:flex; align-items:center; gap:14px; flex-wrap:wrap; margin:14px 0 18px; } .pricing-ab .ab-controls .pricing-gift-toggle{margin:0;} /* billing period segmented control */ .pricing-ab .ab-billing{ margin-left:auto; display:flex; align-items:center; background:var(--ab-panel-2); border:1px solid var(--ab-border); border-radius:999px; padding:3px; } .pricing-ab .ab-billing label{ position:relative; cursor:pointer; border-radius:999px; padding:6px 14px; font-size:13px; font-weight:600; color:var(--ab-ink-2); white-space:nowrap; } .pricing-ab .ab-billing input{ position:absolute; opacity:0; pointer-events:none; } .pricing-ab .ab-billing label.on{ background:var(--ab-navy); color:#ffffff; box-shadow:var(--ab-shadow); } .pricing-ab .ab-billing input:focus-visible + span{outline:2px solid var(--ab-link);outline-offset:2px;border-radius:999px;} .pricing-ab .ab-billing .ab-save-tag{ display:inline-block; margin-left:6px; padding:1px 7px; border-radius:999px; background:var(--ab-badge-bg); color:var(--ab-badge-ink); font-size:11px; font-weight:700; } .pricing-ab .ab-billing label.on .ab-save-tag{background:rgba(255,255,255,.18);color:#d9f2df;} /* ---------- Anchored Ladder: cards ---------- */ .ab-ladder .ab-cards{ display:flex; flex-wrap:wrap; gap:14px; align-items:stretch; margin:6px 0 4px; } .ab-ladder .abc-card{ position:relative; flex:1 1 0; min-width:212px; max-width:236px; background:var(--ab-panel); border:1px solid var(--ab-border); border-radius:10px; padding:16px 16px 14px; box-shadow:var(--ab-shadow); display:none; /* JS reveals cards present in the API payload */ flex-direction:column; } .ab-ladder .abc-card.on{display:flex;} .ab-ladder .abc-card.abc-featured{ border:2px solid var(--ab-cta); transform:scale(1.03); z-index:1; } .ab-ladder .abc-flag{ position:absolute; top:-11px; left:50%; transform:translateX(-50%); background:var(--ab-cta); color:#ffffff; font-size:10.5px; font-weight:800; letter-spacing:.06em; text-transform:uppercase; padding:3px 12px; border-radius:999px; white-space:nowrap; } .ab-ladder .abc-head{display:flex;align-items:center;gap:8px;min-height:24px;} .ab-ladder .abc-tier{ display:inline-block; padding:3px 10px; border-radius:6px; font-size:12.5px; font-weight:800; background:var(--ab-panel-2); color:var(--ab-ink); border:1px solid var(--ab-border); } .ab-ladder .abc-card[data-plan="Bronze"] .abc-tier{background:#efdcc8;color:#6e441c;border-color:#e2c9ae;} .ab-ladder .abc-card[data-plan="Silver"] .abc-tier{background:#e6ebf0;color:#4a5967;border-color:#d4dce4;} .ab-ladder .abc-card[data-plan="Gold"] .abc-tier{background:#f7e7b0;color:#6b4e00;border-color:#ecd88f;} .ab-ladder .abc-card[data-plan="Diamond"] .abc-tier{background:#dff0f6;color:#0e5570;border-color:#c3e2ec;} .ab-ladder .ab-gift-badge{ display:none; margin-left:auto; background:#d6437e; color:#ffffff; font-size:10px; font-weight:800; letter-spacing:.05em; padding:2px 8px; border-radius:999px; } .ab-ladder.ab-giftmode .ab-gift-badge{display:inline-block;} .ab-ladder .abc-quota{margin:10px 0 2px;font-size:13.5px;color:var(--ab-ink-2);} .ab-ladder .abc-quota strong{font-size:17px;color:var(--ab-ink);} .ab-ladder .abc-price{margin:4px 0 0;display:flex;align-items:baseline;gap:4px;flex-wrap:wrap;} .ab-ladder .abc-cur{font-size:17px;font-weight:700;color:var(--ab-ink);} .ab-ladder .abc-amt{font-size:34px;font-weight:800;color:var(--ab-ink);line-height:1;} .ab-ladder .abc-per{font-size:13px;color:var(--ab-muted);} .ab-ladder .abc-save{ margin-left:2px; background:var(--ab-badge-bg); color:var(--ab-badge-ink); font-size:11px; font-weight:700; padding:2px 8px; border-radius:999px; } .ab-ladder .abc-billed{margin:4px 0 0;font-size:11.5px;color:var(--ab-muted);min-height:15px;} .ab-ladder .abc-lead{margin:12px 0 0;font-size:12px;font-weight:700;color:var(--ab-ink-2);} /* The site shell's #content rules (newss_style.css: "#content ul{margin-left: 20px}", "#content li{padding:2px}") outrank these class chains by ID specificity and crush the checkmark indent — repeat each selector under #content so the card layout survives when embedded in the site. */ #content .ab-ladder .abc-feats, .ab-ladder .abc-feats{margin:6px 0 0;padding:0;list-style:none;flex:1 1 auto;} #content .ab-ladder .abc-feats li, .ab-ladder .abc-feats li{ position:relative; padding:3px 0 3px 18px; font-size:12.5px; color:var(--ab-ink-2); } .ab-ladder .abc-feats li:before{ content:"\2713"; position:absolute; left:0; top:3px; color:var(--ab-pos); font-weight:700; } .ab-ladder .abc-note{ margin:10px 0 0; padding:7px 9px; background:#fdf3d8; border:1px solid #eeddad; border-radius:7px; font-size:11.5px; color:#7a5b12; } .ab-ladder .abc-cta{ display:block; margin:12px 0 0; padding:9px 10px; text-align:center; border-radius:8px; font-size:13.5px; font-weight:700; text-decoration:none; color:var(--ab-navy); border:1.5px solid var(--ab-navy); background:var(--ab-panel); cursor:pointer; } .ab-ladder .abc-cta:hover{background:var(--ab-panel-2);color:var(--ab-navy);} .ab-ladder .abc-featured .abc-cta{ background:var(--ab-cta); border-color:var(--ab-cta); color:#ffffff; } .ab-ladder .abc-featured .abc-cta:hover{background:var(--ab-cta-hover);border-color:var(--ab-cta-hover);color:#ffffff;} .ab-ladder .abc-renew{margin:8px 0 0;font-size:10.5px;color:var(--ab-muted);min-height:14px;} /* reveal row + extra grid */ .ab-ladder .ab-more-row{margin:14px 0 4px;text-align:center;} .ab-ladder .ab-more-btn{ display:inline-flex; align-items:center; gap:7px; background:var(--ab-panel); border:1px solid var(--ab-border-strong); border-radius:999px; padding:7px 16px; font-size:13px; font-weight:600; color:var(--ab-ink-2); cursor:pointer; } .ab-ladder .ab-more-btn:hover{background:var(--ab-panel-2);} .ab-ladder .ab-more-btn .arrow{font-size:10px;transition:transform .15s ease;} .ab-ladder .ab-more-btn.expanded .arrow{transform:rotate(180deg);} .ab-ladder .ab-extra{display:none;margin-top:12px;} .ab-ladder .ab-extra.visible{display:flex;} .ab-ladder .ab-pro-banner{ margin:6px 0 14px; padding:9px 13px; background:var(--ab-panel-2); border:1px solid var(--ab-border); border-radius:8px; font-size:12.5px; color:var(--ab-ink-2); } /* ---------- Anchored Ladder: always-visible compare table ---------- */ .ab-ladder .ab-compare{margin:26px 0 8px;} .ab-ladder .ab-compare h2{font-size:17px;color:var(--ab-ink);margin:0 0 4px;} .ab-ladder .ab-compare .ab-compare-sub{font-size:12.5px;color:var(--ab-muted);margin:0 0 10px;} .ab-ladder .ab-compare-scroll{overflow-x:auto;} .pricing-ab table.ab-compare-table{ border-collapse:separate; border-spacing:0; width:100%; min-width:760px; margin:0; background:var(--ab-panel); border:1px solid var(--ab-border); border-radius:10px; font-size:12.5px; } .pricing-ab table.ab-compare-table th, .pricing-ab table.ab-compare-table td{ padding:7px 10px; text-align:center; border-bottom:1px solid var(--ab-border); background:var(--ab-panel); color:var(--ab-ink-2); } .pricing-ab table.ab-compare-table thead th{ font-size:12.5px; font-weight:800; color:var(--ab-ink); background:var(--ab-panel-2); } .pricing-ab table.ab-compare-table th.ab-rowhead{ position:sticky; left:0; z-index:1; text-align:left; font-weight:600; color:var(--ab-ink-2); min-width:230px; background:var(--ab-panel); } .pricing-ab table.ab-compare-table thead th.ab-rowhead{background:var(--ab-panel-2);} .pricing-ab table.ab-compare-table tr:last-child th, .pricing-ab table.ab-compare-table tr:last-child td{border-bottom:0;} .pricing-ab table.ab-compare-table td.ab-hl, .pricing-ab table.ab-compare-table th.ab-hl{background:var(--ab-hl);} .pricing-ab table.ab-compare-table td .yes{color:var(--ab-pos);font-weight:700;} .pricing-ab table.ab-compare-table td .no{color:var(--ab-border-strong);} /* ---------- Comparison-First: matrix ---------- */ /* IMPORTANT: no overflow wrapper around .abm-table — the sticky thead needs the document as its scroll container. The 5/6-column matrix fits the fixed 960px canvas with table-layout:fixed. */ .ab-matrix .abm-table{ border-collapse:separate; border-spacing:0; table-layout:fixed; width:100%; margin:6px 0 0; font-size:12.5px; background:var(--ab-panel); border:1px solid var(--ab-border); border-radius:10px; } .ab-matrix .abm-table th, .ab-matrix .abm-table td{ padding:7px 9px; text-align:center; border-bottom:1px solid var(--ab-border); background:var(--ab-panel); color:var(--ab-ink-2); vertical-align:top; } .ab-matrix .abm-table thead th{ position:sticky; top:0; /* legacy #header is static and scrolls away */ z-index:5; background:var(--ab-panel-2); border-bottom:2px solid var(--ab-border-strong); box-shadow:0 2px 4px rgba(15,44,70,.06); padding:10px 8px 9px; } .ab-matrix .abm-table th.abm-feathead{ width:24%; text-align:left; } .ab-matrix .abm-table th.abm-rowhead{ text-align:left; font-weight:600; color:var(--ab-ink-2); } .ab-matrix .abm-table th.abm-section{ text-align:left; background:var(--ab-panel-2); color:var(--ab-accent); font-size:11px; font-weight:800; letter-spacing:.06em; text-transform:uppercase; padding:8px 9px 6px; } .ab-matrix .abm-table tr:last-child th, .ab-matrix .abm-table tr:last-child td{border-bottom:0;} .ab-matrix .abm-table col.abm-hl, .ab-matrix .abm-table td.abm-hl, .ab-matrix .abm-table th.abm-hl{background:var(--ab-hl);} .ab-matrix .abm-table thead th.abm-hl{background:#e2f0e2;} .ab-matrix .abm-yes{color:var(--ab-pos);font-weight:700;} .ab-matrix .abm-no{color:var(--ab-border-strong);} /* plan chip inside the sticky thead */ .ab-matrix .abm-chip{display:flex;flex-direction:column;gap:2px;align-items:center;} .ab-matrix .abm-chip .abm-name{font-size:13px;font-weight:800;color:var(--ab-ink);} .ab-matrix .abm-chip .abm-pop{ font-size:9px; font-weight:800; letter-spacing:.05em; text-transform:uppercase; color:#ffffff; background:var(--ab-cta); border-radius:999px; padding:1px 8px; } .ab-matrix .abm-chip .abm-quota{font-size:10.5px;color:var(--ab-muted);font-weight:400;} .ab-matrix .abm-chip .abm-price{font-size:15px;font-weight:800;color:var(--ab-ink);} .ab-matrix .abm-chip .abm-price .abm-per{font-size:10.5px;font-weight:400;color:var(--ab-muted);} .ab-matrix .abm-chip .abm-save{ font-size:10px; font-weight:700; color:var(--ab-badge-ink); background:var(--ab-badge-bg); border-radius:999px; padding:1px 7px; } .ab-matrix .abm-chip .abm-billed{font-size:9.5px;color:var(--ab-muted);font-weight:400;line-height:1.3;} .ab-matrix .abm-chip .abm-cta{ display:block; width:100%; margin-top:4px; padding:6px 4px; border-radius:7px; font-size:11.5px; font-weight:700; text-decoration:none; text-align:center; color:var(--ab-navy); border:1.5px solid var(--ab-navy); background:var(--ab-panel); cursor:pointer; } .ab-matrix .abm-chip .abm-cta:hover{background:#ffffff;color:var(--ab-navy);} .ab-matrix th.abm-hl .abm-cta{background:var(--ab-cta);border-color:var(--ab-cta);color:#ffffff;} .ab-matrix th.abm-hl .abm-cta:hover{background:var(--ab-cta-hover);border-color:var(--ab-cta-hover);} .ab-matrix .abm-chip .abm-na{font-size:10.5px;color:var(--ab-muted);margin-top:4px;} .ab-matrix .abm-contact{font-size:11px;color:var(--ab-ink-2);} .ab-matrix .abm-contact a{font-weight:700;} /* column dimmed when the plan is not purchasable for this account */ .ab-matrix .abm-table .abm-off{opacity:.45;} /* HandTracker cross-sell banner */ .ab-matrix .abm-ht{ display:flex; align-items:center; gap:16px; margin:16px 0 4px; padding:13px 16px; background:var(--ab-panel); border:1px solid var(--ab-border); border-radius:10px; box-shadow:var(--ab-shadow); } .ab-matrix .abm-ht .abm-ht-price{font-size:22px;font-weight:800;color:var(--ab-ink);white-space:nowrap;} .ab-matrix .abm-ht .abm-ht-price span{font-size:11px;font-weight:400;color:var(--ab-muted);} .ab-matrix .abm-ht .abm-ht-body{flex:1 1 auto;font-size:12.5px;color:var(--ab-ink-2);} .ab-matrix .abm-ht .abm-ht-body strong{color:var(--ab-ink);} .ab-matrix .abm-ht .abm-ht-warn{display:block;margin-top:2px;font-size:11.5px;color:#7a5b12;} .ab-matrix .abm-ht .abc-cta{ flex:0 0 auto; padding:8px 16px; border-radius:8px; font-size:13px; font-weight:700; text-decoration:none; color:var(--ab-navy); border:1.5px solid var(--ab-navy); background:var(--ab-panel); cursor:pointer; } .ab-matrix .abm-ht .abc-cta:hover{background:var(--ab-panel-2);color:var(--ab-navy);} .ab-matrix .abm-gift-line{margin:12px 0 0;font-size:12.5px;color:var(--ab-ink-2);} /* ---------- shared sections (both variants) ---------- */ .ab-shared .ab-trust{ display:flex; gap:18px; align-items:flex-start; flex-wrap:wrap; margin:22px 0 0; padding:14px 16px; background:var(--ab-panel); border:1px solid var(--ab-border); border-radius:10px; } .ab-shared .ab-trust-item{flex:1 1 240px;font-size:12px;color:var(--ab-muted);} .ab-shared .ab-trust-item .ab-t-strong{display:block;font-size:13px;font-weight:800;color:var(--ab-ink);margin-bottom:2px;} .ab-shared .ab-pay-chips{display:flex;flex-wrap:wrap;gap:6px;margin-top:5px;} /* Brand-mark chips: fixed white so the payment logos keep their brand colors. */ .ab-shared .ab-pay-chip{ display:inline-flex; align-items:center; justify-content:center; width:48px; height:24px; border:1px solid var(--ab-border); border-radius:6px; background:#ffffff; } .ab-shared .ab-pay-chip svg{width:42px;height:18px;display:block;} .ab-shared .ab-renew-note{margin:12px 0 0;font-size:11.5px;color:var(--ab-muted);} .ab-shared .ab-faq{margin:20px 0 10px;} .ab-shared .ab-faq h2{font-size:17px;color:var(--ab-ink);margin:0 0 8px;} .ab-shared .ab-faq details{ background:var(--ab-panel); border:1px solid var(--ab-border); border-radius:8px; margin:0 0 7px; padding:0; } .ab-shared .ab-faq summary{ cursor:pointer; padding:9px 13px; font-size:13px; font-weight:700; color:var(--ab-ink); } .ab-shared .ab-faq details p{margin:0;padding:0 13px 11px;font-size:12.5px;color:var(--ab-ink-2);}