/** * The head-to-head comparison vocabulary — One Click Upsell vs. AfterSell, * vs. Upsell.com and vs. Rebuy. * * Ported from the Claude Design artboards `AfterSellVsOCU.dc.html`, * `UpsellVsOCU.dc.html` and `RebuyVsOCU.dc.html`, which the canvas * `Zipify.com Current Site.dc.html` imports for the `#compare-aftersell`, * `#compare-upsell` and `#compare-rebuy` routes. * * Third layer: `product.css` under it carries the bands, heads, buttons, * cards, brand rail and FAQ that ten pages share; this file carries what only * these three repeat among themselves. `inc/comparison/render.php` has the long * form of why that is its own layer rather than more rows in either * neighbour. * * The `/alternatives/` hub loads this too, for one rule set: the review card, * which it renders identically. Everything else here is scoped to `.zpc-vs`, * the wrapper the three page templates put around their sections, so the hub * pays for nothing it does not draw. * * LOCAL COLOURS. The three artboards are drawn in a slightly warmer palette * than the rest of the port — `#1D5FB6` where the theme says `--blue-500` * (#2d6be4), `#202122` where it says `--ink-900` (#1a1a1a), and a teal * `#248E88` for an affirmative cell that has no token at all. Rounding those * to the nearest token would move every figure, every eyebrow and every ✓ on * three long pages by a visible amount, so they are declared once here as * `--zpc-*` and used by name. Nothing outside these pages sees them. * * NOT PORTED, deliberately: * * - The artboards' resets, `@font-face` blocks and their own fixed masthead. * Same three reasons `product.css` gives at the top of its own header. * - The `display:none` "Verified 5-star Shopify App Store reviews" strip above * the review grid on all three. It is hidden in the design; a hidden element * is not a design decision to reproduce. * - The hero's `.zbtn-secondary` hover, which brightens a translucent white * overlay. On these white heroes that rule resolves to "no change"; the * ghost button's own hover in `product.css` is the one that can be seen. */ .zpc-vs { --zpc-blue:#1d5fb6; --zpc-blue-deep:#0a3a79; --zpc-ink:#202122; --zpc-mute:#5e6670; --zpc-yes:#248e88; --zpc-no:#f0305a; --zpc-tint:rgba(239,246,255,.5); --zpc-head:#d7d9db; --zpc-head-mine:#4d8ce0; } /* ========================================================================== PAGE SCALE These pages run a flatter type scale than the product pages: a 32px h2 rather than the 50px `product.css` tops out at, because a comparison page is read rather than scanned and it has twenty bands to get through. ========================================================================== */ .zpc-vs .zpx-wrap { padding-block:72px; max-width:1072px; } /* `product.css` closes every `--subtle` band with a hairline, because the four product artboards draw one. These three do not: where they want a rule they put it on the band BELOW, which is what `seam` is for, so a bottom rule here would be a second line nobody asked for. */ .zpc-vs .zpx-band--subtle { border-bottom:0; } /* The artboards close some bands with a hairline rather than letting two grounds meet. Which ones is per band and per page — the section templates pass `seam` — because the artboards are not consistent about it and guessing from adjacency would add rules the design does not draw. The colour is the artboards' own #eef1f5, a shade lighter than `--ink-200`. */ .zpc-vs .zpx-band--seam { border-top-color:#eef1f5; } .zpc-vs .zpx-h1 { font-size:clamp(29px,3.4vw,48px); line-height:1.2; letter-spacing:-0.02em; color:var(--zpc-ink); } .zpc-vs .zpx-h2 { font-size:clamp(23px,2.6vw,32px); line-height:1.15; letter-spacing:-0.02em; color:var(--zpc-ink); } .zpc-vs .zpx-h3 { font-size:clamp(20px,2vw,26px); line-height:1.2; letter-spacing:-0.02em; color:var(--zpc-ink); } .zpc-vs .zpx-eyebrow { margin-bottom:8px; font-weight:700; color:var(--zpc-blue); } .zpc-vs .zpx-lede { font-size:16px; line-height:1.65; color:var(--zpc-ink); } .zpc-vs .zpx-head { margin-bottom:38px; } .zpc-vs .zpx-on-dark .zpx-h2, .zpc-vs .zpx-on-dark .zpx-h3 { color:#fff; } .zpc-vs .zpx-on-dark .zpx-eyebrow { color:var(--zip-yellow); } /* Body copy, the artboards' workhorse paragraph. */ .zpc-vs .zpc-body { margin:0 0 20px; font-size:16px; line-height:1.65; color:var(--zpc-ink); } .zpc-vs .zpc-body:last-child { margin-bottom:0; } .zpc-vs .zpc-body strong { color:var(--ink-900); font-weight:700; } .zpc-vs .zpc-body--center { text-align:center; } /* The source and as-of notes under a table. Italic, as in the artboards. */ .zpc-vs .zpc-fine { margin:14px 0 0; font-size:12px; line-height:1.55; font-style:italic; color:var(--ink-400); text-align:center; } .zpc-vs .zpc-fine a { color:inherit; text-decoration:underline; } /* A measure narrower than the band, centred — the artboards' `max-width:760px` on a prose-only band. */ .zpc-vs .zpc-measure { max-width:760px; margin-inline:auto; } .zpc-vs .zpc-measure--wide { max-width:960px; margin-inline:auto; } /* The soft centre-weighted rule the artboards set between two paragraphs of a verdict, rather than a full-width hairline. */ .zpc-vs .zpc-rule { height:1px; margin:24px 0; border:0; background:linear-gradient(90deg,rgba(227,229,234,0) 0%,#e3e5ea 50%,rgba(227,229,234,0) 100%); } /* ========================================================================== HERO, HEADLINE FIGURES AND BRAND RAIL One wash across all three, as in the artboard's `hero-brand-wrap`: bottom to top, `--ink-050` to white by 62%. Painting it on the wrapper rather than on each band is the whole reason §1 renders three sections from one file. `body.zp-header-light` is what stops the sticky header overlaying this — see the filter in `inc/product/assets.php`. ========================================================================== */ .zpc-wash { background:linear-gradient(0deg,var(--ink-050) 0%,var(--surface) 62%); } .zpc-vs .zpc-wash .zpx-band { background:transparent; } .zpc-vs .zpc-figures .zpx-wrap { padding-block:32px; max-width:1080px; } .zpc-vs .zpc-rail { border-bottom:1px solid #eef1f5; } /* The rail's lede is yellow on the dark bands the other five pages put it on; here the band is white. */ .zpc-vs .zpc-rail .zpx-rail__lede { color:var(--zpc-blue); opacity:1; } .zpc-vs .zpc-rail .zpx-rail-band { padding-block:48px 16px; } .zpc-vs .zpc-hero .zpx-wrap { padding-block:64px 56px; display:grid; grid-template-columns:1.05fr .95fr; gap:52px; align-items:center; } .zpc-hero__head { max-width:none; margin-bottom:0; } .zpc-hero__head .zpx-h1 { max-width:15ch; margin-bottom:20px; } .zpc-hero__head .zpx-lede { max-width:44ch; font-size:19px; line-height:1.55; } /* The one gradient-filled phrase in each headline. */ .zpc-hero__hl { background:linear-gradient(135deg,var(--zpc-blue) 0%,var(--zpc-blue-deep) 100%); } @supports ((-webkit-background-clip:text) or (background-clip:text)) { .zpc-hero__hl { -webkit-background-clip:text; background-clip:text; color:transparent; } } .zpc-hero__cta { display:flex; flex-wrap:wrap; gap:14px; margin-top:28px; } /* The hero pair is the one place these pages use a light-ground outline button; `product.css`'s `--ghost` is written for dark grounds. */ .zpc-vs .zpc-hero__cta .zpx-btn--ghost { border:1px solid var(--ink-300); color:var(--ink-900); } .zpc-vs .zpc-hero__cta .zpx-btn--ghost:hover, .zpc-vs .zpc-hero__cta .zpx-btn--ghost:focus { border-color:var(--ink-900); background:var(--ink-050); color:var(--ink-900); } /* ========================================================================== PRICING CALCULATOR Two logarithmic sliders, two prices, a verdict. `comparison.js` drives it; the markup renders a coherent worked example with no script at all. ========================================================================== */ .zpc-calc { padding:26px 26px 24px; border:1px solid var(--ink-200); border-radius:16px; background:var(--surface); box-shadow:0 24px 60px rgba(13,31,78,.16); } .zpc-calc__eyebrow { margin:0 0 4px; text-align:center; font-size:12px; font-weight:800; letter-spacing:var(--ls-eyebrow); text-transform:uppercase; color:var(--zpc-blue); } .zpc-calc__title { margin:0 0 20px; text-align:center; font-size:22px; font-weight:800; letter-spacing:-0.02em; color:var(--zpc-ink); } .zpc-calc__dials { display:flex; flex-direction:column; gap:18px; } .zpc-dial__row { display:flex; justify-content:space-between; align-items:baseline; gap:12px; margin-bottom:4px; } .zpc-dial__label { font-size:13px; font-weight:600; letter-spacing:.04em; color:var(--zpc-ink); /* The artboards title-case both dial labels — "Monthly Store Orders", not "Monthly store orders" — with `text-transform` rather than in the copy, so the string a screen reader reads out stays sentence case. */ text-transform:capitalize; } .zpc-dial__value { font-size:18px; font-weight:700; letter-spacing:-0.02em; color:var(--zpc-ink); font-variant-numeric:tabular-nums; } /* The artboards' calculator slider is a size up from the theme's default: a 26px thumb over a track whose unplayed remainder is `--ink-300`, a shade darker than the `--ink-200` `zp-range` falls back to elsewhere. Scoped to this card rather than changed in `theme.css`, because every other page's sliders are drawn at the default. */ .zpc-calc zp-range { --zp-range-track:var(--ink-300); } .zpc-calc zp-range input[type="range"]::-webkit-slider-thumb { width:26px; height:26px; } .zpc-calc zp-range input[type="range"]::-moz-range-thumb { width:26px; height:26px; } .zpc-calc__prices { display:grid; grid-template-columns:1fr 1px 1fr; gap:12px; margin:20px 0 0; align-items:start; } .zpc-calc__rule { background:var(--ink-200); } .zpc-calc__price { padding:8px 12px; text-align:center; } .zpc-calc__price dt { margin-bottom:5px; font-size:12px; font-weight:800; letter-spacing:var(--ls-eyebrow); text-transform:uppercase; color:var(--ink-500); } .zpc-calc__price--mine dt { color:var(--zpc-blue); } .zpc-calc__price dd { margin:0; font-size:32px; font-weight:800; line-height:1; letter-spacing:-0.02em; color:var(--zpc-ink); font-variant-numeric:tabular-nums; } .zpc-calc__price dd span { font-size:12px; font-weight:700; color:var(--ink-400); } /* Where the rival stops publishing and quotes instead, the cell holds a sentence rather than a figure and drops out of the price's type size. */ .zpc-calc__price dd[data-quote] { font-size:16px; line-height:1.3; } /* The "Zipify Plus eligible" / "Enterprise quote" lines the script appends. */ .zpc-calc__price dd small { display:block; margin-top:7px; font-size:10px; font-weight:800; letter-spacing:.1em; text-transform:uppercase; } .zpc-calc__caption { margin:7px 0 0; font-size:11px; font-weight:700; letter-spacing:var(--ls-button); color:var(--ink-400); } .zpc-calc__verdict { margin:16px 0 14px; min-height:22px; text-align:center; font-size:28px; font-weight:900; letter-spacing:-0.02em; color:var(--zpc-blue); } .zpc-calc__verdict[data-tone="win"] { color:#0dc4ba; } .zpc-calc__verdict[data-tone="lose"] { color:var(--ink-500); } .zpc-calc__verdict[data-tone="plus"] { color:var(--blue-700); } .zpc-calc__scope { display:flex; flex-direction:column; align-items:center; gap:7px; margin-bottom:14px; } .zpc-calc__tabs { display:inline-flex; gap:2px; padding:3px; border-radius:var(--r-pill); background:var(--ink-100); } button.zpc-calc__tab { padding:5px 12px; border:0; border-radius:var(--r-pill); background:transparent; color:var(--zpc-mute); font-family:inherit; font-size:11.5px; font-weight:700; cursor:pointer; transition:background var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out); } button.zpc-calc__tab[aria-pressed="true"] { background:#fff; color:var(--zpc-blue); box-shadow:0 1px 3px rgba(13,31,78,.14); } button.zpc-calc__tab:focus-visible { outline:none; box-shadow:var(--focus-ring); } .zpc-calc__scopenote { margin:0; max-width:42ch; min-height:34px; text-align:center; font-size:12px; line-height:1.45; color:var(--zpc-mute); } .zpc-calc__note { margin:0; padding:12px 14px 0; border-top:1px solid var(--ink-200); font-size:12px; line-height:1.45; color:var(--zpc-ink); text-align:center; } .zpc-calc__note strong { font-weight:800; color:var(--ink-900); } .zpc-calc__link { margin:14px 0 0; text-align:center; font-size:12.5px; line-height:1.5; } .zpc-calc__link a { font-weight:700; color:var(--zpc-blue); text-decoration:none; border-bottom:1px solid rgba(29,95,182,.35); } /* ========================================================================== FIGURE PAIRS Gradient numerals over a label, divided by a hairline. Used beside a band's copy eleven times across the three pages. ========================================================================== */ .zpc-stats { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:0; margin:24px 0 0; } .zpc-stats--3 { grid-template-columns:repeat(3,minmax(0,1fr)); } /* The headline trio under each hero stands on its own rule rather than beside copy, so it is centred and spaced wider. */ .zpc-stats--wide { grid-template-columns:repeat(3,minmax(0,1fr)); gap:24px; margin:0; text-align:center; } .zpc-stats--top { border-top:1px solid var(--ink-200); padding-top:28px; } .zpc-stat { display:flex; flex-direction:column-reverse; gap:8px; } .zpc-stats .zpc-stat + .zpc-stat { padding-left:32px; border-left:1px solid var(--ink-200); } .zpc-stats--wide .zpc-stat + .zpc-stat { padding-left:24px; } .zpc-stat__value { margin:0; font-size:clamp(28px,3vw,40px); font-weight:900; line-height:1; letter-spacing:-0.02em; background:linear-gradient(135deg,var(--zpc-blue) 0%,var(--blue-700) 100%); } @supports ((-webkit-background-clip:text) or (background-clip:text)) { .zpc-stat__value { -webkit-background-clip:text; background-clip:text; color:transparent; } } .zpc-stats--wide .zpc-stat__value { font-size:clamp(34px,4vw,48px); } .zpc-stat__label { font-size:12px; line-height:1.4; color:rgba(32,33,34,.75); } .zpc-stats--wide .zpc-stat__label { margin-top:8px; font-size:12px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--zpc-mute); } /* ========================================================================== FEATURE MATRIX ========================================================================== */ /* The pricing-model paragraph the artboards hang under the table, over a rule the full width of the measure rather than of the band. */ .zpc-modelnote { max-width:760px; margin:56px auto 0; padding-top:44px; border-top:1px solid var(--ink-200); } .zpc-modelnote .zpx-head { margin-bottom:0; } /* `reset.css` ships a generic table treatment aimed at tables pasted into post content: a 1px box rule on every cell, a grey zebra on odd rows, a hover tint, a bottom margin, and a top rule on the header row under a ``. Each is switched off explicitly rather than merely restyled — the same thing `legal.css` does for the sub-processor table, and for the same two reasons. The reset uses the `border` shorthand, so declaring a `border-bottom` of our own would leave its other three edges standing; and several of its selectors are four elements deep, so a rule here has to match that shape to outrank them. The caption rule is the one `legal.css` never had to think about: these tables carry a visually hidden `` naming what is being compared, which is exactly what brings `table caption+thead tr:first-child th` into play. Everything below this block that paints a cell is written at the same specificity as these and placed after them, so the order in the file is what resolves it. */ .zpc-matrix__table th, .zpc-matrix__table td, .zpc-tiers th, .zpc-tiers td { border:0; } .zpc-matrix__table caption + thead tr:first-child > th, .zpc-tiers caption + thead tr:first-child > th { border:0; } .zpc-matrix__table, .zpc-tiers table { margin:0; } .zpc-matrix__table tbody > tr:nth-child(odd) > th, .zpc-matrix__table tbody > tr:nth-child(odd) > td, .zpc-matrix__table tbody tr:hover > th, .zpc-matrix__table tbody tr:hover > td, .zpc-tiers tbody > tr:nth-child(odd) > th, .zpc-tiers tbody > tr:nth-child(odd) > td, .zpc-tiers tbody tr:hover > th, .zpc-tiers tbody tr:hover > td { background:transparent; } .zpc-matrix { overflow-x:auto; border:1px solid var(--ink-200); border-radius:16px; background:var(--surface); box-shadow:0 4px 12px rgba(13,31,78,.08); } .zpc-matrix:focus-visible { outline:none; box-shadow:var(--focus-ring), 0 4px 12px rgba(13,31,78,.08); } .zpc-matrix__table { width:100%; min-width:760px; border-collapse:collapse; font-size:14px; } .zpc-matrix__table thead th { padding:16px 22px; height:54px; background:var(--zpc-head); color:var(--zpc-mute); font-size:14px; font-weight:800; letter-spacing:var(--ls-eyebrow); text-transform:uppercase; } .zpc-matrix__corner { width:280px; text-align:left; } .zpc-matrix__table thead th.zpc-matrix__mine { background:var(--zpc-head-mine); color:#fff; } .zpc-matrix__table thead th.zpc-matrix__mine, .zpc-matrix__table thead th.zpc-matrix__theirs { width:355px; text-align:center; } .zpc-matrix__table tbody > tr > th[scope="row"] { width:280px; padding:15px 22px; text-align:left; vertical-align:top; background:var(--surface); border-bottom:1px solid var(--ink-200); font-size:14px; font-weight:700; color:var(--zpc-ink); } .zpc-matrix__table tbody > tr > td { padding:15px 22px; text-align:center; vertical-align:top; background:var(--surface); border-bottom:1px solid var(--ink-200); color:var(--zpc-ink); } .zpc-matrix__table tbody > tr > td.zpc-matrix__mine { background:var(--zpc-tint); } .zpc-matrix__table tbody > tr:last-child > th[scope="row"], .zpc-matrix__table tbody > tr:last-child > td { border-bottom:0; } .zpc-matrix__table tbody > tr.zpc-matrix__group > th { padding:11px 22px; text-align:left; background:var(--ink-100); border-top:1px solid var(--ink-200); border-bottom:1px solid var(--ink-200); font-size:11px; font-weight:800; letter-spacing:.14em; text-transform:uppercase; color:var(--zpc-mute); } .zpc-v { font-weight:700; } .zpc-v--yes { color:var(--zpc-yes); } .zpc-v--no { color:var(--zpc-no); } .zpc-v--soon { color:var(--zpc-yes); } /* ========================================================================== MISCELLANY THE BANDS SHARE ========================================================================== */ /* A centred button under a band of centred prose. */ .zpc-center-cta { display:flex; justify-content:center; flex-wrap:wrap; gap:12px; margin-top:24px; } /* A screenshot that is the band's whole width — the PostProfit dashboard. */ .zpc-vs .zpc-shot { border-radius:16px; margin-block:32px; } /* The AI Assistant band: a wide paragraph, then a kicker, then three figures over a rule. */ .zpc-assistant__body { max-width:70ch; margin-bottom:36px; } .zpc-assistant__kicker { margin:0 0 20px; font-size:12px; font-weight:700; letter-spacing:var(--ls-eyebrow); text-transform:uppercase; color:var(--zpc-mute); } /* ========================================================================== PRICING MODEL CARDS ========================================================================== */ .zpc-models { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:18px; align-items:start; } .zpc-model { display:flex; flex-direction:column; overflow:hidden; border:1px solid var(--ink-200); border-radius:16px; background:var(--surface); box-shadow:0 4px 12px rgba(13,31,78,.08); } .zpc-model__brand { margin:0; padding:16px 24px; background:var(--ink-100); font-size:12px; font-weight:800; letter-spacing:.14em; text-transform:uppercase; color:var(--zpc-mute); } .zpc-model--mine .zpc-model__brand { background:var(--zpc-head-mine); color:#fff; } .zpc-model__body { display:flex; flex-direction:column; gap:18px; flex:1 1 auto; padding:26px 24px 24px; } .zpc-model__title { margin:0 0 8px; font-size:21px; font-weight:800; line-height:1.25; letter-spacing:-0.02em; color:var(--zpc-ink); } .zpc-model__blurb { margin:0; font-size:15px; line-height:1.6; color:var(--zpc-mute); } .zpc-model__foot { margin:0; font-size:13px; line-height:1.55; color:var(--zpc-mute); } .zpc-tiers { overflow-x:auto; border:1px solid var(--ink-200); border-radius:12px; background:var(--surface); } .zpc-tiers table { width:100%; border-collapse:collapse; } .zpc-tiers th, .zpc-tiers td { padding:9px 12px; text-align:left; } .zpc-tiers thead th { background:var(--ink-050); color:var(--zpc-mute); font-size:10px; font-weight:800; letter-spacing:var(--ls-eyebrow); text-transform:uppercase; } .zpc-tiers tbody > tr > th { border-top:1px solid var(--ink-200); font-size:13px; font-weight:400; color:var(--zpc-ink); } .zpc-tiers tbody > tr > td { border-top:1px solid var(--ink-200); font-size:13px; font-weight:800; color:var(--ink-900); } /* The price column is tinted on the OCU card the way the matrix tints its own column, so the two tables read as the same argument. */ .zpc-model--mine .zpc-tiers tbody > tr > td:nth-child(2) { background:var(--zpc-tint); } .zpc-model--mine .zpc-tiers tbody > tr > td:nth-child(3) { color:var(--zpc-blue); } .zpc-tiers__num { text-align:right; white-space:nowrap; } /* ========================================================================== "WHY THE MODEL MATTERS" CALLOUT ========================================================================== */ .zpc-callout { margin-top:28px; padding:24px 28px; border:1px solid var(--ink-200); border-radius:18px; background:var(--surface); box-shadow:0 4px 12px rgba(13,31,78,.06); } .zpc-callout__kicker { display:block; margin-bottom:12px; font-size:11px; font-weight:800; letter-spacing:.14em; text-transform:uppercase; color:var(--zpc-mute); } .zpc-callout__row { display:flex; gap:16px; align-items:flex-start; } .zpc-callout__icon { display:flex; align-items:center; justify-content:center; flex:0 0 auto; width:40px; height:40px; border-radius:11px; background:var(--blue-900); color:var(--zip-yellow); } .zpc-callout__title { margin:0 0 6px; font-size:18px; font-weight:900; letter-spacing:-0.018em; color:var(--zpc-ink); } .zpc-callout__body { margin:0; font-size:15px; line-height:1.6; color:var(--zpc-mute); } /* ========================================================================== QUOTED PRICING COMPLAINT ========================================================================== */ .zpc-quotecard { max-width:760px; margin:28px auto 0; padding:24px 28px; border:1px solid var(--ink-200); border-radius:18px; background:var(--surface); box-shadow:0 4px 12px rgba(13,31,78,.06); } .zpc-quotecard__kicker { margin:0 0 12px; font-size:11px; font-weight:800; letter-spacing:.14em; text-transform:uppercase; color:var(--zpc-mute); } .zpc-quotecard__quote { margin:0; font-size:17px; line-height:1.55; font-style:italic; letter-spacing:-0.01em; color:var(--zpc-ink); } .zpc-quotecard__source { margin:14px 0 0; font-size:13px; color:var(--zpc-mute); } .zpc-quotecard__source cite { font-style:normal; } /* ========================================================================== NUMBERED RECOMMENDATIONS The `01.` is a CSS counter, not text — see zpc_steps(). ========================================================================== */ .zpc-steps { counter-reset:zpc-step; list-style:none; margin:0 auto; padding:0; max-width:820px; display:flex; flex-direction:column; gap:24px; } .zpc-step { counter-increment:zpc-step; display:flex; gap:32px; align-items:flex-start; } .zpc-step::before { content:"0" counter(zpc-step) "."; flex:0 0 70px; font-size:40px; font-weight:900; line-height:1.2; background:linear-gradient(135deg,#ffeba4 0%,var(--zip-yellow) 61%); } @supports ((-webkit-background-clip:text) or (background-clip:text)) { .zpc-step::before { -webkit-background-clip:text; background-clip:text; color:transparent; } } .zpc-step p { margin:0; font-size:16px; line-height:1.6; color:rgba(32,33,34,.75); } .zpc-step__lead { display:block; margin-bottom:2px; color:var(--ink-900); } /* ========================================================================== CLOSING PULL-QUOTE ========================================================================== */ .zpc-vs .zpc-pull-band { overflow:clip; } .zpc-vs .zpc-pull-band .zpx-wrap { padding-block:56px; } .zpc-pull { position:relative; } .zpc-pull__mark { position:absolute; pointer-events:none; font-size:250px; line-height:1; font-weight:900; color:rgba(29,95,182,.08); } .zpc-pull__mark--open { top:-24px; left:4%; } .zpc-pull__mark--close { bottom:-132px; right:4%; } .zpc-pull__inner { position:relative; margin:0; text-align:center; } .zpc-pull__kicker { margin:0 0 30px; font-size:13px; font-weight:800; letter-spacing:var(--ls-eyebrow); text-transform:uppercase; color:var(--zpc-blue); } .zpc-pull__quote { max-width:820px; margin:0 auto; font-size:clamp(20px,2.2vw,24px); font-weight:600; font-style:italic; line-height:1.42; letter-spacing:-0.01em; color:var(--zpc-ink); } .zpc-pull__hl { font-style:normal; background:linear-gradient(135deg,var(--zpc-blue) 0%,var(--zpc-blue-deep) 100%); } @supports ((-webkit-background-clip:text) or (background-clip:text)) { .zpc-pull__hl { -webkit-background-clip:text; background-clip:text; color:transparent; } } .zpc-pull__by { margin:32px 0 0; font-size:18px; font-weight:700; letter-spacing:.01em; text-transform:uppercase; color:var(--zpc-ink); } /* ========================================================================== DARK FAQ AND CLOSING BAND Both sit on the artboards' #0a1533, a shade deeper than `--ground-dark`. ========================================================================== */ .zpc-vs .zpc-dark.zpx-band--ink { background:#0a1533; } .zpc-vs .zpc-faq .zpx-wrap { max-width:1000px; padding-block:80px; } .zpc-vs .zpc-faq .zpx-head { margin-bottom:60px; } /* `product.css` writes the FAQ for a light ground; on these two it inverts. */ .zpc-vs .zpx-on-dark .zpx-faq__item { border-top:0; border-bottom:1px solid rgba(255,255,255,.12); } .zpc-vs .zpx-on-dark .zpx-faq__item:last-child { border-bottom:1px solid rgba(255,255,255,.12); } .zpc-vs .zpx-on-dark .zpx-faq__q { padding:20px 0; font-size:16px; font-weight:700; color:#fff; } .zpc-vs .zpx-on-dark .zpx-faq__q:hover { color:#fff; } .zpc-vs .zpx-on-dark .zpx-faq__a { max-width:none; padding-bottom:28px; font-size:14px; line-height:1.7; color:rgba(255,255,255,.88); } .zpc-vs .zpx-on-dark .zpx-faq__a strong { color:#fff; } .zpc-vs .zpc-close-band .zpx-wrap { padding-block:0 56px; } /* The band above it is the FAQ on two of the three pages and the pull-quote on the third, so the card carries its own top margin rather than relying on a sibling's padding. */ .zpc-vs .zpc-close-band--alone .zpx-wrap { padding-block:56px; } .zpc-close { padding:32px 40px; border-radius:24px; text-align:center; background:linear-gradient(180deg,#051b38 0%,#0a3670 100%); } .zpc-close__logo { height:30px; width:auto; margin:0 auto 26px; display:block; } .zpc-close__badge { margin:0 0 8px; font-size:12px; font-weight:800; letter-spacing:var(--ls-eyebrow); text-transform:uppercase; color:var(--zip-yellow); } .zpc-vs .zpc-close .zpx-h2 { max-width:880px; margin-inline:auto; color:#fff; } .zpc-close__lede { max-width:660px; margin:16px auto 0; font-size:14px; line-height:1.6; color:rgba(255,255,255,.7); } .zpc-close__cta { display:flex; justify-content:center; flex-wrap:wrap; gap:12px; margin-top:24px; } /* ========================================================================== SPLIT BANDS AND FEATURE COLUMNS The image-beside-copy bands, and the two lists of cart features under one of them. ========================================================================== */ .zpc-split { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:44px; align-items:center; } .zpc-split__media { border-radius:16px; overflow:hidden; } .zpc-split__media img { width:100%; height:auto; display:block; } /* The artboard puts the image column first on the cart band and second on the funnel and AI bands; `--flip` is that, without reordering the source, so the copy still comes first for a screen reader. */ .zpc-split--flip .zpc-split__media { order:-1; } .zpc-featcols { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:28px; margin-top:28px; padding-top:24px; border-top:1px solid var(--ink-200); } .zpc-featcols h3 { margin:0 0 12px; font-size:11px; font-weight:800; letter-spacing:.14em; text-transform:uppercase; color:var(--zpc-mute); } .zpc-featcols ul { list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:7px; } .zpc-featcols li { font-size:14px; line-height:1.45; color:var(--zpc-ink); } /* ========================================================================== BAND MEASURES The artboards hold different bands to different widths; `.zpx-wrap`'s own 1072px is the common case and these are the exceptions. ========================================================================== */ .zpc-vs .zpc-postprofit .zpx-wrap, .zpc-vs .zpc-funnel .zpx-wrap, .zpc-vs .zpc-cart .zpx-wrap, .zpc-vs .zpc-ai .zpx-wrap, .zpc-vs .zpc-assistant .zpx-wrap, .zpc-vs .zpc-maturity .zpx-wrap { max-width:1072px; } .zpc-vs .zpc-reviews .zpx-wrap { max-width:1180px; } .zpc-vs .zpc-reviews__grid { gap:22px; align-items:start; max-width:1068px; margin-inline:auto; } .zpc-vs .zpc-pricing .zpx-wrap { max-width:1120px; } .zpc-vs .zpc-assessment .zpx-wrap, .zpc-vs .zpc-verdict .zpx-wrap { padding-block:64px; } /* ========================================================================== VERDICT EXCEPTION LISTS The Upsell.com and Rebuy pages name their exceptions as a list before the closing paragraph. An unbulleted `