/* ============================================================ pricing-mockup.css — page-specific styles for pricing-mockup.php ONLY ------------------------------------------------------------ Converted from the standalone blue mockup. Loaded AFTER main.css / style.css / main-design.css (linked in the page's below the header2-links include), so these rules win without !important. RULES FOR THIS FILE (same contract as pricing-new.css) 1. Everything is scoped under .pm-page (body) / .pm-main (content). No bare element selectors — h1, a, button, table are all styled through .pm-main so nothing leaks into header3 or footer2. 2. Every class is prefixed .pm- so nothing collides with the common stylesheets OR with pricing-new.css (.pp-). The mockup's original names (.hero, .section, .btn, .plan, .faq-item, .tabs) are all renamed here. 3. The element reset (*{margin:0;padding:0}) is scoped to .pm-main only. NEVER widen it to .pm-page — that would strip the repo header and footer. 4. The mockup's own topbar / pill nav / footer / .drop menus / .btn-primary / .btn-sm / .grid3 / .save-tag rules were DROPPED: header3.php and footer2.php provide the chrome, and the remaining markup never uses those classes. TYPE + COLOUR • Fonts follow the pricing-new.css mechanism exactly. The mockup's Google-Fonts request (Plus Jakarta Sans / Inter / IBM Plex Mono) is GONE — no page-only font request: h1-h4 + body copy -> NO font-family here; the common cascade styles them (style.css: Montserrat bold headings, Roboto 18px body), so they match every heading and paragraph on index.php small caps labels -> font-family: var(--nav-font) [Nunito] — everywhere the mockup used --mono (.pm-eyebrow, .pm-unit, chips, badges, group rows, calc readout/outputs) display numerals -> "Montserrat", var(--heading-font) — the price numeral and calc big number match the card h3s, as on pricing-new • Sizes snapped from the mockup's half-pixel values to the repo's px rhythm: 14.5->14, 15.5->15, 13.5->13, 12.5->12, 11.5->11, 10.5->10, 19->20. Fluid clamp() headings are the mockup's, unchanged — EXCEPT the hero: its h1 carries no size (common- cascade h1, like index.php's hero) and its lede is sized by the fs-20 utility in the markup. • The palette IS the repo blue (#053AC3 / #0433AC / #042E9A plus the #0645DE gradient head), unlike pricing-new's violet — so this page needs no re-theming to sit with the rest of the site. Tokens still live page-locally on .pm-page, NOT :root, per the contract. HEADER CLEARANCE • The mockup was standalone (64px hero padding under its own sticky nav). header3's pill nav is fixed-top, so the hero carries 150px top padding on desktop, 132px under lg, 116px under md — same clearance as pricing-new.css / indexPage-landing.css. ---- BREAKPOINTS ------------------------------------------- Realigned from the mockup's 1080 / 900 / 620 to the repo's Bootstrap 5 grid: 1199.98px xl plans 4 -> 2 cols, calculator stacks 991.98px lg steps stack, hero clearance drops 767.98px md plans -> 1 col, section rhythm tightens 575.98px sm calculator padding tightens REVEAL ANIMATION • The mockup's IntersectionObserver ".rv" system was replaced with the repo's AOS attributes (initialised in main.js). The prefers-reduced-motion guard below preserves the mockup's accessibility behaviour, which AOS does not provide on its own. ============================================================ */ /* ---------- page-local tokens ---------- */ .pm-page { /* single dark text shade, page-wide: the common heading colour the hero h1 renders in (repo --dark-blue token, as used by .lp-band) */ --pm-navy: var(--dark-blue, #1c274c); --pm-navy-deep: #0d0d20; /* repo blue — same family as the site's own #053ac3 */ --pm-accent: #053ac3; --pm-accent-bright: #0645de; /* gradient head on featured card + calc */ --pm-accent-deep: #0433ac; --pm-accent-dark: #042e9a; --pm-tint: #e9effd; --pm-lav-1: #a9c0f5; --pm-lav-2: #c4d4f9; --pm-lav-3: #e1eafd; --pm-ink: var(--dark-blue, #1c274c); /* same single dark shade */ --pm-muted: #59627e; --pm-line: #e1e8f4; --pm-line-soft: #edf2fa; --pm-bg: #f5f8fd; --pm-amber: #b8791c; --pm-amber-tint: #fef6e7; --pm-radius: 14px; --pm-shadow-sm: 0 1px 2px rgba(22, 22, 46, 0.05), 0 4px 14px rgba(22, 22, 46, 0.05); --pm-shadow-lg: 0 18px 48px rgba(22, 22, 46, 0.14); --pm-maxw: 1200px; } /* ---------- scoped base (replaces the mockup's globals) ---------- */ .pm-main * { margin: 0; padding: 0; box-sizing: border-box; } .pm-main { /* No font-family / size / colour here — body text inherits the common cascade (style.css: Roboto 18px / #393939), exactly like pricing-new.css and indexPage-landing.css. */ } .pm-main a { color: inherit; text-decoration: none; transition: 0.18s ease; } .pm-main a:hover { opacity: 1; /* neutralises style.css a:hover{opacity:.8} */ text-decoration: none; } .pm-main button { font: inherit; cursor: pointer; border: 0; background: none; color: inherit; } .pm-main :focus-visible { outline: 3px solid var(--pm-accent); outline-offset: 2px; border-radius: 4px; } .pm-main h1, .pm-main h2, .pm-main h3, .pm-main h4 { /* No font-family / weight / colour — headings inherit the common cascade (style.css: Montserrat bold; main.css colour). */ line-height: 1.12; } .pm-wrap { max-width: var(--pm-maxw); margin: 0 auto; padding: 0 24px; } .pm-eyebrow { font-family: var(--nav-font); font-size: 14px; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: var(--pm-accent); } /* ---------- buttons ---------- */ .pm-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 12px 22px; border-radius: 999px; font-weight: 700; font-size: 15px; letter-spacing: -0.01em; transition: 0.18s ease; white-space: nowrap; } /* Variants are prefixed .pm-main so their colours outrank the .pm-main a { color: inherit } reset above. */ .pm-main .pm-btn-dark { background: var(--pm-accent); color: #fff; } .pm-main .pm-btn-dark:hover { background: var(--pm-accent-deep); transform: translateY(-1px); color: #fff; } .pm-main .pm-btn-ghost { border: 1.5px solid var(--pm-line); color: var(--pm-navy); background: #fff; box-shadow: 0 1px 3px rgba(22, 22, 46, 0.06); } .pm-main .pm-btn-ghost:hover { border-color: var(--pm-accent); color: var(--pm-accent); background: var(--pm-tint); } .pm-main .pm-btn-mint { background: #fff; color: var(--pm-accent-dark); } .pm-main .pm-btn-mint:hover { background: #edf2fe; transform: translateY(-1px); color: var(--pm-accent-dark); } .pm-main .pm-btn-invert { background: #fff; color: var(--pm-navy); } .pm-main .pm-btn-invert:hover { background: var(--pm-tint); transform: translateY(-1px); color: var(--pm-navy); } .pm-btn-block { width: 100%; } /* ---------- HERO ---------- */ .pm-hero { background: radial-gradient( 900px 500px at 78% -20%, rgba(5, 58, 195, 0.3), transparent 62% ), radial-gradient( 760px 460px at 8% -10%, rgba(169, 192, 245, 0.6), transparent 64% ), linear-gradient( 170deg, var(--pm-lav-2) 0%, var(--pm-lav-3) 34%, var(--pm-bg) 78% ); border-bottom: 1px solid var(--pm-line); padding: 150px 0 0; /* clears the fixed pill nav (matches .lp-hero) */ } .pm-hero-inner { max-width: 820px; } .pm-trial-pill { display: inline-flex; align-items: center; gap: 9px; background: #fff; border: 1px solid var(--pm-line); border-radius: 999px; padding: 7px 16px 7px 8px; font-size: 14px; /* was 13.5 */ font-weight: 400; letter-spacing: 0.06em; color: #39425f; box-shadow: var(--pm-shadow-sm); margin-bottom: 22px; } .pm-trial-pill b { background: var(--pm-accent); color: #fff; font-family: var(--nav-font); font-size: 11px; /* was 11.5 */ font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; padding: 5px 14px; /* was 10px sides — widened */ border-radius: 999px; white-space: nowrap; /* the chip never breaks — on phones only the sentence wraps */ flex: none; } .pm-hero h1 { /* No font-size — common-cascade h1, like index.php's hero. */ margin-bottom: 18px; } .pm-hero h1 em { font-style: normal; color: var(--pm-accent-dark); } .pm-hero .pm-lede { /* No font-size — the element carries the repo's fs-20 utility. */ color: var(--pm-muted); max-width: 640px; } /* product tabs */ .pm-tabs { display: flex; align-items: flex-end; gap: 6px; margin-top: 44px; overflow-x: auto; scrollbar-width: none; } .pm-tabs::-webkit-scrollbar { display: none; } .pm-tab { position: relative; padding: 14px 22px; font-family: var(--nav-font); /* label role */ font-weight: 600; font-size: 14px; /* was 15.5 display — label size on this page */ color: var(--pm-muted); border-radius: 10px 10px 0 0; border: 1px solid transparent; border-bottom: 0; white-space: nowrap; transition: 0.16s; letter-spacing: 0.02em; } .pm-tab:hover { color: var(--pm-navy); } .pm-tab[aria-selected="true"] { background: #fff; color: var(--pm-navy); border-color: var(--pm-line); } .pm-tab[aria-selected="true"]::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 1px; background: #fff; } /* ---------- PLANS ---------- */ .pm-plans { background: #fff; padding: 56px 0 8px; } .pm-plan-meta { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 20px; margin-bottom: 28px; } .pm-plan-meta p { font-size: 16px; /* was 14.5 — lifted to the repo body step */ color: var(--pm-muted); max-width: 460px; font-weight: 400; letter-spacing: 0.01em; } .pm-unit { font-family: var(--nav-font); font-size: 16px; /* was 14 — matches .pm-plan-meta p above */ font-weight: 600; letter-spacing: 0.01em; /* was 0.06em — matches .pm-plan-meta p */ text-transform: none; /* was uppercase — renders as written: "Billed annually" */ color: var(--pm-ink); /* was #000 — now the page's single dark shade */ margin: -14px 0 26px; /* was inline in the mockup */ } .pm-billing { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; } .pm-switch { display: inline-flex; background: var(--pm-bg); border: 1px solid var(--pm-line); border-radius: 999px; padding: 4px; gap: 2px; } .pm-switch button { padding: 9px 28px; /* was 20px sides — widened */ border-radius: 999px; font-weight: 700; font-size: 14px; /* was 14.5 */ letter-spacing: 0.04em; color: var(--pm-muted); white-space: nowrap; } .pm-switch button[aria-pressed="true"] { color: var(--pm-navy); background: #fff; box-shadow: var(--pm-shadow-sm); } .pm-grid4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; align-items: stretch; } .pm-plan { position: relative; display: flex; flex-direction: column; background: #fff; border: 1px solid var(--pm-line); border-radius: var(--pm-radius); padding: 28px 24px 26px; box-shadow: var(--pm-shadow-sm); transition: 0.2s ease; } .pm-plan:hover { transform: translateY(-3px); box-shadow: var(--pm-shadow-lg); border-color: #cbd8ea; } .pm-plan.pm-featured { /* was the 165deg blue gradient — now flat card colour */ background: var(--pm-accent); /* #053ac3 */ border-color: var(--pm-accent-dark); color: #fff; box-shadow: 0 22px 54px rgba(5, 58, 195, 0.34); } .pm-plan.pm-featured:hover { border-color: var(--pm-accent-dark); } .pm-badge { position: absolute; top: -13px; left: 24px; background: rgba(255, 193, 7, 1); /* #ffc107 */ color: var( --pm-navy ); /* white on amber fails contrast; navy keeps it readable */ font-family: var(--nav-font); font-size: 11px; font-weight: 800; /* was 600 */ letter-spacing: 0.1em; text-transform: uppercase; padding: 5px 12px; border-radius: 999px; } .pm-plan h3 { font-size: 22px; margin-bottom: 8px; } .pm-plan.pm-featured h3 { color: #fff; /* headings inherit the common heading colour; dark card overrides */ } .pm-plan .pm-desc { font-size: 14px; /* was 14.5 */ color: var(--pm-muted); min-height: 62px; } .pm-plan.pm-featured .pm-desc { color: #cfdbfa; } .pm-price { display: flex; align-items: baseline; gap: 6px; margin: 20px 0 4px; } .pm-price .pm-amt { /* Montserrat = the font card headings actually render (style.css), so prices match the h3s — same mechanism as pricing-new. Explicit ink colour because body colour is the cascade's #393939. */ font-family: "Montserrat", var(--heading-font), sans-serif; font-size: 36px; /* was 38 — matches pricing-new's price numeral */ font-weight: 700; letter-spacing: -0.035em; color: var(--pm-ink); } .pm-plan.pm-featured .pm-price .pm-amt { color: #fff; } .pm-price .pm-per { font-size: 14px; color: var(--pm-muted); } .pm-plan.pm-featured .pm-price .pm-per { color: #cfdbfa; } .pm-price-note { font-family: var(--nav-font); font-size: 11px; /* was 11.5 */ font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--pm-muted); } .pm-plan.pm-featured .pm-price-note { color: #a9bef4; } .pm-scale { display: inline-flex; align-items: center; justify-content: center; /* text centered in the full-width pill */ gap: 7px; margin-top: 16px; padding: 7px 12px; background: var(--pm-tint); color: var(--pm-accent); border-radius: 999px; font-size: 13px; font-weight: 600; align-self: stretch; /* was flex-start — pill now spans the card width */ letter-spacing: 0.04em; } .pm-plan.pm-featured .pm-scale { /* was rgba(255,255,255,.16) with no border — too faint against the blue gradient once the pill spans the full card width */ background: rgba(255, 255, 255, 0.22); border: 1px solid rgba(255, 255, 255, 0.45); color: #fff; } .pm-plan .pm-btn { margin-top: 22px; letter-spacing: 0.03em; } .pm-rule { height: 1px; background: var(--pm-line); margin: 24px 0 18px; } .pm-plan.pm-featured .pm-rule { background: rgba(255, 255, 255, 0.22); } .pm-feat-label { font-size: 14px; /* was 13 */ font-weight: 600; color: var(--pm-navy); margin-bottom: 14px; letter-spacing: 0.03em; } .pm-plan.pm-featured .pm-feat-label { color: #e4ecfe; } .pm-feats { list-style: none; display: grid; gap: 11px; font-size: 14px; /* was 14.5 */ } .pm-feats li { display: flex; gap: 10px; align-items: flex-start; color: #39425f; } .pm-plan.pm-featured .pm-feats li { color: #e4ecfe; } .pm-tick { flex: 0 0 18px; width: 18px; height: 18px; border-radius: 50%; background: var(--pm-accent); position: relative; margin-top: 2px; } .pm-tick::after { content: ""; position: absolute; left: 6.2px; top: 4px; width: 4.5px; height: 8px; border-right: 2px solid #fff; border-bottom: 2px solid #fff; transform: rotate(42deg); } .pm-plan.pm-featured .pm-tick { background: rgba(255, 255, 255, 0.22); } .pm-plan.pm-featured .pm-tick::after { border-color: #fff; } .pm-chip-ai { font-family: var(--nav-font); font-size: 10px; font-weight: 600; letter-spacing: 0.08em; background: var(--pm-tint); color: var(--pm-accent); padding: 2px 6px; border-radius: 4px; margin-left: 6px; vertical-align: 1px; } .pm-plan.pm-featured .pm-chip-ai { background: rgba(255, 255, 255, 0.2); color: #fff; } .pm-compare-line { text-align: center; padding: 34px 0 12px; font-weight: 600; font-size: 16px; /* was 17 display */ letter-spacing: 0.04em; color: var(--pm-navy); } .pm-compare-line button, .pm-compare-line a { color: var(--pm-accent); text-decoration: none; /* underline removed */ font: inherit; /* same family/size/weight as the sentence (Roboto 16px/600) */ font-weight: 600; letter-spacing: inherit; /* tracks the sentence's 0.04em */ } .pm-compare-line button:hover, .pm-compare-line a:hover { /* the site's link fade (style.css a:hover opacity), signalling clickability */ opacity: 0.8; color: var(--pm-accent); } /* comparison table */ .pm-compare { display: none; padding: 8px 0 12px; } .pm-compare.pm-open { display: block; } .pm-tablescroll { overflow-x: auto; overflow-y: hidden; border: 1px solid var(--pm-line); border-radius: var(--pm-radius); background: #fff; } .pm-tablescroll table { border-collapse: collapse; width: 100%; min-width: 840px; font-size: 14px; /* was 14.5 */ } .pm-tablescroll thead th { background: #fff; text-align: left; padding: 18px 16px; font-weight: 600; /* was 700 — matches the page's other emphasised labels */ font-size: 15px; letter-spacing: 0.03em; /* added — same tracking as .pm-feat-label / plan buttons */ color: var( --pm-navy ); /* was inherited body colour — now the page's single dark shade */ border-bottom: 1px solid var(--pm-line); } .pm-tablescroll thead th:first-child { width: 34%; } .pm-tablescroll tbody th { text-align: left; font-weight: 500; color: #39425f; padding: 14px 16px; border-bottom: 1px solid var(--pm-line-soft); font-size: 14px; } .pm-tablescroll tbody td { padding: 14px 16px; border-bottom: 1px solid var(--pm-line-soft); color: #39425f; text-align: center; } .pm-tablescroll tbody tr:hover th, .pm-tablescroll tbody tr:hover td { background: #fbfcff; } .pm-tablescroll tr.pm-grouprow th { background: var(--pm-bg); font-family: var(--nav-font); font-size: 11px; /* was 11.5 mono */ font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--pm-muted); padding: 11px 16px; } .pm-tablescroll tr.pm-grouprow td { background: var(--pm-bg); } .pm-yes { display: inline-block; width: 18px; height: 18px; border-radius: 50%; background: var(--pm-accent); position: relative; } .pm-yes::after { content: ""; position: absolute; left: 6.2px; top: 4px; width: 4.5px; height: 8px; border-right: 2px solid #fff; border-bottom: 2px solid #fff; transform: rotate(42deg); } .pm-no { color: #b6b4cc; } /* ---------- SECTION RHYTHM ---------- */ .pm-section { padding: 88px 0; } .pm-section.pm-tint { background: var(--pm-bg); border-block: 1px solid var(--pm-line); } .pm-sec-head { max-width: 680px; margin-bottom: 40px; } .pm-sec-head-center { margin-inline: auto; text-align: center; } .pm-sec-head h2 { font-size: clamp(28px, 3.6vw, 40px); margin: 14px 0 14px; } .pm-sec-head p { font-size: 17px; color: var(--pm-muted); } /* ---------- CALCULATOR (signature) ---------- */ .pm-calc { /* was the blue gradient (#0645de -> #053ac3 -> #042e9a) */ background: var(--dark-blue, #1c274c); color: #fff; border-radius: 24px; overflow: hidden; display: grid; grid-template-columns: 1.05fr 0.95fr; box-shadow: 0 26px 62px rgba(5, 58, 195, 0.3); } .pm-calc-in { padding: 44px 40px; } .pm-calc-in .pm-eyebrow { color: #fff; } .pm-calc-in h2 { font-size: clamp(26px, 3vw, 34px); color: #fff; margin: 12px 0 10px; } .pm-calc-in > p { color: #fff; font-size: 15px; /* was 15.5 */ max-width: 430px; } .pm-field { margin-top: 26px; } .pm-field label { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; font-size: 14px; font-weight: 600; color: #fff; margin-bottom: 10px; } .pm-field label output { font-family: var(--nav-font); font-size: 15px; font-weight: 600; color: #fff; letter-spacing: 0.01em; } .pm-field input[type="range"] { -webkit-appearance: none; appearance: none; width: 100%; height: 5px; border-radius: 99px; background: rgba(255, 255, 255, 0.26); outline-offset: 6px; } .pm-field input[type="range"]::-webkit-slider-thumb { -webkit-appearance: none; width: 22px; height: 22px; border-radius: 50%; background: #fff; border: 5px solid var(--pm-accent-dark); box-shadow: 0 0 0 1px #fff; cursor: pointer; } .pm-field input[type="range"]::-moz-range-thumb { width: 22px; height: 22px; border-radius: 50%; background: #fff; border: 5px solid var(--pm-accent-dark); box-shadow: 0 0 0 1px #fff; cursor: pointer; } .pm-calc-out { /* overlay gradient removed — flat single-colour card */ padding: 44px 40px; display: flex; flex-direction: column; justify-content: center; border-left: 1px solid rgba(255, 255, 255, 0.16); } .pm-readout { font-family: var(--nav-font); font-size: 11px; /* was 11.5 mono */ letter-spacing: 0.13em; text-transform: uppercase; color: #fff; } .pm-bignum { font-family: var( --heading-font ); /* numeral role = .lp-stat-n, matches pricing-new */ font-weight: 800; font-size: clamp(40px, 5.2vw, 58px); letter-spacing: -0.04em; color: #fff; margin: 8px 0 4px; line-height: 1; } .pm-bigsub { color: #fff; font-size: 15px; } .pm-calc-rows { margin-top: 26px; display: grid; gap: 1px; background: rgba(255, 255, 255, 0.18); border-radius: 14px; overflow: hidden; } .pm-calc-row { display: flex; justify-content: space-between; gap: 16px; background: var( --dark-blue, #1c274c ); /* flat card colour; row gaps stay as hairlines */ padding: 13px 16px; font-size: 14px; /* was 14.5 */ } .pm-calc-row span:first-child { color: #fff; } .pm-calc-row span:last-child { font-family: var(--nav-font); font-weight: 600; color: #fff; letter-spacing: 0.01em; } .pm-calc-note { margin-top: 18px; font-size: 12px; /* was 12.5 */ color: #fff; line-height: 1.5; } /* ---------- STEPS ---------- */ .pm-steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; } .pm-step { background: #fff; border: 1px solid var(--pm-line); border-radius: var(--pm-radius); padding: 28px 24px; } .pm-step .pm-num { font-family: var(--nav-font); font-size: 14px; /* was 12 mono */ font-weight: 600; letter-spacing: 0.14em; color: var(--pm-accent); display: block; margin-bottom: 14px; } .pm-step h3 { font-size: 20px; /* was 19 — snapped to the repo step */ margin-bottom: 9px; } .pm-step p { font-size: 14px; /* was 14.5 */ color: var(--pm-muted); } /* ---------- TRUST ---------- */ .pm-trust { text-align: center; } .pm-trust h2 { font-size: clamp(22px, 2.6vw, 28px); margin-bottom: 28px; } .pm-industries { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; } .pm-industries a { border: 1px solid var(--pm-line); background: #fff; border-radius: 999px; padding: 9px 18px; font-size: 14px; font-weight: 500; color: #39425f; transition: 0.16s; letter-spacing: 0.03em; } .pm-industries a:hover { border-color: var(--pm-accent); color: var(--pm-accent); background: var(--pm-tint); } /* ---------- FAQ ---------- */ .pm-faq { max-width: 860px; margin: 0 auto; } .pm-faq-item { border-bottom: 1px solid var(--pm-line); } .pm-faq-item:first-child { border-top: 1px solid var(--pm-line); } .pm-faq-q { width: 100%; display: flex; justify-content: space-between; align-items: center; gap: 20px; text-align: left; padding: 22px 4px; font-weight: 700; font-size: 17px; color: var(--pm-navy); } .pm-faq-q:hover { color: var(--pm-accent); } .pm-plusmin { flex: 0 0 22px; width: 22px; height: 22px; position: relative; } .pm-plusmin::before, .pm-plusmin::after { content: ""; position: absolute; background: var(--pm-accent); border-radius: 2px; transition: 0.2s; } .pm-plusmin::before { left: 0; top: 10px; width: 22px; height: 2px; } .pm-plusmin::after { left: 10px; top: 0; width: 2px; height: 22px; } .pm-faq-item.pm-open .pm-plusmin::after { transform: rotate(90deg); opacity: 0; } .pm-faq-a { max-height: 0; overflow: hidden; transition: max-height 0.28s ease; } .pm-faq-a-inner { padding: 0 4px 24px; font-size: 15px; /* was 15.5 */ color: var(--pm-muted); max-width: 720px; } .pm-faq-a-inner p + p { margin-top: 12px; /* was inline in the mockup */ } .pm-faq-a-inner ul { margin: 12px 0 0 20px; display: grid; gap: 8px; list-style: disc; } .pm-faq-a-inner a { color: var(--pm-accent); text-decoration: underline; text-underline-offset: 3px; } /* ---------- CTA ---------- */ /* Matches the index page's closing CTA card (.lp-cta): a light rounded surface with blue / sand corner glows, dark cascade text, and a solid-blue + outline button pair. Values ported 1:1 from indexPage-landing.css so both pages close identically. */ .pm-section-tight { padding-top: 0; /* = .lp-section-tight */ } .pm-cta { text-align: center; border-radius: 32px; /* --lp-r-xl */ padding: 78px 32px; position: relative; overflow: hidden; border: 1px solid rgba(33, 33, 33, 0.1); /* --lp-line */ background: radial-gradient(50% 90% at 10% 0%, #d9e1ff 0%, rgba(217, 225, 255, 0) 65%), radial-gradient( 50% 90% at 90% 100%, #f6e3c8 0%, rgba(246, 227, 200, 0) 65% ), var(--img-bg-light-blue, #effaff); /* --lp-surface */ } .pm-cta h2 { /* family + colour from the common heading cascade, like .lp-cta h2. 18ch (the index cap) wrapped this longer headline onto 3 lines; 720px keeps it on one line like the old pricing CTA. */ max-width: 720px; margin: 0 auto; /* no eyebrow above it on this page */ } .pm-cta .pm-lede { /* colour from the body cascade; size via the fs-18 utility in markup. 560px measure = the old pricing CTA's wrap: two centred lines. */ max-width: 560px; margin: 16px auto 28px; } .pm-cta-btns { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; } /* CTA-scoped button skin: match the common .btn / .btn-primary / .btn-white-outline look used on index.php's CTA. The common classes can't be used directly inside .pm-main (the scoped *{padding:0} reset loads later and strips their padding), so the page variants are re-tuned here instead: normal tracking, medium weight, longer pill. Scoped to .pm-cta so the plan-card buttons are untouched. */ .pm-main .pm-cta .pm-btn { font-weight: 500; /* was 700 — the heavy weight read as "thick" */ letter-spacing: normal; /* was -0.01em */ padding: 13px 30px; /* was 12px 22px — index pills run longer */ } .pm-main .pm-cta .pm-btn-dark:hover { /* index behaviour: no lift, no colour shift — the primary button just fades on hover (style.css a:hover opacity, which this page's scoped reset normally neutralises) */ transform: none; background: var(--pm-accent); opacity: 0.8; color: #fff; } .pm-main .pm-cta .pm-btn-ghost { /* = .btn-white-outline: transparent, plain 1px hairline, no shadow */ border: 1px solid #c6cfdf; /* was var(--pm-line) #e1e8f4 — one step darker */ box-shadow: none; color: var(--pm-ink); background: transparent; } .pm-main .pm-cta .pm-btn-ghost:hover { /* same grey, one step darker again — not blue */ border-color: #a3aec4; /* was #b9c2d4 */ color: var(--pm-ink); background: transparent; } /* ---------- RESPONSIVE (repo Bootstrap 5 grid) ---------- */ @media (max-width: 1199.98px) { .pm-grid4 { grid-template-columns: repeat(2, 1fr); } .pm-calc { grid-template-columns: 1fr; } .pm-calc-out { border-left: 0; border-top: 1px solid rgba(255, 255, 255, 0.09); } } @media (max-width: 991.98px) { .pm-hero { padding-top: 132px; /* = index lg hero clearance */ } .pm-section { padding: 72px 0; /* = index --lp-pad at lg (was still 88px) */ } .pm-steps { grid-template-columns: 1fr; } } @media (max-width: 767.98px) { .pm-grid4 { grid-template-columns: 1fr; } .pm-cta { padding: 56px 24px; /* = .lp-cta at this breakpoint */ } .pm-plan .pm-desc { min-height: 0; } .pm-hero { padding-top: 124px; /* was 116 — index uses 124 at md */ } .pm-section { padding: 64px 0; /* = index --lp-pad at md */ } } @media (max-width: 575.98px) { .pm-section { padding: 56px 0; /* = index --lp-pad at sm */ } /* Phones: same pill design, text shrunk so chip + sentence share one line (fits from ~340px up). */ .pm-trial-pill { font-size: 13px; /* was 14 */ letter-spacing: 0.02em; /* was 0.06em */ gap: 8px; /* was 9 */ padding: 6px 12px 6px 6px; } .pm-trial-pill b { font-size: 10px; /* was 11 */ padding: 4px 10px; } .pm-hero { padding-top: 112px; /* = index sm hero clearance */ } .pm-plan { padding: 24px 20px 22px; /* index shrinks card padding at sm (.lp-prod: 24px) */ } .pm-calc-in, .pm-calc-out { padding: 32px 24px; } .pm-bignum { font-size: 36px; /* index shrinks display numerals at sm (40 -> 34/36) */ } .pm-cta { padding: 44px 18px; /* = .lp-cta at sm */ border-radius: 24px; /* = --lp-r-lg, down from 32 */ } .pm-cta-btns .pm-btn { width: 100%; /* = .lp-cta-row .btn — full-width CTA buttons on phones */ } } /* ---------- REDUCED MOTION ---------- AOS does not respect prefers-reduced-motion by itself; this guard preserves the mockup's accessibility behaviour. Scoped to the page. */ @media (prefers-reduced-motion: reduce) { .pm-page [data-aos] { opacity: 1 !important; transform: none !important; transition: none !important; animation: none !important; } .pm-main * { transition: none !important; } }