/* ========================================================================== PRICING Figma 9585:22952 Card geometry, the billing toggle and the plan tiles come from the pricing comp. Colour, type and motion are the landing page's own — same tokens, same reveal, so the two pages read as one site. ========================================================================== */ .zr-pr{ --pr-hair : #EAEAEA; --pr-tile : #EFEFEF; --pr-green: #00B95C; --pr-ink : #2A2A2A; --pr-starter:#0091FF; --pr-pro :#71C08F; --pr-ent :#FBB32C; position:relative; isolation:isolate; padding:clamp(40px, 3.4vw, 56px) var(--zr-pad) 0; } /* ── the hero ribbon ────────────────────────────────────────────────────── Sized in vw with NO pixel ceiling, so it keeps pace on a 2560 or a 3440 instead of stranding a fixed-width clip in the corner of a wide screen. `top` reaches back up over the nav's 104px of flow so the ribbon starts at the top of the page, and the nav pill — opaque, z-index 60 — passes in front of it. The mask is what stops it being a video in a box: dense at the top-right corner, gone by the time it reaches the cards, so it dissolves into the page instead of ending on an edge. */ .zr-pr__art{ position:absolute; z-index:0; pointer-events:none; top:-56px; right:0; width:76vw; aspect-ratio:16 / 10; overflow:hidden; /* The vertical extent is pulled in (86%) while the horizontal stays wide: the cards are opaque, so anything the mask keeps below their top edge is simply thrown away. Density belongs in the band between the nav and the cards, with only the tail carrying on behind them. */ -webkit-mask-image:radial-gradient(104% 86% at 92% 2%, #000 28%, rgba(0,0,0,.5) 60%, transparent 87%); mask-image:radial-gradient(104% 86% at 92% 2%, #000 28%, rgba(0,0,0,.5) 60%, transparent 87%); } .zr-pr__art video{ width:100%; height:100%; object-fit:cover; display:block; } .zr-pr__inner{ position:relative; z-index:1; display:flex; flex-direction:column; align-items:center; gap:40px; width:min(1280px, 100%); margin:0 auto; } .zr-pr__head{ display:flex; flex-direction:column; align-items:center; gap:20px; width:min(664px, 100%); text-align:center; } /* balance evens the two lines instead of letting the last one strand a single word — the headline was breaking as "…on every / plan". */ .zr-pr__title{ margin:0; text-wrap:balance; font-size:clamp(34px, 5.2vw, 56px); font-weight:500; line-height:1.2; letter-spacing:-.0357em; background:var(--zr-head-grad); -webkit-background-clip:text; background-clip:text; color:transparent; } .zr-pr__lede{ margin:0; text-wrap:balance; font-size:var(--zr-lead); line-height:26px; color:var(--zr-body); } .zr-pr__body{ display:flex; flex-direction:column; align-items:center; gap:24px; width:100%; } /* — billing toggle — */ /* The blue pill is one element that travels, not a background that appears under whichever button is pressed — so the state change has a direction. */ /* The blue pill is one element that travels, not a background that appears under whichever button is pressed — so the state change has a direction. Both halves are the same fixed width, which is what lets the thumb be a fixed width too and the travel a single number. */ .zr-pr__billing{ position:relative; display:flex; gap:4px; padding:4px; background:#fff; border:1px solid var(--pr-hair); border-radius:10px; } .zr-pr__thumb{ position:absolute; z-index:0; top:4px; left:4px; width:124px; height:36px; border-radius:8px; background:var(--zr-blue-lit); transition:translate .3s var(--zr-ease-out-quart); } .zr-pr__billing[data-period="yearly"] .zr-pr__thumb{ translate:128px 0; } .zr-pr__billing button{ position:relative; z-index:1; display:inline-flex; align-items:center; justify-content:center; gap:6px; width:124px; height:36px; border:0; border-radius:8px; background:none; cursor:pointer; font:inherit; font-size:15px; color:var(--zr-body); transition:color .2s var(--zr-ease-out-quad); } .zr-pr__billing button:hover{ color:var(--zr-ink); } .zr-pr__billing button[aria-pressed="true"], .zr-pr__billing button[aria-pressed="true"]:hover{ color:#fff; } /* the discount rides inside the Yearly half rather than sitting beside the control, so it belongs to the option it describes. On the blue it is a knock-out of the button's own white; off the blue it keeps the green. */ .zr-pr__off{ text-decoration:none; font-size:11px; font-weight:600; line-height:1; letter-spacing:.01em; padding:3px 5px; border-radius:5px; color:var(--pr-green); background:rgba(0,185,92,.12); transition:color .2s var(--zr-ease-out-quad), background .2s var(--zr-ease-out-quad); } button[aria-pressed="true"] .zr-pr__off{ color:#fff; background:rgba(255,255,255,.24); } @media (prefers-reduced-motion:reduce){ .zr-pr__thumb{ transition:none; } } /* — the three cards — */ .zr-pr__plans{ display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:24px; align-items:stretch; width:100%; } .zr-plan{ display:flex; flex-direction:column; gap:24px; padding:24px; background:#fff; border:1px solid var(--pr-hair); border-radius:20px; } /* The recommended tier. The comp lights it with an even inset halo; shifting that glow down off the top edge gives the card a light source instead of a uniform rim, which is what makes it sit forward of the other two. The glow itself breathes — the shadow is the thing animating, no extra layer over the card, and one colour throughout: the same #0091FF it is lit with at rest. Only the depth and the spread move. The keyframes are weighted like a breath rather than a even pulse: it draws in over the first 42%, holds at the top for a beat, then lets go across the remaining half. A symmetric sine reads mechanical; the hold is what makes it read as breathing. */ .zr-plan--featured{ border-color:var(--zr-blue-lit); box-shadow:inset 0 14px 34px -10px rgba(0,145,255,.38), inset 0 -2px 18px -8px rgba(0,145,255,.18); animation:zr-plan-glow 6s ease-in-out infinite; } @keyframes zr-plan-glow{ 0%, 100%{ box-shadow:inset 0 14px 34px -10px rgba(0,145,255,.30), /* out */ inset 0 -2px 18px -8px rgba(0,145,255,.13); } 42%, 52%{ box-shadow:inset 0 19px 46px -10px rgba(0,145,255,.50), /* in */ inset 0 -2px 24px -8px rgba(0,145,255,.22); } } @media (prefers-reduced-motion:reduce){ .zr-plan--featured{ animation:none; } } .zr-plan__top{ display:flex; flex-direction:column; gap:16px; } .zr-plan__ident{ display:flex; flex-direction:column; gap:14px; } .zr-plan__row{ display:flex; align-items:center; gap:12px; flex-wrap:wrap; } .zr-plan__tile{ flex:0 0 auto; display:grid; place-items:center; width:56px; height:56px; background:#fff; border:1px solid var(--pr-tile); border-radius:8px; box-shadow:0 1px 2px rgba(0,0,0,.1), inset 0 3px 14px rgba(255,255,255,.35); } .zr-plan__tile svg{ width:33.6px; height:33.6px; display:block; } .zr-plan--starter .zr-plan__tile{ color:var(--pr-starter); } .zr-plan--pro .zr-plan__tile{ color:var(--pr-pro); } .zr-plan--ent .zr-plan__tile{ color:var(--pr-ent); } .zr-plan__name{ margin:0; font-size:24px; font-weight:500; line-height:26px; color:var(--zr-ink); } .zr-plan__flag{ display:inline-flex; align-items:center; height:24px; padding:0 10px; border-radius:8px; background:var(--zr-blue-lit); font-size:14px; line-height:24px; color:#fff; white-space:nowrap; } .zr-plan__desc{ margin:0; text-wrap:pretty; font-size:16px; line-height:24px; color:var(--zr-body); } .zr-plan__price{ margin:0; display:flex; align-items:flex-end; gap:12px; flex-wrap:wrap; min-height:58px; } .zr-plan__amount{ font-size:clamp(38px, 3.4vw, 48px); font-weight:500; line-height:1.1; letter-spacing:-.0417em; white-space:nowrap; background:var(--zr-head-grad); -webkit-background-clip:text; background-clip:text; color:transparent; } .zr-plan__per{ font-size:clamp(20px, 2.2vw, 28px); font-weight:400; letter-spacing:normal; -webkit-text-fill-color:var(--zr-body); color:var(--zr-body); } .zr-plan__save{ display:inline-flex; align-items:center; padding:4px 8px; border-radius:8px; background:rgba(0,185,92,.1); font-size:14px; font-weight:600; color:var(--pr-green); white-space:nowrap; } .zr-plan__save:empty{ display:none; } /* Same sheen, same press as every other button on the site — the inset highlight is the whole of the nav and footer button language, so a pricing CTA that only changed its background read as a different control. */ .zr-plan__cta{ display:flex; align-items:center; justify-content:center; width:100%; height:54px; border:1px solid var(--pr-tile); border-radius:10px; background:#fff; color:var(--pr-ink); font-size:17px; font-weight:500; text-decoration:none; cursor:pointer; box-shadow:0 1px 2px rgba(0,0,0,.1), inset 0 3px 14px rgba(255,255,255,.35); transition:background .16s linear, box-shadow .16s linear; } .zr-plan__cta:hover{ background:#FAFAFB; box-shadow:0 1px 2px rgba(0,0,0,.1), inset 0 3px 14px rgba(255,255,255,.9), inset 0 0 0 1px rgba(0,0,0,.05); } .zr-plan__cta:active{ translate:0 1px; box-shadow:inset 0 2px 6px rgba(15,23,42,.16); } .zr-plan__cta--primary{ border:0; background:var(--zr-blue); color:#fff; box-shadow:inset 0 3px 14px rgba(255,255,255,.35); } .zr-plan__cta--primary:hover{ background:#0D55DD; box-shadow:inset 0 3px 14px rgba(255,255,255,.5); } .zr-plan__cta--primary:active{ translate:0 1px; box-shadow:inset 0 2px 8px rgba(15,23,42,.24); } .zr-plan__rule{ height:1px; margin:0; border:0; background:var(--pr-hair); } .zr-plan__set{ display:flex; flex-direction:column; gap:12px; } .zr-plan__set h4{ margin:0; font-size:15px; font-weight:500; color:var(--zr-ink); } .zr-plan__set ul{ display:flex; flex-direction:column; gap:11px; margin:0; padding:0; list-style:none; } /* The row is a flex container, so its label has to be ONE element. Left as loose text the numbers and the runs between them each became their own flex item and picked up the 10px gap — which is what was spacing "3 AI article generations + 3 content optimizations" apart. */ .zr-plan__set li{ display:flex; align-items:flex-start; gap:10px; font-size:14.5px; line-height:22px; color:var(--zr-body); } /* pretty pulls a word down off the line above rather than leaving the last line holding one — "…optimizations a / month" and "…and on / demand" were the two that kept doing it. */ .zr-plan__set li > span{ min-width:0; text-wrap:pretty; } .zr-plan__set li b{ font-weight:600; color:var(--zr-ink); } .zr-plan__set li > svg{ flex:0 0 auto; width:18px; height:18px; margin-top:2px; color:var(--pr-green); } /* withheld, not broken — grey rather than red, and the label dims with it */ .zr-plan__set li.is-out{ color:#9CA3AF; } .zr-plan__set li.is-out > svg{ color:#C4C9D1; } .zr-plan__set li.is-out b{ color:#9CA3AF; font-weight:400; } /* The platform list is text with a note beside it rather than three overlapped brand chips: at 22px the marks were unreadable, and three of seventeen is a worse answer than naming the ones people look for. */ .zr-info{ position:relative; display:inline-flex; vertical-align:-3px; width:15px; height:15px; margin-left:3px; color:#B6BCC6; cursor:help; } .zr-info:hover, .zr-info:focus-visible{ color:var(--zr-blue); outline:none; } .zr-info svg{ width:15px; height:15px; display:block; } .zr-info__tip{ position:absolute; z-index:5; bottom:calc(100% + 8px); left:50%; translate:-50% 0; width:max-content; max-width:220px; padding:8px 10px; border-radius:9px; background:#18181B; color:#fff; font-size:12px; font-weight:400; line-height:1.45; text-align:left; box-shadow:0 10px 26px -10px rgba(16,49,110,.45); opacity:0; visibility:hidden; translate:-50% 4px; transition:opacity .16s var(--zr-ease-out-quad), translate .16s var(--zr-ease-out-quad), visibility .16s; } .zr-info:hover .zr-info__tip, .zr-info:focus-visible .zr-info__tip{ opacity:1; visibility:visible; translate:-50% 0; } @media (max-width:1039px){ .zr-pr__plans{ grid-template-columns:1fr; width:min(440px, 100%); margin-inline:auto; } .zr-plan--featured{ order:-1; } /* lead with the recommended tier */ } @media (max-width:860px){ .zr-pr__inner{ gap:32px; } .zr-pr__head{ gap:16px; } /* a 2.4MB clip for a ribbon nobody can see on a phone. This hides it; withholding the download is the script's job, because display:none does NOT stop a