:root { /* Routed through variables rather than calling env() at each use site, for one reason: env() cannot be overridden in a test, so a headless browser (where every inset is 0) can never tell a correct implementation from one that forgot the insets entirely. Behind a variable, a test can set these to a real iPhone's 59px/34px and check the layout actually responds. */ --safe-top: env(safe-area-inset-top, 0px); --safe-bottom: env(safe-area-inset-bottom, 0px); --safe-left: env(safe-area-inset-left, 0px); --safe-right: env(safe-area-inset-right, 0px); --paper: #f5f1e9; --paper-2: #eee7dc; --paper-3: #fbf8f2; --ink: #151714; /* 4.97:1 on paper before — over the AA line by a hair, which is fine for a caption and tiring for the paragraphs this actually sets. Two shades down is 5.9:1. Nobody will spot the colour change; the difference shows up as not having to lean in. */ --muted: #5b5e56; --muted-2: #878b82; --line: rgba(21, 23, 20, 0.12); --line-strong: rgba(21, 23, 20, 0.22); --white: #fffdf8; --ease: cubic-bezier(.22,.78,.2,1); --shadow: 0 30px 80px rgba(20, 20, 18, 0.08); --cool-paper: #eef1f4; --graphite: #181b20; --metal: #c2a267; --mist: #dfe6eb; } * { box-sizing: border-box; } html { scroll-behavior: smooth; /* The app shell puts data-theme="default-dark" and an INLINE style="color-scheme: dark" on , and carried no background of its own — so everything painted from the root canvas came out dark: the safe areas and the rubber-band at the ends of the page. was already cream, which is exactly why only the edges showed it. !important is load-bearing, not lazy: an inline style beats any normal stylesheet rule. This sheet loads only on the marketing route, so the admin route keeps the dark shell. */ /* ── ROOT CANVAS ────────────────────────────────────────────────────── Fixing it at --paper was half a fix. iOS paints the canvas behind the page from , and this page has TWO zones: .hero-scroll is #111315 and 300vh tall (the entire opening), everything after it is cream. A cream canvas under a near-black hero is exactly the white flash at the top of the phone — rubber-band at the top of the page, which is where people actually overscroll, exposed paper against the photo. So the canvas follows the page instead of guessing. Dark is the default because the page OPENS dark; script.js flips data-chrome to "light" on the same trigger that flips the header and the theme-color, so all three change on one event and cannot drift apart. If script.js never runs, the canvas stays dark — correct for the hero, visible only in bottom overscroll, which overscroll-behavior-y already suppresses. Failing toward the first thing you see is the right way round. */ background: #111315; color-scheme: light !important; overscroll-behavior-y: none; } html[data-chrome="light"] { background: var(--paper); } /* body carries a framework class (.bg-q-background-primary) that outranks a bare element selector; body[class] ties it and wins on order. */ body, body[class] { margin: 0; color: var(--ink); background: var(--paper); font-family: "Instrument Sans", Arial, sans-serif; font-size: 18px; line-height: 1.58; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } button, input, textarea { font: inherit; } a { color: inherit; text-decoration: none; } button, a { -webkit-tap-highlight-color: transparent; } img { display: block; max-width: 100%; } .skip-link { position: fixed; z-index: 1000; top: 14px; left: 14px; transform: translateY(-150%); background: var(--white); color: var(--ink); padding: 10px 14px; border-radius: 999px; border: 1px solid var(--line); } .skip-link:focus { transform: translateY(0); } .section-shell { width: min(1280px, calc(100% - 48px)); margin: 0 auto; } .site-header { position: fixed; z-index: 60; inset: 0 0 auto 0; height: 88px; padding: 0 clamp(20px, 4vw, 54px); display: flex; align-items: center; justify-content: space-between; color: var(--white); transition: color .35s var(--ease), background .35s var(--ease), box-shadow .35s var(--ease); } .site-header.is-light { color: var(--ink); background: rgba(245, 241, 233, 0.82); backdrop-filter: blur(18px); box-shadow: 0 1px 0 rgba(21, 23, 20, 0.06); } .brand { display: inline-flex; align-items: center; gap: 12px; font-size: 13px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; } .brand-mark { width: 18px; height: 18px; border: 1px solid currentColor; border-radius: 50%; position: relative; display: inline-block; } .brand-mark::after { content: ""; position: absolute; width: 1px; height: 26px; background: currentColor; left: 8px; top: -5px; transform: rotate(45deg); } .header-actions { display: flex; align-items: center; gap: 12px; } .header-actions a { font-size: 15px; opacity: .9; } .button { border: 0; display: inline-flex; align-items: center; justify-content: center; min-height: 50px; padding: 0 22px; border-radius: 999px; cursor: pointer; font-size: 15px; font-weight: 500; transition: transform .3s var(--ease), background .3s var(--ease), color .3s var(--ease), border-color .3s var(--ease), box-shadow .3s var(--ease), opacity .3s var(--ease); } .button:hover { transform: translateY(-1px); } .button:focus-visible, .text-link:focus-visible, .text-link-button:focus-visible, .film-stage:focus-visible, .dropzone:focus-within, input:focus-visible, textarea:focus-visible { outline: 2px solid rgba(255,255,255,.88); outline-offset: 2px; } .site-header.is-light .button:focus-visible, .modal .button:focus-visible, input:focus-visible, textarea:focus-visible, .film-stage:focus-visible, .text-link-button:focus-visible { outline-color: rgba(21, 23, 20, 0.88); } .button-small { min-height: 44px; padding-inline: 18px; font-size: 14px; } .button-large { min-height: 58px; padding-inline: 28px; font-size: 16px; } .button-primary { background: var(--white); color: var(--ink); box-shadow: 0 12px 40px rgba(0,0,0,.12); } .site-header.is-light .button-primary { background: var(--ink); color: var(--white); box-shadow: none; } .button-secondary { background: rgba(255,255,255,.09); color: var(--white); border: 1px solid rgba(255,255,255,.34); backdrop-filter: blur(16px); } .site-header.is-light .button-nav, .site-header.is-light .button-secondary { color: var(--ink); background: rgba(21,23,20,.03); border: 1px solid rgba(21,23,20,.12); } .button-nav { min-height: 44px; color: var(--white); background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.18); } .button-dark { background: var(--ink); color: var(--white); } .button-outline { background: transparent; color: var(--ink); border: 1px solid var(--line-strong); } .button-outline:hover { border-color: var(--ink); } .button.full { width: 100%; } .text-link, .text-link-button { background: transparent; border: 0; color: inherit; font-size: 15px; padding: 0; cursor: pointer; opacity: .85; } .text-link-button { text-decoration: underline; text-underline-offset: .16em; } .hero-scroll { height: 300vh; background: #111315; position: relative; } .hero-sticky { position: sticky; top: 0; height: 100vh; /* iOS Safari: 100vh includes the collapsed URL bar, which makes the sticky hero taller than the visible screen and the scroll-pan feel broken. svh is the stable small-viewport height — no jumping as the toolbar hides. */ height: 100svh; /* NEVER let the sticky pane exceed the visible viewport. On short iPhones (SE, mini) a flat 700px/640px min-height made the pinned hero taller than the screen, so its bottom half — and the sense of it being pinned at all — fell below the fold and the section read as a normal scrolling image. */ min-height: min(700px, 100svh); overflow: hidden; } .hero-visual { position: absolute; inset: 0; overflow: hidden; /* Was #17191b. This colour is only ever seen in two situations: the image failing to load, or a sub-pixel sliver at an edge. The overscan below should mean the second never happens, but near-black made that sliver as visible as a colour possibly could be against a mid-grey photo. This tone sits close to the scrimmed plate, so a miss would be invisible rather than a hairline — and it is still dark enough to carry white text on its own if the photograph never arrives. */ background: #3c3b38; } .hero-visual picture { display: contents; } .hero-image { position: absolute; /* Overscanned by 2px on every edge — see OVERSCAN in script.js for the measurement. script.js overwrites these inline once it runs; these values matter for the first paint before it does, which is otherwise the one frame that can still show the hairline. */ top: -2px; /* ANCHORED RIGHT ON PURPOSE. The pan starts with the image's right edge on the viewport's right edge and travels left-to-right as you scroll. When it was anchored left, the untransformed layout position was the END of the pan, so the very first paint — before any script had run — showed the wrong end of the move and then snapped. Anchoring right makes the un-transformed state identical to frame zero of the pan, so there is nothing to snap from. This is CSS only: it holds even if the script never runs, never loads, or runs late on a slow phone. */ right: -2px; left: auto; width: auto; height: calc(100% + 4px); max-width: none; object-fit: cover; object-position: center center; will-change: transform; transform: translate3d(0,0,0); /* The contrast/saturate grade used to live here. A filter on a full-screen layer costs the GPU a whole extra pass on EVERY frame of the scroll-pan. It is baked into the image file instead — identical look, no per-frame cost. */ backface-visibility: hidden; } .hero-wash { position: absolute; inset: 0; background: linear-gradient(90deg, rgba(7,10,8,.58) 0%, rgba(7,10,8,.20) 48%, rgba(7,10,8,.18) 100%); } .hero-vignette { position: absolute; inset: 0; /* Was two inset box-shadows, one with a 34vh blur radius, directly over the layer the pan moves. A blur that size is an expensive raster and it could never be cached against a moving layer. Gradients give the same falloff for nothing. */ background: linear-gradient(to top, rgba(8,10,8,.30) 0%, rgba(8,10,8,0) 34%), radial-gradient(120% 100% at 50% 50%, rgba(6,7,6,0) 55%, rgba(6,7,6,.16) 100%); } .hero-ui { position: relative; height: 100%; color: var(--white); padding-top: clamp(112px, 14vh, 150px); padding-bottom: clamp(34px, 6vh, 72px); z-index: 3; } .hero-kicker { display: inline-flex; align-items: center; gap: 10px; margin: 0 0 38px; text-transform: uppercase; font-size: 11px; letter-spacing: .16em; opacity: .82; } .hero-kicker span { width: 24px; height: 1px; background: currentColor; } .hero-copy-wrap { position: relative; width: min(820px, 74vw); height: min(48vh, 470px); display: flex; align-items: center; } .hero-copy { position: absolute; inset: auto 0; opacity: 0; transform: translateY(28px); transition: opacity .8s var(--ease), transform .8s var(--ease); pointer-events: none; } .hero-copy.is-active { opacity: 1; transform: translateY(0); pointer-events: auto; } .eyebrow { margin: 0 0 18px; font-size: 12px; text-transform: uppercase; letter-spacing: .16em; font-weight: 600; } .eyebrow.dark { color: var(--muted); } .hero-copy h1, .hero-copy h2, .section-heading h2, .featured-plan h3, .property-film-copy h3, .final-cta h2, .modal-head h2 { margin: 0; font-size: clamp(56px, 7vw, 108px); line-height: .96; letter-spacing: -.045em; font-weight: 600; max-width: 1000px; text-wrap: balance; } .hero-sub { max-width: 700px; margin: 24px 0 0; font-size: clamp(18px, 1.4vw, 22px); line-height: 1.6; color: rgba(255,255,255,.86); } .hero-bottom { position: absolute; left: 0; right: 0; bottom: clamp(32px, 6vh, 68px); display: flex; align-items: flex-end; justify-content: space-between; gap: 32px; } .hero-cta-stack { display: flex; flex-direction: column; align-items: flex-start; gap: 16px; } .hero-cta-row { display: flex; gap: 12px; flex-wrap: wrap; } .hero-proof-wrap { display: flex; flex-direction: column; gap: 14px; align-items: flex-end; max-width: 540px; } .hero-trust-line { margin: 0; font-size: 15px; color: rgba(255,255,255,.86); text-align: right; } .hero-proof { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; justify-content: flex-end; font-size: 12px; letter-spacing: .04em; color: rgba(255,255,255,.75); } .hero-proof i { width: 4px; height: 4px; border-radius: 50%; background: currentColor; } .scroll-meter { position: absolute; right: clamp(20px, 2vw, 28px); top: 50%; transform: translateY(-50%); display: flex; flex-direction: column; align-items: center; gap: 14px; font-size: 10px; letter-spacing: .14em; text-transform: uppercase; } .scroll-meter-label { writing-mode: vertical-rl; transform: rotate(180deg); opacity: .72; } .scroll-meter-track { width: 1px; height: 130px; background: rgba(255,255,255,.24); position: relative; overflow: hidden; } .scroll-meter-track i { position: absolute; inset: 0; background: var(--white); transform-origin: top; transform: scaleY(0); } .scroll-meter-count { opacity: .85; } /* How-it-works. Sits between the hero and pricing: the hero shows the motion, this explains where it comes from, and only then does pricing ask for money. It also earns the "six or more photos" requirement pricing leans on, which the page previously asked for without ever justifying. */ .method-section { position: relative; z-index: 1; /* A DIFFERENT GROUND, ON PURPOSE. Evidence, pricing, method, trust and the closing CTA all sat on the same --paper, so five full-height sections ran together with nothing marking where one argument ended and the next began. That flat run is most of what reads as monotonous — it is not the type, it is that the page never changes colour. --paper-3 is the same near-white the stat cards already use, so this introduces no new colour; it just lifts one band out of the run and gives the scroll a middle. Hairlines top and bottom so the edge is deliberate rather than a rendering seam. */ background: var(--paper-3); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); padding: clamp(96px, 11vw, 148px) 0 clamp(88px, 10vw, 132px); } .method-head { max-width: 780px; } .method-head h2 { font-size: clamp(32px, 4.2vw, 54px); line-height: 1.06; letter-spacing: -.025em; margin: 0; } /* Bigger and looser than body copy — this is the paragraph people actually read, so it gets room to breathe rather than being packed tight. */ .method-lead { margin: 20px 0 0; max-width: 660px; color: var(--muted); font-size: 19px; line-height: 1.62; } .method-steps { list-style: none; margin: clamp(36px, 4.5vw, 56px) 0 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: clamp(40px, 6vw, 96px); row-gap: 0; border-top: 1px solid var(--line); } /* No boxes and no vertical dividers. Four identically-sized bordered cards a few pixels apart merge into one grey block and stop being four things; an open list with real space between rows reads as steps. */ .method-step { display: grid; grid-template-columns: auto 1fr; align-items: baseline; column-gap: 18px; padding: clamp(22px, 2.4vw, 30px) 0; border-bottom: 1px solid var(--line); } .method-num { font-size: 13px; font-weight: 600; letter-spacing: .14em; color: var(--metal); font-variant-numeric: tabular-nums; } .method-step h3 { grid-column: 2; margin: 0; font-size: clamp(19px, 1.5vw, 22px); line-height: 1.25; letter-spacing: -.015em; font-weight: 600; } .method-step p { grid-column: 2; margin: 6px 0 0; color: var(--muted); font-size: 16px; line-height: 1.5; max-width: 44ch; } @media (max-width: 760px) { .method-steps { grid-template-columns: 1fr; } } .method-tip { margin-top: clamp(38px, 5vw, 58px); padding: 26px 28px; /* --paper, not --paper-3: the section itself is --paper-3 now, so the tip was the same colour as its own background and survived only as a border. Going one step darker than the section makes it read as an inset panel — and it is the page's base colour, so no new tone enters the palette. */ background: var(--paper); border: 1px solid var(--line); display: flex; align-items: center; justify-content: space-between; gap: 26px; flex-wrap: wrap; } .method-tip p { margin: 0; max-width: 640px; color: var(--muted); font-size: 16px; line-height: 1.6; } .method-tip b { color: var(--ink); font-weight: 600; } .method-tip .button { flex: none; } @media (max-width: 900px) { .method-steps { grid-template-columns: 1fr 1fr; } .method-step { padding: 26px 20px 28px 0; } .method-step:nth-child(2) { border-right: 0; padding-right: 0; } .method-step:nth-child(3) { padding-left: 0; border-top: 1px solid var(--line); } .method-step:nth-child(4) { border-top: 1px solid var(--line); } } @media (max-width: 560px) { .method-steps { grid-template-columns: 1fr; } .method-step, .method-step:not(:first-child) { padding: 24px 0 26px; border-right: 0; border-top: 1px solid var(--line); } .method-step:first-child { border-top: 0; } .method-tip { padding: 22px; } .method-tip .button { width: 100%; } } .pricing-section { position: relative; z-index: 1; margin-top: 0; padding: clamp(112px, 12vw, 158px) 24px clamp(104px, 10vw, 142px); background: var(--cool-paper); border-top: 1px solid rgba(24,27,32,.09); border-bottom: 1px solid rgba(24,27,32,.10); overflow: hidden; } .pricing-section::before { content: ""; position: absolute; top: 0; left: 50%; width: min(1040px, calc(100% - 48px)); height: 1px; transform: translateX(-50%); background: linear-gradient(90deg, transparent, rgba(24,27,32,.20), transparent); } .pricing-shell { width: min(1040px, 100%); margin: 0 auto; } .pricing-heading { max-width: 720px; margin: 0 auto 50px; text-align: center; opacity: 0; transform: translate3d(0, 34px, 0); transition: opacity .82s var(--ease), transform .92s var(--ease); } .pricing-heading.is-visible { opacity: 1; transform: translate3d(0, 0, 0); } /* 4.38:1 on --cool-paper before, which is under the 4.5 floor — and this is 12px uppercase with wide tracking, the hardest shape to read on the page. One shade down clears it at 5.3:1. */ .pricing-heading .eyebrow { color: #5b646d; } .pricing-heading h2 { margin: 0; font-size: clamp(42px, 5vw, 68px); line-height: .98; letter-spacing: -.043em; font-weight: 600; color: var(--graphite); text-wrap: balance; } .pricing-heading > p:last-of-type { max-width: 640px; margin: 20px auto 0; color: #626b74; font-size: 16px; line-height: 1.62; } .pricing-friction-note { margin: 24px auto 0; display: inline-flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 12px; padding: 10px 16px; border: 1px solid rgba(24,27,32,.12); background: rgba(255,255,255,.58); color: #4f5861; font-size: 12px; letter-spacing: .02em; } .pricing-friction-note i { width: 3px; height: 3px; border-radius: 50%; background: currentColor; opacity: .42; } /* ── Why it matters ─────────────────────────────────────────────────────── The evidence section. Every figure carries its source in the card, at a size you can actually read, because the whole point of the section is that these numbers survive being checked. Sources are NOT footnoted — an agent should be able to see where a number came from without hunting for it. */ .evidence-section { /* The bottom padding was 20-40px because a six-item explainer used to sit under the stat row and carry the section out. That block restated the four figures directly above it for a reader who sells houses for a living, and every operational fact in it was already on the page — turnaround and formats on the pricing cards, "nobody comes back out" in step 01. It is gone, so the row of figures now closes the section and needs real room beneath it instead of a hairline gap. */ padding: clamp(84px, 11vh, 128px) 0 clamp(78px, 9vh, 116px); background: var(--paper); } .evidence-heading { max-width: 760px; } .evidence-heading h2 { margin: 14px 0 18px; font-size: clamp(32px, 4.1vw, 52px); line-height: 1.04; letter-spacing: -.035em; font-weight: 600; } .evidence-heading > p:last-child { margin: 0; color: var(--muted); font-size: 17px; line-height: 1.62; } .evidence-grid { margin-top: clamp(38px, 5vh, 56px); display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: 10px; overflow: hidden; } .evidence-stat { background: var(--paper-3); padding: 26px 24px 24px; display: flex; flex-direction: column; } .evidence-figure { margin: 0 0 12px; /* Tabular figures so every digit occupies the same box while the number counts. Proportional digits make a ticking counter visibly wobble — a 1 is much narrower than a 7 in most faces, so the text shifts on every frame. The script also pins a min-width before it drops the value to zero; the two together are what make the count read as smooth rather than nervous. */ font-variant-numeric: tabular-nums; font-feature-settings: "tnum" 1; display: inline-block; font-size: clamp(44px, 5vw, 58px); line-height: .9; letter-spacing: -.055em; font-weight: 600; color: var(--ink); } .evidence-claim { margin: 0 0 16px; min-height: 88px; font-size: 14px; line-height: 1.52; color: rgba(21,23,20,.72); } .evidence-claim em { font-style: normal; font-weight: 600; color: var(--ink); } .evidence-source { /* Reserves two lines so the four rules sit on one shared baseline even when one source name wraps and the others don't. */ min-height: 46px; margin: auto 0 0; padding-top: 14px; border-top: 1px solid var(--line); font-size: 11px; line-height: 1.4; letter-spacing: .05em; text-transform: uppercase; /* Was --muted-2, which measured 3.08:1 against the card — below the 4.5:1 floor and, at 11px uppercase, the least legible text on the page. The section's whole argument is that these numbers can be checked, so the line saying where they came from cannot be the one nobody can read. */ color: var(--muted); } @media (max-width: 1080px) { .evidence-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } } /* The 700px query held nothing but the points-list column counts, and that list is gone, so the query went with it. */ @media (max-width: 620px) { .evidence-grid { grid-template-columns: 1fr; } .evidence-stat { padding: 22px 20px 20px; } /* Stacked one-per-row there is nothing to align across, so the reserved heights only produce dead space inside each card. */ .evidence-claim { min-height: 0; margin-bottom: 12px; } .evidence-source { min-height: 0; } } .pricing-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; align-items: stretch; } .pricing-card { --card-accent: #cfd4d8; /* The price tag's width, shared with the top hairline below so the two can never disagree about where the tag starts. Overridden on small screens. */ --price-tag-w: 132px; position: relative; min-height: 472px; /* 27px on top, not 26: the top edge is drawn by ::before rather than by a real border, so this puts the content back where a 1px border left it. */ padding: 27px 26px 26px; display: flex; flex-direction: column; /* NO TOP BORDER. An absolutely positioned child sits against the PADDING box, so a real top border always drew a line across the top of the price tag. On the Agent card that border composites over mist (198) while the tag is near-white (242) — a 44-point step, which is the line that showed above "Tailored". The tag cannot simply be moved up over it either: the card is overflow:hidden, and overflow clips children to the padding box, so nothing can paint over a border from the inside. */ border: 1px solid rgba(24,27,32,.12); border-top: 0; border-radius: 8px; box-shadow: 0 14px 38px rgba(18,23,29,.08); overflow: hidden; opacity: 0; transform: translate3d(0, 96px, 0) scale(.965); transform-origin: center bottom; transition: opacity .78s var(--ease), transform 1.05s var(--ease), border-color .28s var(--ease), box-shadow .28s var(--ease); } .pricing-card:nth-child(2) { transition-delay: .12s; } .pricing-card:nth-child(3) { transition-delay: .24s; } .pricing-card.is-visible { opacity: 1; transform: translate3d(0, 0, 0) scale(1); } .pricing-card > *:not(.pricing-card-number):not(.pricing-price-tag) { position: relative; z-index: 1; } .pricing-card-number { position: absolute; right: 14px; bottom: -18px; font-size: 104px; line-height: 1; letter-spacing: -.08em; font-weight: 600; color: currentColor; opacity: .035; pointer-events: none; } .pricing-card-featured .pricing-card-number { opacity: .055; } /* THE TOP EDGE — AND IT STOPS AT THE PRICE TAG. This used to be a 4px accent stripe running the full width of the card, so it also ran directly above the price. On Essential it was #cfd4d8 on white, invisible, which is why that card read as a clean corner; on Property Film the same rule drew a bright gold line across the $149 and on Agent Batch a blue-grey one. Same markup, three different-looking price corners. Now it is a 1px hairline matching the card's other three borders — the card's edge, not a coloured stripe — and `right: var(--price-tag-w)` ends it exactly where the tag begins. Nothing sits above any price on any card. Tier colour still lives in the tag's bottom edge and the bullet dots. */ .pricing-card::before { content: ""; position: absolute; top: 0; left: 0; right: var(--price-tag-w); height: 1px; background: rgba(24,27,32,.12); } .pricing-card:hover { border-color: rgba(24,27,32,.24); box-shadow: 0 22px 52px rgba(18,23,29,.13); } .pricing-card:hover::before { background: rgba(24,27,32,.24); } .pricing-card-essential { --card-accent: #cfd4d8; background: #ffffff; color: #1c2025; } /* PROPERTY FILM — the premium tier, and it should look like it without shouting. The gold is no longer one hard stripe; it is spread thin across the whole card: a warm bloom behind the price corner, a hairline frame, a gold label, a gold rule under the title, a gold CTA. Each touch is quiet on its own — together they read as expensive. */ .pricing-card-featured { --card-accent: var(--metal); background: /* Warm light falling from the price corner. Placed at the top-right so it lifts the number, which is the thing the card is selling. */ radial-gradient(128% 92% at 90% -4%, rgba(194,162,103,.19) 0%, rgba(194,162,103,.045) 44%, rgba(194,162,103,0) 68%), linear-gradient(176deg, #1e2127 0%, #17191f 58%, #131519 100%); color: #ffffff; /* A gold hairline instead of a black-on-black edge — the card gets a frame rather than just ending. */ border-color: rgba(194,162,103,.36); box-shadow: 0 24px 58px rgba(16,19,24,.30), inset 0 0 0 1px rgba(194,162,103,.06); } /* The gold frame closes across the top too — but as the same hairline as the other three sides, and still stopping at the price tag. */ .pricing-card-featured::before { background: rgba(194,162,103,.36); } .pricing-card-featured:hover::before { background: rgba(194,162,103,.52); } .pricing-card-agent { --card-accent: #8ea0ad; background: var(--mist); color: #1c2227; } .pricing-card-topline { /* No longer a two-column row. The price moved out to its own corner tag, so this is just the label and the title — and it reserves the space the tag occupies so a long title can never run underneath it. */ display: flex; flex-direction: column; /* The title clears the tag by sitting BELOW it, not beside it. Reserving a right-hand gutter instead wrapped "Essential Film" onto two lines on one card and not the others — exactly the inconsistency this change was meant to remove. Below the tag, every title gets the full card width and every card's title starts on the same line. */ padding-top: 74px; padding-bottom: 18px; border-bottom: 1px solid rgba(24,27,32,.13); } .pricing-card-featured .pricing-card-topline { border-color: rgba(194,162,103,.34); } .pricing-card .plan-label { color: rgba(24,27,32,.52); } /* Gold, and tracked out a little — a maker's mark above the product name. */ .pricing-card-featured .plan-label { color: var(--metal); letter-spacing: .05em; } .pricing-card h3 { margin: 8px 0 0; font-size: 25px; line-height: 1.04; letter-spacing: -.035em; font-weight: 600; } /* THE PRICE TAG. One fixed box, pinned to the same corner at the same size on all three cards, so the eye finds the number in the identical place every time — the corner of an index card. Everything about it is shared; only the colours differ, which is what keeps the three tiers telling themselves apart. */ .pricing-price-tag { position: absolute; top: 0; right: 0; z-index: 2; /* Fixed width AND height, not min-height: a word and a number must produce an identical box or the three cards stop matching by a pixel or two. */ width: var(--price-tag-w); height: 86px; padding: 13px 17px 11px; display: flex; flex-direction: column; align-items: flex-end; justify-content: center; gap: 3px; text-align: right; border-left: 1px solid rgba(24,27,32,.10); /* The card's accent colour lives in this edge — same shape on every card, different colour, which is what keeps the tiers distinguishable. */ border-bottom: 2px solid var(--card-accent); border-bottom-left-radius: 10px; background: #f2f5f6; } .price-figure { margin: 0; font-size: 36px; line-height: .92; letter-spacing: -.055em; font-weight: 600; white-space: nowrap; } .price-figure-word { /* A word has to sit in the same box as a number without widening it. "Tailored" measures 89px at this size against 97px of usable width — about 8px of slack, which is the margin a fallback font needs. 27px fitted in Instrument Sans with half a pixel to spare and would have wrapped the moment the webfont failed to load. */ font-size: 25px; line-height: 1.05; letter-spacing: -.03em; } .price-currency { display: inline-block; margin: .16em .05em 0 0; vertical-align: top; font-size: .38em; letter-spacing: 0; } .price-caption { margin: 0; font-size: 10px; font-weight: 500; letter-spacing: .06em; text-transform: uppercase; opacity: .58; white-space: nowrap; } .pricing-card-featured .pricing-price-tag { /* Gold leaf rather than grey glass: the corner the number sits in is the most-looked-at 132px on the card, so it carries the most gold. */ background: linear-gradient(158deg, rgba(194,162,103,.22) 0%, rgba(194,162,103,.07) 62%, rgba(194,162,103,.03) 100%); border-left-color: rgba(194,162,103,.30); border-bottom-color: rgba(194,162,103,.68); } /* Warm white, not pure white — pure white next to gold reads cold. */ .pricing-card-featured .price-figure { color: #f8f1e3; } .pricing-card-featured .price-caption { color: var(--metal); opacity: .92; } .pricing-card-featured .pricing-card-number { color: var(--metal); opacity: .10; } .pricing-card-agent .pricing-price-tag { background: rgba(255,255,255,.58); border-left-color: rgba(24,27,32,.09); } .pricing-card-summary { min-height: 76px; margin: 18px 0 20px; color: rgba(24,27,32,.64); font-size: 14px; line-height: 1.55; } .pricing-card-featured .pricing-card-summary { color: rgba(255,255,255,.70); } .compact-feature-list { list-style: none; margin: 0 0 24px; padding: 0; display: grid; gap: 9px; } .compact-feature-list li { position: relative; padding-left: 17px; font-size: 13px; line-height: 1.48; } .compact-feature-list li::before { content: ""; position: absolute; left: 0; top: .64em; width: 5px; height: 5px; border-radius: 50%; background: var(--card-accent); } .pricing-card-action { margin-top: auto; display: grid; gap: 10px; } .pricing-card-action p { margin: 0; /* All three reserve the same room, or the buttons sit at three different heights purely because one caption runs to a third line. */ min-height: 52px; color: rgba(24,27,32,.58); font-size: 12px; line-height: 1.45; } .pricing-card-featured .pricing-card-action p { color: rgba(255,255,255,.64); } .pricing-button { min-height: 50px; /* 10px, down from 14: at the larger size "Start Property Film — pay $149 today" measures 251px and the button's content box was exactly 251px — zero slack, so any font substitution would have wrapped it. This buys 8px back. */ padding-inline: 10px; font-size: 15px; } /* The 3-up grid is at its narrowest just above the 980px stacking point, and there the longest label does not fit on one line at 15px. Above ~1040px the shell reaches its max width and the cards stop shrinking, and below 981px they stack full-width with room to spare — so this band is the only place it happens, and it is the only place that steps back down. */ @media (min-width: 981px) and (max-width: 1060px) { .pricing-button { font-size: 13px; } } .pricing-button-dark { background: #20252b; color: #ffffff; } .pricing-button-light { background: #ffffff; color: var(--graphite); } .pricing-card-agent .pricing-button-dark { background: #27323a; } /* The one button on the page that is gold. Dark text on it keeps the contrast ratio well clear of AA — a pale-gold button with white text would have looked premium and been unreadable. */ .pricing-card-featured .pricing-button-light { background: linear-gradient(180deg, #e3caa0 0%, #cbab72 54%, #bd9b60 100%); color: #17191d; box-shadow: 0 1px 0 rgba(255,255,255,.36) inset, 0 10px 26px rgba(150,116,54,.30); } .pricing-card-featured .pricing-button-light:hover { background: linear-gradient(180deg, #ebd5ae 0%, #d5b67e 54%, #c6a469 100%); } .trust-band { border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); padding: 0 0 24px; } .trust-grid { display: grid; grid-template-columns: repeat(4, 1fr); } .trust-item { padding: 34px 26px 40px 0; border-right: 1px solid var(--line); display: flex; flex-direction: column; gap: 36px; } .trust-item:nth-child(2), .trust-item:nth-child(3), .trust-item:nth-child(4) { padding-left: 28px; } .trust-item:last-child { border-right: 0; } .trust-item span { font-size: 11px; color: var(--muted); letter-spacing: .14em; } .trust-item p { margin: 0; font-size: clamp(24px, 2.1vw, 34px); line-height: 1.08; letter-spacing: -.03em; font-weight: 500; } .legal-note { margin-top: 22px; color: var(--muted); font-size: 13px; } .final-cta { padding: clamp(110px, 14vw, 190px) 0; } .final-cta-inner { background: rgba(255,255,255,.42); border: 1px solid var(--line); padding: clamp(32px, 5vw, 56px); text-align: center; box-shadow: var(--shadow); } .final-cta h2 { font-size: clamp(56px, 7vw, 98px); margin-inline: auto; } .final-cta .eyebrow { display: block; } .final-cta p:not(.eyebrow):not(.final-microcopy) { max-width: 680px; margin: 24px auto 34px; color: var(--muted); } .final-actions { display: flex; justify-content: center; gap: 18px; align-items: center; flex-wrap: wrap; } .final-microcopy { margin: 18px 0 0; color: var(--muted); font-size: 14px; } .site-footer { min-height: 126px; border-top: 1px solid var(--line); display: grid; grid-template-columns: 1fr 1fr auto; gap: 24px; align-items: center; color: var(--muted); font-size: 13px; padding: 0 0 22px; } .footer-brand { color: var(--ink); } .site-footer p { margin: 0; } /* Footer credit. A fourth column above 900px so it shares a baseline with the copyright and reads as one line of small print; below that an earlier breakpoint collapses the footer to a single column and this must not fight it, hence the min-width scope. Size and colour are inherited from .site-footer, so the only additions are the underline — a credit that does not look like a link is not much of a credit — and the ink hover the rest of the page's links use. */ @media (min-width: 901px) { .site-footer { grid-template-columns: 1fr 1fr auto auto; } } .footer-credit a { color: inherit; text-decoration: underline; text-underline-offset: .18em; text-decoration-color: rgba(21,23,20,.28); transition: color .25s var(--ease), text-decoration-color .25s var(--ease); } .footer-credit a:hover { color: var(--ink); text-decoration-color: var(--ink); } .modal { position: fixed; inset: 0; margin: auto; width: min(1180px, calc(100% - 28px)); max-height: calc(100vh - 28px); border: 0; padding: 0; background: var(--paper-3); color: var(--ink); box-shadow: 0 40px 120px rgba(0,0,0,.28); overflow-y: auto; scrollbar-width: thin; scrollbar-color: rgba(21, 23, 20, 0.25) transparent; } /* NO backdrop-filter here. A blurred ::backdrop forces the compositor to re-blur the entire viewport on every frame the example plates move, which measured 16 fps on a 1440x900 2x display and a 67ms worst frame on Android. A slightly deeper flat scrim reads the same and costs nothing. */ .modal::backdrop { background: rgba(12, 13, 12, 0.78); } .modal-shell { padding: 34px; } /* Not sticky. This header used to pin to the top of the dialog and follow the scroll, which pulled attention away from the shots — the only thing on this screen that should be moving. It scrolls away with everything else now. */ .examples-head { padding-bottom: 22px; } .modal-head h2 { font-size: clamp(42px, 5vw, 66px); } .modal-lead, .modal-note { margin: 16px 0 0; max-width: 800px; color: var(--muted); } .modal-note { font-size: 15px; } .dialog-close { position: absolute; top: 18px; right: 18px; width: 42px; height: 42px; border-radius: 50%; border: 1px solid var(--line); background: rgba(255,255,255,.66); cursor: pointer; font-size: 28px; line-height: 1; z-index: 5; } .examples-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; margin-top: 30px; } .example-card { background: #f6f2ea; border: 1px solid var(--line); overflow: hidden; /* Isolate each card so a moving plate can never invalidate its siblings. */ contain: paint; } .motion-shot { position: relative; /* 16:9, matching the delivered film. It was 4:3 to suit a tall still plate; holding that now would crop the top and bottom off every shot, which is the one thing an example must not do. */ aspect-ratio: 16 / 9; overflow: hidden; background: #1a1c1f; } /* REAL FOOTAGE NOW. Everything between here and the motion bar used to be a machine for faking the product: a wide still plate translated across a 4:3 window on a shared 28s timeline, with a toggle offering two flavours of the fake. It was well built and it was the wrong thing to build — it looked like a crop panning over a photograph, which is exactly what Villa Sight does NOT do, so the examples argued against the product. These are four shots from one finished film (2081 Tahoe Mountain Rd). The camera genuinely moves through the room: near furniture and the mountains outside travel at different speeds, which no pan across a flat image can produce. That parallax is the proof, and it only needed a