at 62ch, which narrows this line to less than the panel's full width, and a narrower block with no auto margins sits flush left regardless of text-align. margin-inline: auto is what actually centres the box. Caught 24 August 2026 alongside the same fix on .price-panel .seats. */ margin-inline: auto; } .stack { list-style: none; margin: 0; padding: 0; } .stack li { display: flex; align-items: baseline; gap: 0.9rem; padding: 0.62rem 0; border-bottom: 1px solid var(--linen); font-size: 0.95rem; } .stack li span { flex: 1; } .stack li b { font-variant-numeric: tabular-nums; font-weight: 600; white-space: nowrap; } .stack li.priceless b { color: var(--olive); font-style: italic; } /* The total is deliberately QUIET now, the opposite of the first version. It was a highlighted bar with bold black type, styled with near equal weight to the deal strip below it, and the owner watched real eyes land on $7,442 as if it were the price being sold rather than the number being argued against. The research behind this pattern is unambiguous on the fix: mute the anchor, do not compete with the offer for the same attention. So: no fill, no bold, muted ink, and the figure itself is not tabular-emphasised the way the real price is. It still has to be legible, it just cannot win. */ .stack-total { display: flex; align-items: baseline; gap: 0.9rem; margin: 0.9rem 0 0; padding-top: 0.65rem; border-top: 1px solid var(--linen); font-size: 0.92rem; font-weight: 400; color: var(--espresso-soft); } .stack-total b { font-weight: 500; text-decoration: line-through; text-decoration-color: var(--terracotta); } /* The bridge between the anchor and the offer, and the one line on the card written to be read rather than scanned. Olive, not terracotta or maroon: this is the one place on the card that says something good is happening rather than stating a fact, and it needed its own colour to read as a different kind of line, not a fourth price in a row of prices. */ .stack-save { margin: 0.7rem 0 0; text-align: center; font-size: 1.05rem; color: var(--olive); } .stack-save strong { font-family: var(--font-display); font-size: 1.25rem; font-weight: 600; } .stack-total span { flex: 1; } .stack-total b { font-variant-numeric: tabular-nums; font-size: 1.25rem; } /* The deal strip is a LINK to the form, and it has to look like one: it replaced the button that used to sit under the card, so if this reads as a passive summary bar the card has no call to action at all. Maroon fill, cream text, and the same hover the site's buttons use. */ .stack-ours { display: block; margin: 0.9rem 0 0; padding: 1.1rem 1rem; background: var(--maroon); color: var(--cream); border-radius: var(--radius); text-align: center; font-size: 1.05rem; font-weight: 600; text-decoration: none; /* A visible outline, not just a colour fill, so this block reads as the one thing on the card built to be pressed, next to a muted anchor line and a bridge line that are both plain text. */ box-shadow: 0 10px 26px -10px rgba(122, 28, 28, 0.55); transition: background-color 0.2s ease, transform 0.15s ease, box-shadow 0.2s ease; } .stack-ours:hover { box-shadow: 0 12px 30px -8px rgba(184, 90, 63, 0.6); } .stack-ours:active { transform: translateY(1px); } /* background-color is set below, once the animation section defines it, because an animated property stays under the animation's control even while animation-play-state is paused: a plain background-color rule here would be silently ignored the moment the flash is running. See the comment there for the reasoning. */ /* The deal strip flashed between maroon and its own hover colour for a while on 24 August 2026, added at the owner's explicit request after he was shown a gentler pulse and asked for something louder instead. Removed the same day, once the light sweep below shipped and the owner decided the sweep alone was enough: two attention effects stacked on one button was more than the button needed. The keyframe and the reasoning behind how it was built to stay clear of the WCAG blink concern are in git history if a flash is ever wanted again. Ordinary hover feedback stays, on its own terms rather than as a leftover of stopping the flash: the deal strip is still the loudest thing on the pricing card and still needs a hover state. */ .stack-ours:hover, .stack-ours:focus-visible { background-color: var(--terracotta); } /* ============================================================ THE SAME LIGHT SWEEP, ON THE DEAL STRIP TOO. Added 24 August 2026, the owner having liked it on the photographs and asked for it here as well. Runs alongside the flash rather than instead of it, since the flash was its own separate, explicit request and nothing has walked that back. Uses the same .sheen-mask element the photographs use, and for the identical reason: .stack-ours carries its own box-shadow, and putting overflow:hidden directly on it to contain the sweep would clip that shadow off, the exact mistake already made and fixed once on the photographs today. The mask is a plain empty span sitting inside the button in the markup, clipping only itself. position: relative goes on .stack-ours so the mask, which is absolutely positioned, anchors to the button rather than to whatever positioned ancestor happens to be further up the page. */ .stack-ours { position: relative; } .stack-ours .sheen-mask::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient( 115deg, transparent 40%, rgba(253, 251, 247, 0.55) 49%, rgba(253, 251, 247, 0.75) 50%, rgba(253, 251, 247, 0.55) 51%, transparent 60% ); transform: translateX(-140%); animation: photo-sheen 5s ease-in-out infinite; } /* On hover the button already stops flashing and settles on a fixed colour, per the fix above; the sweep stops with it, for the same reason, rather than continuing to move on an element someone is actively about to press. */ .stack-ours:hover .sheen-mask::after, .stack-ours:focus-visible .sheen-mask::after { animation: none; opacity: 0; } /* .stack-ours itself needs no reduced-motion rule of its own any more: the flash that once needed one is gone, and its own background-color is a plain, unanimated property now. */ @media (prefers-reduced-motion: reduce) { .stack-ours .sheen-mask::after { animation: none; display: none; } } .stack-ours strong { font-family: var(--font-display); /* Larger than the total's crossed-out figure and larger than its own surrounding text: this is the number the whole card exists to leave someone holding. */ font-size: 1.55rem; color: var(--cream); white-space: nowrap; } /* Not fine print to be shrunk away. It is what makes the table above a comparison a prospect can check rather than a claim they have to take on trust, and under ACL it is what substantiates it. Set as a quiet aside rather than as a statement, per the owner: italic and centred, matching the treatment of the founder's note further down the page rather than reading as legal boilerplate stapled to the bottom of the card. margin-inline: auto for the same reason as the two rules above it: this is also a
, also capped at 62ch by landing.css, also narrower than the panel. */ .stack-note { margin: 0.9rem 0 0; margin-inline: auto; font-size: 0.76rem; line-height: 1.5; font-style: italic; text-align: center; color: var(--espresso-soft); } @media (max-width: 430px) { .stack li, .stack-total { font-size: 0.89rem; } .stack-save { font-size: 0.96rem; } .stack-save strong { font-size: 1.12rem; } .stack-ours { font-size: 0.98rem; } .stack-ours strong { font-size: 1.32rem; } } /* ============================================================ THE FOUNDER'S NOTE, "Someone who cares" Owner's spec, 24 August 2026: the whole thing italic, in black, with a clear blank line between paragraphs, so it reads as a personal note rather than site copy. The italic is synthesised. The self-hosted Inter files carry no italic face, so the browser slants the roman. At body sizes that is indistinguishable from a true italic to anyone not looking for it; if a real italic subset is ever added to fonts.css, this picks it up with no change here. ============================================================ */ .founder p { font-style: italic; color: var(--espresso); margin-bottom: 1.35rem; max-width: 58ch; } .founder .lede { color: var(--espresso); } .founder .terms-line { color: var(--espresso); } /* The button is not part of the letter. */ .founder .btn { font-style: normal; } /* ============================================================ SCROLL REVEAL FOR THE FIVE FEATURE ROWS Added 24 August 2026, after the pinned scroll-stage effect was removed for reading as broken to real clients. This is a different pattern and worth being explicit about the difference: that effect pinned the section and held it on screen through a long scroll distance while three points sat in a dimmed, ambiguous "in between" state for as long as the visitor kept scrolling. This is a one-shot reveal on a normal scroll, the same mechanism already running everywhere else on this page. Nothing is pinned, nothing holds the scroll, and every element completes its transition in well under a second the first time it enters view, then stays put. IT REUSES LANDING.JS RATHER THAN ADDING NEW JAVASCRIPT. .rv/.in and the IntersectionObserver behind them are defined in landing.css and landing.js and already run on this page for the founder note, the pricing card, the FAQ and the final call to action. Adding the class "rv" to the copy and visual columns below is enough; the same observer picks them up, the same three second safety net still applies if it never fires, and the same reduced motion handling already skips all of it. .pop only adds a different CLOSED state and TRANSITION for the visual column, so the image or panel scales in with a slight overshoot rather than just sliding up like the text beside it: two different motions reading as a considered choice rather than one fade repeated ten times down the page. A SPECIFICITY TRAP TO KNOW ABOUT if this pattern is ever copied elsewhere. .rv.pop and landing.css's .rv.in both match two classes, so without the explicit .rv.pop.in rule below, source order alone decides which wins, and because this stylesheet loads after landing.css the pop rule would win and the element would stay scaled down forever, never reaching .in. The three-class rule is not defensive extra code, it is required. */ .rv.pop { transform: scale(0.92) translateY(14px); transition: opacity 0.65s ease, transform 0.65s cubic-bezier(0.34, 1.56, 0.64, 1); /* The text column leads, the image or panel follows by a beat. On a phone, where the two stack vertically, this happens naturally because the visitor scrolls past the copy first. On a wide screen, where they sit side by side and would otherwise cross the intersection threshold at the same instant, the delay is what creates the same lead-and-follow order deliberately. */ transition-delay: 0.1s; } .rv.pop.in { transform: none; } @media (prefers-reduced-motion: reduce) { .rv.pop { transform: none; transition: none; } } /* ============================================================ CTA ATTENTION PULSE Owner asked for the button to blink. A literal blink, the button flashing between visible and invisible, is the thing substituted here, on purpose, for two reasons that both matter: WCAG 2.2.2 treats text or controls that blink for more than three seconds as a failure unless the visitor can pause it, which nothing on this page offers a control for, and a hard on/off flash is also simply the wrong era of web design for a page that has spent all day being pulled back from an AI-generated look. A slow, continuous ring that expands and fades gets the same job done, drawing the eye without ever making the button itself hard to read or disappear. SCOPED TO TWO BUTTONS, NOT EVERY CALL TO ACTION ON THE PAGE. The header, hero, founder and final buttons stay exactly as they are. Pulsing all seven instances of "Get me a salesperson" on the page at once would compete with itself and read as spam, which defeats the point of an attention cue. The two chosen are the ones that need it most: the sticky bar, because it is the one button present on every screen for the whole scroll and the natural place for an ambient cue, and the mid-scroll button under the workstation panel, because it is the one inline call to action that also shows on a desktop screen, where the sticky bar does not exist at all above 800px. Between the two, something pulses in every viewport a visitor might be using. */ @keyframes cta-pulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(122, 28, 28, 0.5); } 60% { box-shadow: 0 0 0 12px rgba(122, 28, 28, 0); } } .sticky-cta .btn, .stage-cta .btn { animation: cta-pulse 2.4s ease-out infinite; } @media (prefers-reduced-motion: reduce) { .sticky-cta .btn, .stage-cta .btn { animation: none; } } /* ============================================================ A LIGHT SWEEPS ACROSS THE PHOTOGRAPHS, ONCE SETTLED. Added 24 August 2026, replacing a slow zoom drift the owner tried first and did not like, offered as one of four genuinely different options rather than a second guess at the same idea. The zoom is gone entirely: the photographs themselves are completely static again, exactly as they were before any of this, and stay that way. WHAT MOVES INSTEAD is a soft diagonal band of light layered on top of the photo, not the photo itself. It sweeps across in well under a second, then the photo sits untouched for several seconds before it sweeps again. This is a different kind of effect from the zoom on purpose: a zoom asks "is the picture changing", inviting exactly the "is something wrong" question that led here, where a sheen reads unambiguously as a deliberate lighting flourish, the same visual language as light catching glass or foil on packaging, and it cannot be mistaken for the image itself doing something odd because the image never moves at all. IMPLEMENTED AS A PSEUDO-ELEMENT, NOT A SECOND IMG. ::after gives a layer positioned exactly over the photo with none of the weight of an actual image asset, and pointer-events: none keeps it from ever intercepting a tap or a drag on the photo beneath it. THE TIMING IS DELIBERATE, LEARNED FROM THE ZOOM'S OWN MISTAKE. Most of each five second cycle the band sits fully off to one side, off screen and clipped away, and the sweep itself takes about three quarters of a second. A slow, subtle sweep would repeat the exact failure the zoom just had: technically running, not actually seen. Both endpoints of the keyframe sit off screen, so the loop resets invisibly with no visible jump back to the start. TWO ATTEMPTS AT CONTAINING THE SWEEP WERE WRONG BEFORE THIS ONE, both caught by checking rather than assuming, both the same afternoon. Attempt one put overflow:hidden on .stage-visual, left over from when that same rule contained the zoom before the zoom was removed. It clipped .stage-photo's own drop shadow along with the sweep, since an ancestor's overflow:hidden clips everything painted outside a descendant's box, shadow included. Attempt two moved the containment onto the sweep's own pseudo-element instead, giving it a border-radius so it stayed rounded with no overflow property anywhere. That stopped clipping the photo's shadow, but broke something else: a transform-translated element still contributes to its ancestors' SCROLLABLE overflow even while it is visually clipped by its own border-radius, which is a paint-time effect only. With nothing anywhere clipping that geometry, the page gained almost 650px of horizontal scroll the moment the sweep was added, confirmed by hiding both new pseudo-elements and watching document.documentElement.scrollWidth drop back to exactly the viewport width. THE ACTUAL FIX NEEDED A SEPARATE ELEMENT, because the two requirements are genuinely incompatible on a single box: something has to clip the sweep's geometry with overflow:hidden, and that same overflow:hidden cannot sit on anything that is also casting a shadow, itself or through a child. .sheen-mask is an empty span added alongside the photo purely to be that clip: absolutely positioned over the photo, overflow:hidden and rounded to match, and nothing else on the page depends on it existing. The sweep lives on its own ::after, inside the mask, where its geometry is contained for real rather than merely disguised. */ .stage-visual.pop.in .stage-photo { position: relative; } .sheen-mask { position: absolute; inset: 0; overflow: hidden; border-radius: var(--radius); pointer-events: none; } .stage-visual.pop.in .sheen-mask::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient( 115deg, transparent 40%, rgba(253, 251, 247, 0.5) 49%, rgba(253, 251, 247, 0.65) 50%, rgba(253, 251, 247, 0.5) 51%, transparent 60% ); transform: translateX(-140%); animation: photo-sheen 5s ease-in-out infinite; } @keyframes photo-sheen { 0% { transform: translateX(-140%); } 15% { transform: translateX(140%); } 100% { transform: translateX(140%); } } @media (prefers-reduced-motion: reduce) { .stage-visual.pop.in::after { animation: none; display: none; } } /* ============================================================ THE HERO COLUMN, CENTRED, ON THIS PAGE ONLY. Added 24 August 2026. .hero-copy is shared CSS in landing.css, used by all four landing pages, and left-aligned there by default. This rule lives here instead, in the sales page's own stylesheet, so /admin/, /accounting/ and /seo/ keep the layout they already have rather than picking up a change nobody asked for on their pages. text-align: center on the wrapper handles the headline (a block element, so its text centres within its own full-width box) and the button (display: inline-block, so it follows text-align like a word would). It does not touch .lede or .terms-line on its own: both are
tags, and landing.css caps every
at 62ch, which is narrower than this column on anything but a phone. A narrower box with no auto margins sits flush left regardless of the text-align on its parent, the same trap this page has hit and logged three times already today on the pricing card. margin-inline: auto is what actually moves the box, not the text-align that looks like it should be doing that job. */ .hero-copy { text-align: center; } .hero-copy .lede, .hero-copy .terms-line { margin-inline: auto; }