/* * LeadX Security — new home page * ───────────────────────────────────────────────────────────────────────────── * * HOW THIS FILE IS MEANT TO BE EDITED * * Everything a design decides — colour, type size, spacing, radius — is a token * in :root below, and nothing further down this file hardcodes one. So matching * Figma means editing the :root block and nothing else; the layout underneath * already knows what to do with whatever the values turn out to be. * * Tokens tagged FIGMA carry a value read off the comp. Tokens tagged GUESS were * measured from a screenshot and still need confirming. * * The rules below :root are structure — flex, stacking, responsive behaviour. * Those are engineering decisions rather than design ones, and should not need * touching to match a comp. */ /* ═══════════════════════════════════════════════════════════════════════════ FONTS Product Sans, self-hosted to match LeadXForms. Three weights only — the full family is twelve files and 1.1 MB, and nothing on this page sets the other nine. font-display:swap so text paints in the fallback immediately rather than holding the hero blank while a 90 KB file arrives. ═══════════════════════════════════════════════════════════════════════════ */ @font-face { font-family: 'Product Sans'; src: url('../fonts/product-sans/ProductSans-Regular.ttf') format('truetype'); font-weight: 400; font-style: normal; font-display: swap; } @font-face { font-family: 'Product Sans'; src: url('../fonts/product-sans/ProductSans-Medium.ttf') format('truetype'); font-weight: 500; font-style: normal; font-display: swap; } @font-face { font-family: 'Product Sans'; src: url('../fonts/product-sans/ProductSans-Bold.ttf') format('truetype'); font-weight: 700; font-style: normal; font-display: swap; } /* ═══════════════════════════════════════════════════════════════════════════ TOKENS — this is the block to edit ═══════════════════════════════════════════════════════════════════════════ */ :root { /* ── Type families ────────────────────────────────────────────────────── The comp uses three, the same three LeadXForms does. Which one applies is decided per element rather than per level, so they are named for the job they do here rather than a hierarchy they do not follow: --font Product Sans — headline and both lede paragraphs, and the page default, which the carried-over nav inherits --font-ui Poppins — eyebrow and the checked claims --font-accent Albert Sans — the text CTA and the micro line --font-dash Inter — the dashboard mock only, which imitates a real product UI rather than this page's own voice The fallback stacks matter more than they look: font-display is swap, so these are what a visitor actually reads for the first few hundred milliseconds, and they are chosen to be geometric rather than whatever the platform default happens to be. */ --font: 'Product Sans', 'Poppins', system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif; --font-ui: 'Poppins', 'Product Sans', system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif; --font-accent: 'Albert Sans', 'Poppins', system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif; --font-dash: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif; --fw-regular: 400; --fw-medium: 500; --fw-semibold: 600; --fw-bold: 700; /* ── Type scale ───────────────────────────────────────────────────────── Every size is the comp's own number, written plainly. Nothing is computed, so what is in Figma is what is here and a value can be checked by eye. Narrow screens are handled by redeclaring these same tokens inside the two media queries at the end of the file — one place per breakpoint, and the rules below never have to know a breakpoint exists. */ /* 70, not Figma's 66. Ahmed's call: the hero is the one heading allowed to be bigger than the rest, and it is now one round number against the 50 every other section carries. */ --fs-h1: 70px; --lh-h1: 1.1; /* FIGMA — 110%, i.e. 72.6px */ --fw-h1: 400; /* FIGMA — Regular, not Bold. Product Sans carries display sizes on its own weight. */ /* Every section heading below the hero. One size, one weight, one measure — set here so a new section inherits the page's voice instead of choosing its own. */ /* * 50, and this token is now the only desktop heading size below the hero. * * The comment above already said "one size ... so a new section inherits the * page's voice instead of choosing its own", but three sections had opted out * with tokens of their own and desktop was carrying five heading sizes: 66 * hero, 56 here, 48 on AI Code Guardian, 48 on Geo Blocking, 42 on the closing * CTA. --fs-guardian-title, --fs-geo-title and --fs-cta-title are all 50 now * too, so the page reads as one voice at desktop. * * They are kept as separate tokens rather than deleted because each still * steps to its own value on tablet and phone, which the narrow layouts are * measured against. */ --fs-section-title: 50px; --lh-section-title: 1.1; /* FIGMA — 110% */ --text-heading: #000; /* FIGMA — headings are pure black, a shade darker than body ink */ --fs-eyebrow: 16px; /* FIGMA */ --lh-eyebrow: 1.5; /* FIGMA — 150%, i.e. 24px */ --fs-lede-strong: 20px; /* FIGMA — the first, bold paragraph */ --fs-lede: 18px; /* FIGMA — the second */ --lh-lede: 1.5; /* FIGMA — 150% */ --fs-btn: 16px; /* FIGMA */ --fs-micro: 16px; /* FIGMA */ --fs-trust: 16px; /* FIGMA */ --lh-trust: 1.5; /* FIGMA — 150% */ /* ── Colour ───────────────────────────────────────────────────────────── */ --text: #151515; /* FIGMA — "Black" */ --text-muted: #646464; /* FIGMA — "Grey", both lede paragraphs */ --text-micro: #808080; /* FIGMA — the micro line */ /* The headline is painted with this and clipped to its glyphs. Solid to the halfway point, then falling away to grey — which is why the last words of each line read lighter without any of them being marked up that way. */ --title-gradient: linear-gradient(90deg, #151515 50%, #808080 100%); /* FIGMA */ --green: #008744; /* brand green, shared with LeadXForms */ --green-hover: #00743A; --gold: #F5B301; /* GUESS — the sparkle */ --white: #fff; /* ── Hero background wash ─────────────────────────────────────────────── The wash itself is assets/images/hero-gradient.webp, applied in .hero-bg. Only the base colour is a token now — the three stop colours that used to build it by hand are gone along with the gradients they fed. */ --wash-base: #FFFFFF; /* ── Layout ───────────────────────────────────────────────────────────── */ /* The comp's own content width. Nothing reads it any more — .container is Bootstrap's, to match the brand — but it is the number every Figma frame is drawn against, so it is worth being able to look up. */ /* Height of the fixed header. site.js overwrites this on load and on resize with the real measured height, so the hero always clears it — the value here is only what applies for the moment before that script runs. */ --header-h: 88px; --hero-pad-top: 96px; /* GUESS — nav bottom to eyebrow */ --hero-pad-bottom: 0px; /* the shot carries its own bottom space */ /* ── Vertical rhythm inside the hero ──────────────────────────────────── Top to bottom. The first four come off the comp; the last three still need checking against it. */ /* The HERO's eyebrow-to-title gap, and only the hero's — .hero-content is the one rule that reads it. The sections use --gap-section-head below. */ --gap-eyebrow-title: 24px; /* One number for every SECTION's heading stack. It was four — 32, 24, 20 and 16, one per section — and none of them stepped. 20 is what geo, diff, action, stat and the plans intro were already drawing, so it is the value the page already reads as its own. The hero is deliberately not on it: 32 there, at every width, because that is the gap that opens the page rather than paces it. */ --gap-section-head: 20px; /* FIGMA */ --gap-micro-trust: 64px; /* GUESS — micro line down to the checked row */ --gap-trust-shot: 60px; /* GUESS */ /* ── Buttons ──────────────────────────────────────────────────────────── */ --btn-h: 40px; /* FIGMA */ --btn-pad-x: 16px; /* FIGMA */ --btn-radius: 8px; /* Phone only — see the hero structure block. 50px is LeadXForms' own .button radius, already on this page in the header. */ --gap-trust-row: 14px; --gap-actions-trust: 28px; /* GUESS — the comp gave no radius */ /* ── Product shot ─────────────────────────────────────────────────────── */ /* 1128, not the 1110 Figma reports. Figma measures the card and leaves the 9px frame outside it; this export draws the frame into the artwork, so the file is 1110 + 9 + 9 wide. Capping at 1110 scales the whole thing down and leaves the card itself 18px short of the comp. */ --shot-w: 1128px; /* FIGMA */ --shot-radius: 25.085px; /* FIGMA — top corners only; the frame runs off the bottom of the section */ --shot-border: 9px; /* FIGMA */ /* ── Measure ──────────────────────────────────────────────────────────── Both `none` on purpose: the grid column is the measure. An earlier pass capped the headline at 17ch and the lede at 62ch, which sounds reasonable and is badly wrong here — 17ch at 64px is roughly 595px against a line the comp runs to about 950px, so the headline broke into four lines instead of the drawn two, and the first lede wrapped where the design keeps it on one. To shorten a line, narrow the column (col-xl-*), not these. */ --title-measure: none; --lede-measure: none; /* ── How protection works ─────────────────────────────────────────────── */ /* The value that was drawing. The token said #180D28 and .engine-card said #19022A, and the card won because nothing read the token. */ --engine-card-bg: #19022A; /* GUESS — the dark plate */ --engine-card-radius: 28px; /* GUESS */ --engine-card-pad: 56px; /* GUESS */ --engine-ink: #FFF; /* GUESS — copy on the dark card */ --engine-ink-faint: #8A809B; /* GUESS — the step label */ --fs-engine-step: 14px; /* GUESS */ --fs-engine-title: 44px; /* GUESS — "The Gate" */ --fs-engine-desc: 22px; /* GUESS */ /* * 18, not the 13 that used to sit here. 13 was a GUESS that never drew — * .engine-tag hardcoded 18px and never read this token, the same dead-token * bug as --fs-stat-lede and --fs-faq-q. The token records what desktop * actually renders, so wiring the rule to it moves nothing above 480. */ --fs-engine-tag: 18px; /* Padding and gap are tokens for the same reason: the phone step needs them. */ --engine-tag-pad-y: 8px; --engine-tag-pad-x: 14px; --engine-tags-gap: 10px; --fs-engine-list: 22px; /* GUESS */ --fs-engine-tab: 15px; /* 35, not the 32 this said, because 35 is what .engine-panels was drawing from a literal. Same reason for --gap-engine-panel below. */ --gap-engine-tabs: 35px; --gap-engine-tab: 8px; --engine-panel-fade: .3s; --gap-engine-panel: 35px; /* The note and the two insets had no tokens at all, so they never stepped: 22px of note heading and 30px of list indent stayed put on a 280px column. */ --fs-engine-note-title: 22px; --fs-engine-note-body: 18px; --engine-list-indent: 32px; --engine-note-indent: 18px; --engine-tab-pad: 10px 18px; --engine-strip-pad: 4px; --engine-strip-radius: 12px; --engine-strip-bg: rgba(255, 255, 255, .05); --engine-seg-radius: 8px; --engine-seg-hover: rgba(255, 255, 255, .07); --engine-tab-h: 44px; /* GUESS */ --engine-tag-block: #FFE4E4; /* FIGMA */ --engine-tag-filter: #D8F3E4; /* GUESS */ --engine-tag-harden: #D9E8FF; /* GUESS */ /* How far the page scrolls per layer. Five layers, so the section is five times this — the single number that decides whether the sequence feels unhurried or like the page has stopped responding. 80vh is a little less than a screen per step, which reads as brisk. */ --engine-step-h: 80vh; --engine-accent: #17A05A; /* ── Feature deep-dives ───────────────────────────────────────────────── */ /* The three background washes. Width is the comp's frame; the offsets place each one down the section and are the numbers to change when Figma says a wash sits somewhere else. Everything else about them — size, colour, the 200px blur — is inside the SVG files. See .deep-blur. */ --deep-blur-w: 1440px; /* FIGMA — the design frame */ --deep-blur-1-top: 0; /* FIGMA */ --deep-blur-2-top: 50%; /* FIGMA */ --deep-blur-3-bottom: 0; /* FIGMA */ --deep-line: #E0E0E0; /* FIGMA — the rules and the diamond outlines */ /* The rules. One flat colour for their whole length — they hold the same weight from edge to edge in the comp and do not fade out toward it. */ --deep-rule: #E5E5E5; /* The rule as the comp draws it: over the COPY's half only, solid against the middle where the marker sits and dissolving as it reaches the section's outer edge. The picture's half of the line is open — it is why the artwork never has a rule above it or beside it. Two of them, because which half that is depends on which side the row keeps its copy: -l for rows 01, 03 and 05, -r for the mirrored 02, 04 and 06. The two stops that share a position are a hard cut, not a ramp — the line stops dead at the middle rather than bleeding past the marker. #E5E5E500 rather than transparent, and the difference is not cosmetic — transparent is rgba(0,0,0,0), so an engine interpolating without premultiplied alpha greys the fade out. Same RGB at zero alpha cannot. It is --deep-rule's own value; a hex token cannot carry an alpha suffix, which is the only reason it is written out rather than derived. */ --deep-rule-fade-l: linear-gradient(to right, #E5E5E500 0%, var(--deep-rule) 25%, var(--deep-rule) 50%, #E5E5E500 50%); --deep-rule-fade-r: linear-gradient(to right, #E5E5E500 50%, var(--deep-rule) 50%, var(--deep-rule) 75%, #E5E5E500 100%); /* Rows 04 and 06: the line runs the whole width, but only ONE of its two ends has something to land on. Those two are closed on the right, where the copy is — so that end runs square into the edge and stops. The left end is the picture's, and the picture has no edge on any row: the line runs out into the section's measure there, so it dissolves, exactly as every other rule does at an open end. Square at both ends was the mistake — it made the left end look cut off rather than finished. */ --deep-rule-closed-r: linear-gradient(to right, #E5E5E500 0%, var(--deep-rule) 25%, var(--deep-rule) 100%); /* FIGMA */ /* Figma draws the copy cell at a flat 500. Here it is a floor, not a fixed height — see .deep-copy for why the difference matters. */ --deep-cell-min-h: 500px; /* FIGMA */ /* A pale wash across the copy cell, fading out toward the rule in the middle of the row. Turned around on mirrored rows. */ /* site.js overwrites this the first time the bar sticks; the fallback only covers the frames before any scroll has happened. */ --header-h-sticky: 74px; --gap-deep-copy: 32px; /* FIGMA — title to the What/How/Why list */ /* The mark where the rules cross. It is used as a mask rather than an image, so the shape lives here once and takes its colour from --deep-rule with the lines it sits on — change that one value and all of them follow. */ --deep-star: 20px; /* FIGMA */ /* The tick on the AI Code Guardian claims, as the comp draws it — a brush stroke, not a geometric check. Inlined rather than fetched: 3KB is less than the request would cost, and it is used once. A mask, not a background image, for the same reason --deep-star-shape is one: a mask takes only the shape and lets background-color supply the colour, so the tick reads from --green like everything else green on the page. As an image its #008744 would be baked into the URI and would quietly stop matching the moment that token changed. */ --guardian-tick: url("data:image/svg+xml,%3Csvg width=%2211%22 height=%2212%22 viewBox=%220 0 11 12%22 fill=%22none%22 xmlns=%22http://www.w3.org/2000/svg%22%3E%3Cpath d=%22M2.37011 11.5501C2.37011 11.4201 2.34511 11.3551 2.29511 11.3551L1.95011 11.5201C1.95011 11.4501 1.91011 11.4001 1.83011 11.3701L1.71011 11.3551C1.63011 11.3551 1.53011 11.3901 1.41011 11.4601C1.39011 11.4101 1.36511 11.3601 1.33511 11.3101C1.30511 11.2601 1.28011 11.2151 1.26011 11.1751C1.13011 10.9251 1.00011 10.6501 0.870107 10.3501C0.750107 10.0401 0.635107 9.74514 0.525107 9.46514C0.425107 9.18514 0.345107 8.96514 0.285107 8.80514C0.245107 8.67514 0.200107 8.48014 0.150107 8.22014C0.100107 7.96014 0.0501075 7.63014 0.000107463 7.23014C0.110107 7.30014 0.195107 7.33514 0.255107 7.33514C0.325107 7.33514 0.390107 7.23014 0.450107 7.02014C0.480107 7.06014 0.535108 7.08014 0.615108 7.08014C0.675108 7.08014 0.720107 7.06014 0.750107 7.02014L0.990108 6.66014L1.26011 6.75014H1.27511C1.29511 6.75014 1.31511 6.74014 1.33511 6.72014C1.35511 6.70014 1.38511 6.68014 1.42511 6.66014C1.50511 6.61014 1.56511 6.58514 1.60511 6.58514L1.65011 6.60014C1.90011 6.72014 2.06011 6.94014 2.13011 7.26014C2.31011 8.02014 2.49011 8.40014 2.67011 8.40014C2.85011 8.40014 3.06011 8.21014 3.30011 7.83014C3.42011 7.64014 3.54011 7.42014 3.66011 7.17014C3.79011 6.92014 3.92011 6.64014 4.05011 6.33014C4.07011 6.45014 4.09011 6.51014 4.11011 6.51014C4.16011 6.51014 4.24511 6.38514 4.36511 6.13514C4.49511 5.88514 4.70011 5.54014 4.98011 5.10014C5.14011 4.83014 5.34011 4.52514 5.58011 4.18514C5.83011 3.84514 6.09511 3.49514 6.37511 3.13514C6.65511 2.77514 6.92511 2.43514 7.18511 2.11514C7.45511 1.79514 7.69511 1.52014 7.90511 1.29014C8.11511 1.06014 8.27011 0.910136 8.37011 0.840136C8.75011 0.580136 9.05011 0.330136 9.27011 0.0901363C9.26011 0.160136 9.24511 0.225136 9.22511 0.285136C9.21511 0.335136 9.21011 0.370136 9.21011 0.390136C9.21011 0.430136 9.23011 0.450136 9.27011 0.450136L9.69011 0.240136V0.300136C9.69011 0.380136 9.71011 0.420137 9.75011 0.420137C9.78011 0.420137 9.84011 0.375136 9.93011 0.285136C10.0201 0.195136 10.0701 0.130136 10.0801 0.0901363L10.0501 0.300136L10.5601 0.000136554L10.4401 0.270137C10.6001 0.160136 10.7151 0.105136 10.7851 0.105136C10.8251 0.105136 10.8551 0.130136 10.8751 0.180136C10.8951 0.220136 10.9051 0.260136 10.9051 0.300136C10.9051 0.360136 10.8801 0.430136 10.8301 0.510136C10.7801 0.590136 10.7151 0.685136 10.6351 0.795136C10.5751 0.875136 10.4751 0.995136 10.3351 1.15514C10.2051 1.30514 10.0051 1.53014 9.73511 1.83014C9.46511 2.12014 9.10511 2.52514 8.65511 3.04514C8.53511 3.17514 8.35011 3.40514 8.10011 3.73514C7.85011 4.05514 7.56511 4.43014 7.24511 4.86014C6.93511 5.28014 6.62511 5.70514 6.31511 6.13514C6.00511 6.56514 5.73011 6.95514 5.49011 7.30514C5.25011 7.64514 5.08011 7.90014 4.98011 8.07014L4.05011 9.64514C3.85011 9.98514 3.68511 10.2651 3.55511 10.4851C3.42511 10.6951 3.32511 10.8401 3.25511 10.9201C3.10511 11.1001 2.94011 11.2601 2.76011 11.4001L2.62511 11.3251L2.50511 11.4001L2.37011 11.5501Z%22 fill=%22%23000%22/%3E%3C/svg%3E"); --deep-star-shape: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%2220%22 height=%2220%22 viewBox=%220 0 20 20%22 fill=%22none%22%3E%3Cpath d=%22M9.47917 20C9.28819 18.8715 8.78472 17.6562 7.96875 16.3542C7.15278 15.0347 5.98958 13.8108 4.47917 12.6823C2.98611 11.5538 1.49306 10.8333 0 10.5208V9.42708C1.47569 9.07986 2.89062 8.4375 4.24479 7.5C5.61632 6.54514 6.76215 5.39931 7.68229 4.0625C8.61979 2.69097 9.21875 1.3368 9.47917 0H10.5729C10.7292 0.868055 11.0417 1.76215 11.5104 2.68229C11.9792 3.58507 12.5781 4.45312 13.3073 5.28646C14.0538 6.10243 14.8872 6.84028 15.8073 7.5C17.1788 8.47222 18.5764 9.11458 20 9.42708V10.5208C19.0451 10.7118 18.0556 11.1024 17.0312 11.6927C16.0243 12.283 15.0868 12.9861 14.2187 13.8021C13.3507 14.6007 12.6389 15.4427 12.0833 16.3281C11.2674 17.6302 10.7639 18.8542 10.5729 20H9.47917Z%22 fill=%22%23000%22/%3E%3C/svg%3E"); --deep-cell-pad: 40px; /* GUESS — inside each half of a row */ /* 18 to match every other section lede at desktop; was a guessed 16. It has no tablet step, so the phone step added in the 575 block keeps narrow screens reading exactly as they did. */ /* 22, not the 18 that used to sit here. 18 was never drawn: .deep-lede hardcoded 22px and never read this token — the same dead-token bug as --fs-faq-q and --fs-faq-a. The token now records what desktop actually renders, so wiring the rule to it changes nothing above 991. */ --fs-deep-lede: 22px; /* FIGMA. Was 26 here while the rule hardcoded 38, so 26 never drew. */ --fs-deep-title: 38px; /* GUESS */ /* ── Stats ────────────────────────────────────────────────────────────── */ /* The figure in the headline takes its own gradient — strong blue into near-white, left to right, so "43" carries the weight and the percent sign trails off. Match this to the blue in stat-card.svg (its #0066DB) if the artwork is ever re-exported. */ --stat-figure-gradient: linear-gradient(90deg, #0066DB 0%, #D6E9FF 100%); /* FIGMA */ --fs-stat-figure: 100px; /* FIGMA */ /* * 30 and 22, which is what the rules were hardcoding while these tokens sat * dead — see the note on .stat-lede. The old 20/18 were written to "match * --fs-lede-strong/--fs-lede at desktop", but since nothing read them the * section never actually matched anything; it drew 30/22 at every width. * These record the truth, so desktop is unchanged and the mobile step below * 991 is the only thing that moves. */ --fs-stat-lede-strong: 30px; --fs-stat-lede: 22px; /* normal is what both rules had. One token so the phone step can set both. */ --lh-stat-lede: normal; /* 150% is what .deep-lede and .action-lede both hardcoded. */ --lh-lede: 150%; --stat-card-w: 295px; /* GUESS — the card is narrow; the column would otherwise stretch it */ --stat-card-radius: 12px; /* GUESS */ --gap-stat-copy: var(--gap-section-head); /* GUESS — between the title and the two paragraphs */ /* Top and bottom of every section below the hero. */ --section-pad-y: 50px; /* ── PLANS ────────────────────────────────────────────────────────────── Read off the comp. Anything marked GUESS was measured from the image rather than given as a number, so one value corrects it. */ /* The wash behind the head of the section. Width is the comp's frame, not the size of the colour inside it. The offset is what lines the blob up with the heading - see .plans-wash. */ /* Superseded - the wash spans the viewport now, so there is no frame width left to hold it at. See .plans-wash for why this one cannot be centred at 1440 the way the other two washes are. /* The file's own height. Held fixed at every width so --plans-wash-top below means the same thing on a laptop and on a desktop. */ --plans-wash-h: 1376px; /* FIGMA - the design frame */ /* * Negative on purpose. The file is 1376 tall and its colour sits in the lower * middle of that canvas, around y 500-980 once the blur filters are counted - * so at top: 0 the blob landed behind the CARDS and the heading had nothing * behind it but the fade. Pulling it up 450 puts the dense part across the * eyebrow and the heading and lets it fall away through the cards, which is * the order the comp reads in. * * The part that travels above the section is cropped by overflow: clip, and * that crop is wanted - the comp shows the wash cut flat at its top edge too. */ --plans-wash-top: -450px; /* GUESS - tuned against the comp at 1440 */ --gap-plans-head: var(--gap-section-head); --gap-plans-grid: 64px; --plans-title-measure: 950px; --fs-plans-title: 50px; --lh-plans-title: 120%; --gap-plans-card: 24px; /* The drawn card width. .plan caps itself here and the column that holds it is capped to match, so the 24px gap above is the only space between two cards - nothing is left over inside a column to widen it. */ --plan-w: 360px; --plan-pad: 32px; --plan-pad-featured: 44px; /* the featured card's extra height */ --plan-line: #E8E8EE; /* GUESS */ --plan-line-featured: #D9D9E3; /* GUESS */ --plan-shadow: 0 18px 40px rgba(20, 20, 40, .08); /* GUESS */ --plan-badge-pad: 6px 14px; --fs-plan-badge: 11px; --fs-plan-name: 26px; /* ── The card's price ─────────────────────────────────────────────────── 40 to match --fs-plans-price on the annual band below the grid, so the two figures in this section are one size rather than two. The symbol and the period are deliberately NOT the same size as the figure: leadxforms.com renders A$ and 20 as separate elements for that reason, and this follows it so the two sites quote a price the same way. */ --fs-plan-price: 40px; --fs-plan-price-symbol: 22px; --fs-plan-price-period: 14px; /* Tight, because the symbol belongs to the figure - the period is pushed off by its own margin instead. */ --gap-plan-price: 2px; --fs-plan-desc: 15px; --fs-plan-count: 16px; --fs-plan-feature: 15px; --gap-plan-count: 20px; --gap-plan-feature: 12px; --gap-plans-yearly-top: 48px; --gap-plans-yearly: 32px; --plans-yearly-pad: 48px; --plans-yearly-radius: 24px; --plans-yearly-bg: #17211C; /* GUESS */ --plans-yearly-ink: #B9C2BC; /* GUESS */ --plans-yearly-copy-min: 420px; --plans-yearly-measure: 520px; --gap-plans-yearly-badge: 20px; --gap-plans-yearly-title: 16px; --fs-plans-yearly-title: 28px; --fs-plans-yearly-body: 14px; --gap-plans-price: 10px; --fs-plans-price: 40px; --fs-plans-price-unit: 14px; --fs-plans-price-note: 13px; --gap-plans-foot: 40px; --fs-plans-foot: 15px; /* GUESS */ /* ── Why LeadX Security ───────────────────────────────────────────────── */ /* The band's tint, and how far the section stands off it. There is no panel width or radius any more — the colour is on the section and runs to the window's edges, so there is no box to size or corner to round. */ /* FIGMA. Was 72 here while the rule hardcoded 80, so 72 never drew. */ --diff-panel-pad-y: 80px; /* GUESS */ /* 50 to match --fs-section-title at desktop; was 56. */ --fs-diff-title: 50px; /* FIGMA */ --lh-diff-title: 110%; /* FIGMA — 62px line spacing at 56px */ /* Holds the break after "Dashboards." — the comp puts the second sentence on its own line, and this is the width that does it. */ --diff-title-measure: 880px; /* GUESS — measured off the comp */ --gap-diff-head: var(--gap-section-head); /* GUESS — eyebrow to headline */ --gap-diff-cards: 68px; /* GUESS — headline to the row */ --gap-diff-card: 26px; /* FIGMA — between one card and the next */ --diff-card-pad: 32px; /* FIGMA — all four sides */ --diff-icon-size: 70px; /* FIGMA — the export's own width and height */ /* The card's two internal gaps are the same measurement, which is what makes the tile, the heading and the passage read as one stack rather than as a picture with a caption under it. */ /* ── FAQ and closing CTA ──────────────────────────────────────────────── */ /* 50 to match --fs-section-title at desktop; was 56. */ --fs-faq-title: 50px; /* FIGMA — 62px line spacing */ --lh-faq-title: 110%; /* FIGMA */ /* FIGMA. Steps to 64 below lg so this section matches every other one — --section-pad-y drops to 64 there and this had no step at all, leaving the FAQ 16px deeper than its neighbours at every phone width. */ --faq-pad-y: 50px; /* FIGMA — the section's own top and bottom */ /* FIGMA — between line 2's 510 and the 560 that would pull "Owners" up */ /* Figma's 75 is measured from the headline's ink, because a Figma text frame hugs its glyphs. A CSS margin starts at the LINE BOX, which at 56px/110% sits 2.8px below that ink — so a flat 75 here renders as 78 on screen. Taking the half-leading off makes the white band the 75 the comp shows. */ --gap-faq-list: 72px; /* FIGMA — 75 measured, less the headline's 2.8px of half-leading */ --faq-list-w: 900px; /* FIGMA — measured off the dividers */ /* * FIGMA gives 16px of row padding and 18px between items, and those two * numbers together put every question OFF CENTRE between its two rules. * * The rule is drawn on the item's BOTTOM, so the 18px that separates one item * from the next falls entirely ABOVE the following question and nothing * balances it below. Measured from the pixels on the closed row "What happens * if the firewall blocks a legitimate visitor?": 38.5px of space above the * text, 15.5px below it, inside a 73px band. The chevron, a flex item that * align-items:center actually centres, sat correctly — so the row read as * visibly lopsided, question against chevron. * * The 18 moves into the padding instead of sitting between items, split * evenly: 16 + 18/2 = 25. The band is the same height it always was — * 18+16+22+16+1 and 0+25+22+25+1 are both 73 — so nothing about the page's * rhythm moves; the space is just on both sides of the question now instead * of stacked above it. * * The padding stays on the rather than moving back onto the item, * for the tap-target reason recorded on .faq-q. */ --faq-row-pad: 25px; /* FIGMA — question to answer, inside an open item */ --gap-faq-qa: 8px; /* Was 18px: folded into --faq-row-pad above so it lands on both sides of the question rather than only above it. */ --gap-faq-item: 0px; /* Derived, not read off a panel: 1.6 is what makes Figma's two numbers add up to the 82px row pitch the comp actually measures — 18 between items, 16 of padding, a 32px line box, 16 again. At 1.4 the row lands 4px short. */ --lh-faq-q: 160%; /* FIGMA — by arithmetic */ --fs-faq-q: 20px; /* FIGMA — 20px ink band, and 646px across for the longest question */ /* FIGMA. Was 16 here while the rule hardcoded 18, so 16 never drew. */ --fs-faq-a: 18px; /* FIGMA */ /* FIGMA. Same story as --fs-faq-a above. */ --lh-faq-a: 150%; /* FIGMA — 27px line spacing */ --faq-answer-measure: 890px; /* GUESS */ /* * One constant page gutter below 992 — see the fluid-container block. * * 10, not 24. The Engine section was carrying its own 10px while every other * band sat at 24, and a page whose margin changes from section to section * reads as unfinished however carefully each section is built. This is the * number the whole page shares now, and the Engine's special case is gone * (see THE ENGINE, UNPINNED). * * One value to change if 10 turns out to be too tight for body copy. */ --page-gutter: 15px; --gap-cta-card: 110px; /* FIGMA — last divider to the green card */ /* The section, not the card: the comp gives the card 80 of its own. Steps to 64 below lg so this band matches every other section — it had no step at all and stayed 16px deeper than its neighbours on every phone. */ --cta-pad-y: 50px; /* GUESS */ /* * The card is narrower than the container: it is inset while the wordmark * under it runs the full width, and that contrast is what makes it read as a * card. 1160 was my estimate off the comp; 1122 is the number from Figma. */ --cta-card-w: 1200px; /* FIGMA */ --gap-cta-wordmark: 60px; /* GUESS */ /* * assets/wordmark.svg is 161.36 x 28.95. The box is deliberately SHORTER than * that — 22 of those 28.95 units, about three quarters — because the comp cuts * the glyphs off at the bottom of the section. Change the 22 to change how * much of the name shows; 28.95 would show all of it. */ --cta-wordmark-ratio: 161.36 / 22; --cta-wordmark-ink: #EDEFF3; /* GUESS */ --gap-cta-card-rows: 50px; /* FIGMA */ --cta-radius: 32px; /* FIGMA — measured off the corner */ --cta-card-pad-y: 80px; /* FIGMA — 82 above the headline, 80 below the button */ --cta-card-pad-x: 0px; /* FIGMA — see .cta-card */ /* GUESS */ /* FIGMA. Was 40 here while the rule hardcoded 42, so 40 never drew. */ /* 50 to match --fs-section-title at desktop; was 42. The tablet and phone steps below are untouched. */ --fs-cta-title: 50px; /* FIGMA. Same story as --fs-cta-title above. */ --lh-cta-title: 110%; /* FIGMA */ /* GUESS — holds the break after "before" */ /* FIGMA. Was 16 here while the rule hardcoded 18. */ --fs-cta-lede: 18px; /* FIGMA */ --cta-btn-bg: #151515; /* FIGMA */ --cta-btn-h: 40px; /* FIGMA */ --cta-btn-pad-x: 20px; /* GUESS — 158px wide at this label */ --cta-btn-radius: 8px; /* GUESS */ --fs-cta-btn: 14px; /* GUESS */ /* ── Header and footer ────────────────────────────────────────────────── */ /* Every value here is LeadXForms', copied so the two products wear the same chrome. They are tokens so this file can read them, not so they can be tuned — changing one breaks the match, which is the point of them. */ --hf-ink: #151823; /* LEADXFORMS — --lxf-dark */ --hf-ink-hover: #44464F; /* LEADXFORMS */ --hf-green-hover: #339F69; /* LEADXFORMS */ --hf-body: #404040; /* LEADXFORMS — footer copy and links */ --hf-line: #E5E5E5; /* LEADXFORMS — the footer's top rule */ --hf-bar-pad: 20px; /* LEADXFORMS */ --hf-bar-pad-sticky: 12px; /* LEADXFORMS */ --hf-logo-w: 200px; /* LEADXFORMS */ --hf-logo-w-sticky: 180px; /* LEADXFORMS */ --hf-footer-logo-w: 224px; /* LEADXFORMS */ /* * 38, not LeadXForms' 25. That 25 was set for a bar of six items whose labels * were single words — Home, Features, Templates, Integrations, Resources, * Pricing. This bar carries "How It Works" and "AI Guardian", two-and * three-word labels, and at 25px the gaps between items read as narrower than * the spaces inside them, so the bar looked like one long string rather than * six things. 38 puts the gap comfortably wider than a word space at * --fs-hf-menu and the items separate again. */ --hf-menu-gap: 38px; --hf-btn-h: 50px; /* The button component's own cost, tokenised so the phone block can cut it. --hf-btn-icon-pad-r reserves the arrow disc: 6px inset + the disc + clearance. */ --hf-btn-pad-y: 6px; --hf-btn-pad-x: 24px; --hf-btn-disc-w: 50px; --hf-btn-icon-pad-r: 65px; /* LEADXFORMS */ --fs-hf-menu: 17px; /* LEADXFORMS */ /* LeadXForms' .button sets no font-size at all — it inherits body's 18px. Stated here instead of relying on a body size this page does not set: at the browser default of 16px the pills came out about 30px narrower each and the labels visibly smaller than the brand's. */ --fs-hf-btn: 18px; /* LEADXFORMS — inherited from body there */ --fs-hf-heading: 25px; /* LEADXFORMS — footer column headings */ --fs-hf-body: 16px; /* LEADXFORMS */ --fs-hf-small: 14px; /* LEADXFORMS — the copyright line */ /* ── Product in action ────────────────────────────────────────────────── */ /* The wash behind this section. Width is the comp's frame, not the size of the colour inside it — see .action-wash for why those are different numbers. The offset places it down the section. */ --action-wash-w: 1440px; /* FIGMA — the design frame */ --action-wash-top: 0; /* GUESS */ /* 22 for the same reason as --fs-deep-lede above: .action-lede hardcoded it and never read this token, so 18 never drew. Desktop is unchanged by wiring it. */ --fs-action-lede: 22px; /* GUESS */ --gap-action-head: var(--gap-section-head); /* GUESS */ /* The dashboard. 1200 in the comp, which is neither the page container nor the hero's shot width — it has its own. */ --dash-w: 1200px; /* GUESS — measured off the comp */ --dash-radius: 14px; /* GUESS */ --gap-dash-tabs: 32px; /* FIGMA */ --dash-pad: 24px; /* GUESS — card edge to its content */ --dash-border: #EAEBEF; /* FIGMA — sampled from the design export */ --dash-bg: #FFFFFF; /* GUESS */ /* The tab strip sits on its own tint so the strip reads as chrome and the panel below it as content. */ --fs-dash-tab: 15px; /* GUESS */ --dash-tab-ink-active: #111827; /* FIGMA */ /* The open tab's underline is the brand green, not the colour of its own text — established by hue: the design export reads #72B797 there, which is --green at about 55% over the strip, and both sit on hue 150. */ --dash-tab-underline: var(--green); /* FIGMA */ --fs-dash-title: 20px; /* GUESS — "Site Overview" */ --fs-dash-sub: 14px; /* GUESS */ --fs-dash-row: 15px; /* GUESS */ --dash-time-ink: #9CA3AF; /* GUESS — "live", "2 min ago" */ --dash-row-h: 53px; /* GUESS */ /* The status pill, and the one red the rows ever use. */ --dash-bad-ink: #D03A3A; /* GUESS — Blocked, Rate-limited, IP banned */ --dash-neutral-ink: #151515; /* GUESS — the outcomes that are neither good news nor bad: Reviewed, and Sent to client */ /* ── Live threat intelligence ─────────────────────────────────────────── */ /* Full-bleed dark, so like the Guardian card this block declares its own colours rather than borrowing from the light palette above. */ --geo-bg: #050A14; /* FIGMA — sampled from the design export */ --geo-ink: #FFFFFF; /* GUESS — headline, eyebrow, labels */ --geo-rule: #2C3B59; /* GUESS — the two rules between those columns */ --fs-geo-eyebrow: 14px; /* GUESS */ /* 50 to match --fs-section-title at desktop; was a guessed 48. The tablet and phone steps below are untouched. */ --fs-geo-title: 50px; --lh-geo-title: 124%; /* GUESS */ --fs-geo-label: 16px; /* GUESS — "GEO BLOCKING" */ /* The trio under the map. Heading and paragraph are the same size in the comp and differ only in weight, which is why one token serves both. */ --fs-geo-def: 18px; /* FIGMA */ --lh-geo-heading: 150%; /* FIGMA */ --lh-geo-paragraph: 26px; /* FIGMA */ --geo-def-ink: #FFF; /* FIGMA — both lines, not the softer grey used elsewhere */ /* The headline breaks after the full stop in the comp; this holds it. */ --geo-title-measure: 950px; /* GUESS — measured off the comp */ /* Reserves the map's space before the file arrives, so the three columns below it do not jump up the page while it loads. */ /* * Must match the SVG viewBox exactly, or the browser letterboxes the map * inside its own box and the two disagree about where the middle is. * * 1160 x 520 was the frame the paths were exported in, not the paths' * own extent. Measured with getBBox(): the land stops at x=1089.4, so 70 * units — 79px at a 1440 viewport — were empty on the RIGHT and nothing was * empty on the left. The map was pinned to the left edge of a correctly * centred box. Height 520 also cut 36px off the tip of Chile (land runs to * y=552.1) and 2px off Greenland (y=-1.6). * * Cropping the box down to that extent fixed the centring but made the map * noticeably taller and squarer (1.96) than the comp, which draws a wide, flat * map. So the 1160 x 520 frame stays — it is the comp's proportion — and the * viewBox is SHIFTED instead: x=-35.3 puts the 70 spare units half on each * side, so the land sits centred with equal breathing room rather than jammed * against the left edge. * * The tip of Chile is still cropped by that frame, as it is in the comp. Change * this and the viewBox together, and re-run the pin conversion: .geo-pin * --x/--y are percentages of this same box. */ --geo-map-ratio: 1160 / 520; /* The heading-to-legend and map-to-passages step. */ --gap-geo-block: 64px; /* The map's rail, as eleven of twelve columns. Measured off the comp: the map is 1183 of a 1296 content box at the 1440 frame, or 91.3% — and 11/12 is 91.67%, five pixels apart at that width. Bootstrap's fraction is the one used, so the map lands on the same grid the heading (ten) and the What/How/Why trio (ten) are already on rather than on a measurement of its own that agrees with them by luck. */ --geo-map-rail: 91.666667%; /* the stand-in crop's own ratio — correct this to the vector's when it lands */ /* The map's own palette. Every country reads one of these three, chosen by a class on its path — so the blocked list lives in the markup, not in a file somebody has to re-export. */ --geo-country: #111B2E; /* FIGMA — the countries that are neither */ --geo-customer: #204B36; /* FIGMA */ --geo-blocked: #572F2F; /* FIGMA */ /* Hover. Each state lightens into its own colour rather than every country turning the same highlight — a blocked country under the cursor is still a blocked country, and the map would otherwise forget that for as long as you are pointing at it. */ --geo-country-hover: #1B2A45; /* GUESS — a step up from --geo-country */ --geo-customer-hover: #2D6A4C; /* GUESS — a step up from --geo-customer */ --geo-blocked-hover: #7A4242; /* GUESS — a step up from --geo-blocked */ --geo-pulse-dur: 2.4s; /* GUESS — one full ring, from the dot to gone */ --geo-pin-size: 10px; /* GUESS */ --geo-pin-ok: #00DAA5; /* FIGMA */ --geo-pin-bad: #FF645A; /* FIGMA */ --geo-pin-count: #A23DE8; /* FIGMA */ --fs-geo-pin: 13px; /* GUESS */ /* ── AI Code Guardian ─────────────────────────────────────────────────── */ /* The card. The only dark surface on the page, so its colours are declared here rather than borrowed from the light palette above. */ --guardian-card-bg: #19022A; /* FIGMA */ --guardian-card-radius: 44px; /* FIGMA */ --guardian-card-pad: 80px; /* FIGMA — the inset from the card edge to the copy */ --guardian-card-w: 1240px; /* FIGMA */ /* The headline's measure. Set in pixels because it is doing a specific job: holding the break after 'code' so the two lines fall as the comp draws them. Wider and 'before' joins line one; much narrower and it becomes three lines. */ --guardian-title-measure: 730px; /* GUESS — measured off the comp */ /* The code panel is narrower than the column it sits in and hangs off the right edge of the card's content, not the middle of the row. */ --guardian-panel-w: 450px; /* GUESS — measured off the comp */ --gap-guardian-card: 50px; /* FIGMA — head to the row below it */ --guardian-ink: #FFFFFF; /* GUESS — the headline */ --guardian-ink-soft: #798BA8; /* GUESS — body copy on the dark card */ --guardian-ink-faint: #9B8FAE; /* GUESS — the eyebrow and the file name */ /* 50 to match --fs-section-title at desktop; was a guessed 48. The tablet and phone steps below are untouched. */ --fs-guardian-title: 50px; --lh-guardian-title: 118%; /* GUESS */ --fs-guardian-lede: 18px; /* GUESS */ --fs-guardian-claim: 17px; /* GUESS */ --gap-guardian-head: var(--gap-section-head); /* GUESS — eyebrow to headline */ --gap-guardian-copy: 32px; /* GUESS — lede to claims to button */ /* The code panel. Darker than the card it sits on rather than lighter — the comp sinks it in, which is what makes it read as a window rather than a tile lying on top. */ --guardian-panel-bg: #120722; /* FIGMA — the title bar is a shade lighter than the body it caps */ --guardian-bar-bg: #182234; /* GUESS */ --guardian-panel-line: rgba(255, 255, 255, .08); /* GUESS — the panel's edge and the rule under its title bar */ --guardian-panel-radius: 12px; /* GUESS */ --fs-guardian-code: 13.5px; /* GUESS */ /* Syntax colours. Deliberately few: the panel is making one point — that eval line is dangerous — and every extra hue spent elsewhere weakens it. */ --guardian-tok-fn: #798BA8; /* GUESS — add_action */ --guardian-tok-kw: #83B5FF; /* GUESS — function */ --guardian-tok-str: #5ED9A4; /* GUESS — quoted strings */ --guardian-tok-bad: #FDA49E; /* GUESS — eval */ --guardian-flagged-bg: rgba(255, 92, 92, .12); /* GUESS — the tinted row behind the eval line */ --guardian-flag-bg: rgba(248, 196, 109, .12); /* GUESS — the warning row */ --guardian-flag-ink: #F8C46D; /* GUESS */ } /* ═══════════════════════════════════════════════════════════════════════════ BASE ═══════════════════════════════════════════════════════════════════════════ */ *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; } body { margin: 0; font-family: var(--font); font-weight: var(--fw-regular); color: var(--text); background: var(--wash-base); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } img { max-width: 100%; height: auto; display: block; } a { color: inherit; } /* Never remove a focus ring without replacing it — keyboard users navigate by it. :focus-visible shows it for keyboard traversal and hides it for a mouse click, which is the behaviour that made people remove the outline in the first place. */ :where(a, button):focus-visible { outline: 2px solid var(--green); outline-offset: 3px; border-radius: 4px; } /* * clip, not hidden. * * They look identical — both cut whatever hangs past the side — but hidden also * makes this element a SCROLL CONTAINER, and a scroll container is what every * position:sticky inside it sticks to. This one never scrolls (the page does), * so sticky had nothing to stick to and simply stopped working. * * That silently broke the Engine section: its card is meant to pin while the * 3200px track scrolls past underneath, and instead the card scrolled away and * left the rest of the track empty below it. Measured at a 1440x800 viewport — * the card's bottom reached y=164 with 636px of empty section under it, and it * read as "free" at every scroll position through the track. * * It only surfaced today: a stray in the Stats section had been closing * this wrapper early, so the Engine section was escaping it and sticking by * accident. Repairing the markup put it back inside, and the conflict appeared. * * overflow: clip cuts the same way and creates no scroll container, so sticky * keeps working. Chrome 90+, Firefox 81+, Safari 16+. */ .page-wrap { overflow-x: clip; } /* ═══════════════════════════════════════════════════════════════════════════ GRID Layout is Bootstrap's container/row/col, matching how LeadXForms builds its pages — but only bootstrap-grid.min.css is loaded, not the whole framework. The grid file is 51 KB against 227 KB for full Bootstrap, and the difference is components this page defines for itself: buttons, cards, accordions. What that leaves out is the typography and colour utilities. `text-center` is the only one the markup wants, so it is declared below rather than pulling in another 83 KB for one rule. ═══════════════════════════════════════════════════════════════════════════ */ /* * .container is left exactly as Bootstrap ships it, which is what LeadXForms * does — its stylesheet carries no .container rule at all. The two sites are * one brand and the page's spine is the most visible thing they can share, so * this page does not carry one of its own either. * * ≥1400 1320 ≥1200 1140 ≥992 960 ≥768 720 ≥576 540 * * It was 1280 + a gutter, because the comp draws 1280 of content in a 1440 * frame. That is 16px narrower than the brand's, and matching the brand is * worth more than matching the comp to the pixel on a measurement the comp * inherited from Bootstrap in the first place. */ /* * Sections that line up with the hero's dashboard rather than with the page * container. * * The shot is the widest, heaviest thing on the page, and the eye reads its edge * as where the page begins — so a section starting 76px outside it looks * misaligned even though both are perfectly centred. Opt in with * `class="container container-aligned"`. * * Only needed at xxl. Below 1400 Bootstrap's container is already narrower than * the shot, so the shot is being constrained by the column too and the two agree * on their own. */ /* @media (min-width: 1400px) { .container-aligned { max-width: calc(var(--shot-w) + var(--bs-gutter-x, 1.5rem)); } } */ /* ═══════════════════════════════════════════════════════════════════════════ SECTION HEADING The h2 every section below the hero uses. Centred, black, 56 — that is the page's default voice, and a section that wants something else says so by adding a class rather than by restating the whole thing. ═══════════════════════════════════════════════════════════════════════════ */ /* * EVERY EYEBROW IS OFF, at every width. * * Two of these are on the page — the hero's trust line and geo's "Live Threat * Intelligence". The other six are styled here and used by no element, and they * are listed anyway so that adding one back to the markup does not quietly put * it on screen. * * display, not visibility or an offscreen clip, because it is meant to be gone * rather than merely unseen: display:none takes it out of the accessibility * tree too, so a screen reader is not read a line the page no longer shows. */ .hero-eyebrow, .stat-eyebrow, .engine-eyebrow, .deep-eyebrow, .guardian-eyebrow, .geo-eyebrow, .action-eyebrow, .diff-eyebrow, .plans-eyebrow { display: none; } .section-title { margin: 0; font-family: var(--font); font-size: var(--fs-section-title); font-weight: var(--fw-regular); line-height: var(--lh-section-title); text-align: center; color: var(--text-heading); } /* The only utility borrowed from outside the grid build. */ /* ═══════════════════════════════════════════════════════════════════════════ HERO ═══════════════════════════════════════════════════════════════════════════ */ /* * The header is fixed, so it is out of flow and reserves no space. The hero has * to clear it itself — hence --header-h in the top padding. site.js keeps that * variable equal to the header's measured height, so it stays correct when the * nav wraps or the mobile menu opens rather than being a number that drifts. */ .hero { position: relative; isolation: isolate; padding-top: calc(var(--header-h) + var(--hero-pad-top)); padding-bottom: var(--hero-pad-bottom); overflow: hidden; } /* * The wash is the designer's own artwork rather than a CSS approximation of it. * That is affordable here because the file is 2.8 KB — three blurred organic * shapes over a white base, all vector — so it costs about what the hand-made * gradients cost and is exactly right instead of merely close. * * Stretched to the box, not covered. The file is 1440×1307 and its blue sits low * and to the left; `cover` on anything wider than 4:3 scales it up until the * width fits and then shows only the top of it, which is the pale end. On a * 1920×1000 hero that is the top 57% of the artwork — the composition's whole * weight cropped off the bottom, which reads as the wash being too faint. * * 100% 100% scales the two axes independently, so the whole composition is * always on screen at the density the comp draws it. Non-uniform scaling would * matter on artwork with edges; this is three Gaussian blurs, and there is * nothing in it sharp enough to look stretched. * * --wash-base sits underneath as the last layer, so the section is white rather * than transparent for the moment before the file arrives — and if it never does. */ .hero-bg { position: absolute; inset: 0; z-index: -1; background: url('../images/hero-gradient.webp') center top / 100% 100% no-repeat, var(--wash-base); } /* Above the wash, which sits at z-index -1 inside .hero's stacking context. */ .hero-container { position: relative; } /* * The copy column. Everything inside is left-aligned and stacked; the gap is the * rhythm, so it lives on this one rule rather than on each child. */ .hero-copy { display: flex; flex-direction: column; align-items: flex-start; gap: 32px; } /* * The eyebrow and the headline are set closer to each other than the copy * column's own rhythm, so they are wrapped and given their own gap. Without the * wrapper the flex gap above applies between every pair, and the eyebrow drifts * away from the heading it introduces. */ .hero-content { display: flex; flex-direction: column; align-items: flex-start; gap: var(--gap-eyebrow-title); } /* ── Eyebrow ─────────────────────────────────────────────────────────────── */ .hero-eyebrow { margin: 0px; display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; font-family: var(--font-ui); font-size: var(--fs-eyebrow); font-weight: var(--fw-medium); line-height: var(--lh-eyebrow); text-transform: capitalize; color: var(--text); } /* The separators are drawn, not typed — a literal bullet character in the markup is read aloud as "bullet" between every phrase. Drawn ones are invisible to assistive tech, and the first item correctly has none. */ .hero-eyebrow span+span::before { content: ""; display: inline-block; width: 4px; height: 4px; margin-right: 14px; border-radius: 50%; background: currentColor; vertical-align: middle; } /* ── Headline ────────────────────────────────────────────────────────────── */ /* * The fade is a gradient clipped to the glyphs, not two colours of text. That is * what the comp specifies, and it is also why the effect reads the way it does: * the gradient is laid across the whole heading box, so each line picks up * whatever part of it sits at that line's horizontal position. Both lines end * lighter than they start without a single word being marked up. * * -webkit-text-fill-color is what actually makes the glyphs transparent so the * background shows through; `color` alone would paint over it. The colour * declaration below it is not redundant — it is what any engine without * background-clip support falls back to, and what a copied selection inherits. */ .hero-title { margin: 0; max-width: var(--title-measure); font-size: var(--fs-h1); line-height: var(--lh-h1); font-weight: var(--fw-h1); color: var(--text); background: var(--title-gradient); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; } /* ── Lede ────────────────────────────────────────────────────────────────── */ .hero-lede { margin: 8px 0px; max-width: var(--lede-measure); font-size: var(--fs-lede); line-height: var(--lh-lede); font-weight: var(--fw-regular); color: var(--text-muted); } /* * Larger and bolder than the paragraph under it, but the same grey — the comp * does not darken it. The weight and the two extra points are what carry the * emphasis, so this is not the place to "fix" the colour to black. */ .hero-lede-strong { font-size: var(--fs-lede-strong); font-weight: var(--fw-bold); color: var(--text-muted); } /* ── Actions ─────────────────────────────────────────────────────────────── */ .hero-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 22px; } /* Superseded — this CTA is the header .button component now. Kept as the record of what it used to carry. */ /* .btn-hero-primary, /* Superseded — this CTA is the header .button component now. Kept as the record of what it used to carry. */ /* .btn-hero-ghost { display: inline-flex; align-items: center; justify-content: center; gap: 10px; font-size: var(--fs-btn); text-decoration: none; white-space: nowrap; transition: background-color .18s ease, color .18s ease; } */ */ /* * Figma reports height 40 and padding 16 together, which cannot both hold: 16 * top and bottom inside a 40px box leaves 8px for a 16px line. The 40 is the * pill's real height and the 16 is its horizontal inset, so that is how it is * written here. min-height rather than height so a wrapped label grows the * button instead of spilling out of it. */ /* Superseded — this CTA is the header .button component now. Kept as the record of what it used to carry. */ /* .btn-hero-primary { min-height: var(--btn-h); padding: 0 var(--btn-pad-x); border-radius: var(--btn-radius); background: var(--green); color: var(--white); font-family: var(--font-ui); font-weight: var(--fw-medium); } */ /* Superseded — this CTA is the header .button component now. Kept as the record of what it used to carry. */ /* .btn-hero-primary:hover { background: var(--green-hover); } */ /* The secondary action is a text link on purpose — two filled buttons compete for the same attention, and the design gives this one no weight of its own. */ /* Superseded — this CTA is the header .button component now. Kept as the record of what it used to carry. */ /* .btn-hero-ghost { min-height: var(--btn-h); padding: 0; color: var(--text); font-family: var(--font-accent); font-weight: var(--fw-semibold); line-height: normal; } */ /* Superseded — this CTA is the header .button component now. Kept as the record of what it used to carry. */ /* .btn-hero-ghost:hover { color: var(--green); } */ /* Superseded — this CTA is the header .button component now. Kept as the record of what it used to carry. */ /* .btn-icon { display: inline-flex; transition: transform .18s ease; } */ /* Superseded — this CTA is the header .button component now. Kept as the record of what it used to carry. */ /* .btn-hero-ghost:hover .btn-icon { transform: translateX(3px); } */ /* ── Micro line ──────────────────────────────────────────────────────────── */ .hero-micro { display: inline-flex; align-items: center; gap: 8px; margin: 0; font-family: var(--font-accent); font-size: var(--fs-micro); font-weight: var(--fw-regular); line-height: 1.5; text-transform: capitalize; color: var(--text-micro); } .hero-micro-star { display: inline-flex; color: var(--gold); } /* ── Trust row ───────────────────────────────────────────────────────────── */ /* * Centred while everything above it is left-aligned — that is what the design * does, and it reads as a band rather than a continuation of the copy. It sits * in its own full-width row for exactly that reason. */ .hero-trust { display: flex; flex-wrap: wrap; justify-content: center; gap: 18px 56px; margin: 0 0 var(--gap-trust-shot); padding: 0; list-style: none; } .hero-trust-item { display: inline-flex; align-items: center; gap: 12px; font-family: var(--font-ui); font-size: var(--fs-trust); font-weight: var(--fw-medium); line-height: var(--lh-trust); text-transform: capitalize; color: var(--text); } .hero-trust-icon { display: inline-flex; flex-shrink: 0; color: var(--green); } /* ── Product shot ────────────────────────────────────────────────────────── */ /* * No radius, no clipping and no shadow here: the export carries its own rounded * frame, and CSS decoration would draw a second, rectangular edge around artwork * whose real edge sits inside it. * * max-width is 1128 rather than the 1110 Figma reports — see --shot-w. */ .hero-shot { width: 100%; margin: 0 auto; /* The shot used to be the narrowest thing on the page at 1128, and .container-aligned existed to pull the other sections in to meet it. That override is commented out — the LeadXForms container is the rail now — so the shot meets the sections instead. It is an SVG, so it loses nothing being drawn wider. */ /* max-width: var(--shot-w); */ } .hero-shot img { width: 100%; height: auto; } /* ═══════════════════════════════════════════════════════════════════════════ STATS ═══════════════════════════════════════════════════════════════════════════ */ .stats { padding-block: var(--section-pad-y); } /* The chart and the copy are set against each other vertically; on a narrow screen the row stacks and this gap becomes the space between them. */ .stats-row { row-gap: 40px; } /* ── The card ────────────────────────────────────────────────────────────── */ /* * The chart is an image, so the frame it used to need — border, radius, padding, * the grid, the legend rules — went with it. What is left is the box the picture * sits in. * * max-width rather than a fixed width: the column is wider than the artwork and * would otherwise stretch a 294px file across it. */ .stat-card { max-width: var(--stat-card-w); margin: 0; } .stat-card img { width: 100%; height: auto; border-radius: var(--stat-card-radius); } /* ── The copy ────────────────────────────────────────────────────────────── */ .stat-copy { display: flex; flex-direction: column; gap: var(--gap-stat-copy); } /* * Stats is the one section whose heading is not centred: it sits in a column * beside the chart, so it reads left like the paragraph under it. * * The heading itself carries no colour any more. It is two pieces of text with * two different treatments — the figure and the sentence — and each says so on * its own element rather than one inheriting from the block. */ .stat-title { text-align: left; } /* * The figure. Its own gradient, clipped to its own glyphs: a single inline box * on one line, so the blue runs from the "4" to the percent sign and finishes * there. */ .stat-figure { font-size: var(--fs-stat-figure); background: var(--stat-figure-gradient); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; } /* * The sentence, in the page's ink gradient — the same token the hero headline * uses, because it is the same treatment. * * box-decoration-break is the load-bearing line. This span breaks across two * lines, and by default a broken inline box has its background painted as one * long unbroken strip and then sliced between the lines — which would hand the * first line the dark half and the second the faded half, leaving "runs on * WordPress" grey when the comp draws it dark. `clone` gives each line its own * full copy of the gradient. */ .stat-title-text { font-size: var(--fs-section-title); background: var(--title-gradient); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; -webkit-box-decoration-break: clone; box-decoration-break: clone; } /* * Both of these read their token now. They did not, and that is why this * section never responded: the rules hardcoded 22 and 30, so --fs-stat-lede and * --fs-stat-lede-strong were dead and their phone steps — 16 and 18 — were * never drawn. Measured before the fix, both ledes were still 22 and 30 on a * 390px screen while .guardian-lede and .cta-lede, which DO read their tokens, * had stepped to 16. That gap is the inconsistency this section was reported * for, and it was four dead tokens, not a missing breakpoint. * * The base values moved to 22 and 30 to match — those are what desktop has been * drawing all along, so reading the token changes nothing above 991. */ .stat-lede { margin: 0; color: #000; font-family: "Product Sans"; font-size: var(--fs-stat-lede); font-style: normal; font-weight: 400; line-height: var(--lh-stat-lede); } .stat-lede-strong { color: #000; font-family: "Product Sans"; font-size: var(--fs-stat-lede-strong); font-style: normal; font-weight: 400; line-height: var(--lh-stat-lede); } /* * Forced colours means someone has asked the OS to override the page's palette, * usually for contrast. A transparent fill over a gradient leaves them with an * invisible headline, so the effect is dropped and the text painted normally. */ @media (forced-colors: active) { .hero-title, .stat-figure, .stat-title-text { background: none; -webkit-text-fill-color: currentColor; } } /* ═══════════════════════════════════════════════════════════════════════════ HOW PROTECTION WORKS ═══════════════════════════════════════════════════════════════════════════ */ .engine { padding-block: var(--section-pad-y); background: url('../images/engine-bg.webp') top center / 100% auto no-repeat, var(--wash-base); } /* ── Scroll track ────────────────────────────────────────────────────────── */ /* * The section is scrolled through rather than past: the track is tall, the card * inside it sticks, and how far the track has travelled decides which layer is * shown. site.js reads the track's position and does the rest. * * Nothing here depends on that script. With JavaScript off the track is simply a * tall box with the card pinned inside it and layer one showing — the copy for * all five layers is still in the HTML. */ .engine-track { position: relative; height: calc(5 * var(--engine-step-h)); } /* No will-change here on purpose. Promoting the sticky element puts the whole card — five blurred SVGs included — into one layer, and then any change inside it repaints all of that. The things that actually animate are promoted individually instead. */ .engine-sticky { position: sticky; top: var(--header-h); display: flex; align-items: center; min-height: calc(100vh - var(--header-h)); } .engine-card { width: 100%; } /* ── Section header ──────────────────────────────────────────────────────── */ .engine-head { display: flex; flex-direction: column; align-items: center; gap: var(--gap-section-head); margin-bottom: 56px; text-align: center; } /* ── The dark card ───────────────────────────────────────────────────────── */ .engine-card { padding: var(--engine-card-pad); background: var(--engine-card-bg); border-radius: var(--engine-card-radius); } .engine-row { row-gap: 48px; } /* The tabs are the last child and belong at the foot of the column, however short the panel above them happens to be. */ .engine-copy { display: flex; flex-direction: column; } /* ── Panels ──────────────────────────────────────────────────────────────── */ /* * All five panels share one grid cell, so the container is always as tall as the * longest of them and a switch changes nothing about the layout. An earlier * version toggled [hidden] — a display change, which is a layout, happening * mid-scroll inside a card that a sticky element takes its height from. * * visibility rather than display does the hiding: it keeps the cell sized and * still removes the panel from the accessibility tree, so a screen reader is * read the open layer and not all five. */ /* * The tabs are inside this block now, and its gap is what sets them off. * * The five panels all claim grid-area 1/1, so the tabs are the only child left * to auto-place and they land in row 2, under whichever panel is showing. One * row-gap then governs the step to them. * * They are here and not inside .engine-panel because there are five of those and * one tablist: putting it in the panel would mean five copies of it, five sets * of the same ids, and a screen reader offered the same five controls over and * over. This is the nearest box that holds all five panels at once. * * 35 is the gap .engine-panel sets between its own children, so the step from * the note down to the tabs is the same step as every one above it. */ .engine-panels { display: grid; /* * minmax(0, 1fr), and it is not decoration. * * With no columns declared, the single implicit track is sized auto — and an * auto track's MINIMUM is min-content, which a grid refuses to go below even * when its own parent is narrower. So any child with a wide min-content pushes * this box out past .engine-copy and the copy runs outside the column. * * The 0 floor lets the track take the width it is given and hands the wrapping * back to the content, which is what every child in here does anyway: the * paragraph wraps, both lists wrap, the tags wrap. Nothing is made narrower * than it should be; it is only allowed to be as narrow as it has to. * * The same trap the note on .engine-tags describes — a nowrap row's * min-content is all of its children side by side — one level up. */ grid-template-columns: minmax(0, 1fr); /* The step from the panel down to the tabs, which is what this gap is. */ gap: var(--gap-engine-tabs); } .engine-panel { grid-area: 1 / 1; display: flex; flex-direction: column; align-items: flex-start; gap: var(--gap-engine-panel); opacity: 0; visibility: hidden; transition: opacity .3s ease, visibility 0s linear .3s; } .engine-panel.is-active { opacity: 1; visibility: visible; transition: opacity .3s ease, visibility 0s; } .engine-step { margin: 0; font-family: var(--font-ui); font-size: var(--fs-engine-step); font-weight: var(--fw-medium); letter-spacing: .1em; text-transform: uppercase; color: var(--engine-ink-faint); } .engine-title { margin: 0; font-size: var(--fs-engine-title); font-weight: var(--fw-regular); line-height: 1.1; color: var(--engine-ink); } .engine-desc { margin: 0; color: #FFF; font-family: "Product Sans"; /* * max-width, not width. 600 was a flat width, and a width is a width at every * screen size — on a 390px phone the paragraph stayed 600 and ran out of the * card, which is the copy that was cut off down the right-hand edge. Same * fault .cta-card's note records, and the same fix: 600 is still the number, * it is a ceiling now instead of a floor. */ max-width: 600px; /* Through the token, so the size can step with the screen. Hardcoded at 22 it stayed 22 on a phone while the heading beside it came down to 30, and the list under it did the same — which is why the bullets read LARGER than this paragraph at that width. */ font-size: var(--fs-engine-desc); font-style: normal; font-weight: 400; line-height: normal; } /* ── Tags ────────────────────────────────────────────────────────────────── */ .engine-tags { list-style: none; margin: 0; text-transform: uppercase; display: flex; color: var(--Black, #151515); font-family: "Product Sans"; font-size: 18px; font-style: normal; font-weight: 400; line-height: 150%; flex-wrap: wrap; min-height: 40px; padding: 6px 0; align-items: center; gap: var(--engine-tags-gap); border-radius: 10px; } /* Pale fills with dark text: on this card they are the only light shapes, so they read as labels rather than as buttons someone can press. */ .engine-tag { padding: var(--engine-tag-pad-y) var(--engine-tag-pad-x); border-radius: 8px; color: var(--Black, #151515); font-family: "Product Sans"; font-size: var(--fs-engine-tag); font-style: normal; font-weight: 400; line-height: 150%; } .engine-tag--block { background: var(--engine-tag-block); } .engine-tag--filter { background: var(--engine-tag-filter); } .engine-tag--harden { background: var(--engine-tag-harden); } /* ── What it catches ─────────────────────────────────────────────────────── */ .engine-list { margin: 0; padding-left: var(--engine-list-indent); /* Through the token — see the note on .engine-desc. */ font-size: var(--fs-engine-list); line-height: 1.7; color: #FFF; } .engine-list li::marker { color: #FFF; } /* ── The base-plate note ─────────────────────────────────────────────────── */ /* A rule down the left rather than a box: it marks the passage as an aside without building a second card inside the card. */ .engine-note { padding-left: var(--engine-note-indent); border-left: 2px solid rgba(255, 255, 255, .18); } .engine-note-title { margin: 0 0 6px; font-size: var(--fs-engine-note-title); color: #FFF; } .engine-note-body { margin: 0; font-size: var(--fs-engine-note-body); line-height: 1.5; color: #FFF; } /* ── Tabs ────────────────────────────────────────────────────────────────── */ .engine-tabs { display: flex; flex-wrap: wrap; gap: 10px; } .engine-tab { padding: var(--engine-tab-pad); border: 1px solid rgba(255, 255, 255, .22); border-radius: 8px; background: transparent; font-family: var(--font-ui); font-size: var(--fs-engine-tab); font-weight: var(--fw-medium); color: var(--engine-ink); cursor: pointer; transition: background-color .18s ease, border-color .18s ease; } /* Same reasoning as the segmented hover below: this and .is-active have equal specificity and this comes first, so the border is safe — but on touch a stuck :hover would still light up the tab beside the one you picked. Pointer only. */ @media (hover: hover) { .engine-tab:hover:not(.is-active) { border-color: rgba(255, 255, 255, .45); } } .engine-tab.is-active { background: var(--engine-accent); border-color: var(--engine-accent); } /* ── Diagram ─────────────────────────────────────────────────────────────── */ .engine-visual { display: flex; align-items: center; justify-content: center; } /* * The five diagrams are stacked in one box. aspect-ratio gives that box its * height without any of the images being in flow — they are all absolute, so * nothing would size it otherwise, and a box that resized per layer would make * the card jump on every change. */ .engine-diagrams { position: relative; width: 100%; max-width: 525px; aspect-ratio: 525 / 652; } /* * will-change promotes each diagram to its own compositor layer. Without it they * all live in the sticky element's single layer, so fading one in forces that * whole layer to repaint — and repainting it means re-running the Gaussian blur * inside every one of the five SVGs, on a scroll frame. * * Five permanent layers is a real memory cost and normally worth avoiding. Here * it is the right trade: these five elements are the only thing on the page that * animates during a scroll, and they are the expensive thing. */ .engine-diagram { will-change: opacity; position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; visibility: hidden; transition: opacity .35s ease, visibility 0s linear .35s; } .engine-diagram.is-active { opacity: 1; visibility: visible; transition: opacity .35s ease, visibility 0s; } /* ═══════════════════════════════════════════════════════════════════════════ FEATURE DEEP-DIVES ═══════════════════════════════════════════════════════════════════════════ */ /* * Three washes down the section, the designer's own files — a blue, a lavender * and a warm pink, each one large soft circle. About 0.5 KB apiece over the wire. * * Positioned by keyword rather than by pixel offset. Their combined natural * height is over 4,300px while the section's real height depends on the copy and * the viewport, so stacking them at fixed offsets would be right at exactly one * window size. top / center / bottom spreads them down whatever the section * turns out to be. */ .deep { position: relative; isolation: isolate; padding-block: var(--section-pad-y); background: var(--wash-base); /* * The washes are wider than a narrow viewport and sit half outside the section * at top and bottom. Without this they would push the page sideways and * lengthen it. Cropping them is what Figma does at a narrower frame too. * * clip, not hidden — the same distinction that broke position:sticky on * .page-wrap. hidden makes this element a SCROLL CONTAINER, and a scroll * container is what animation-timeline: view() measures an element's progress * against. This one never scrolls, so the rows' reveal sat frozen at its end * state: measured at six scroll positions through the section, every half read * opacity 1 and 0px of travel, at every one of them. * * clip crops identically and creates no scroll container, so view() resolves * against the page as it should. */ overflow: clip; } /* ── The washes ────────────────────────────────────────── */ /* * THE BLUR IS ALREADY IN THE FILE. Do not add filter: blur() to these. * * Each one is the Figma layer exported whole: a 507-radius circle (1014 across, * which is the width Figma reports), filled with a white-to-#DDE9FF gradient at * 50% opacity, through a Gaussian blur of stdDeviation 200. That is the same * thing the CSS panel describes — so the CSS panel's border-radius, background, * filter, width and height all have a counterpart inside the file and none of * them belongs out here. Adding filter: blur(200px) on top would blur an * already-blurred picture. * * THESE ARE .webp, AND THAT IS THE POINT. They were .svg, and the SVG carried * the blur as a live rather than as pixels. "Exported from * Figma" is not the same as "rasterised": the filter is re-executed every time * the browser rasters a tile of the image, and these are 1440px wide and up to * 1814 tall. Scrolling brings new tiles in constantly, so the page spent 22.5 * SECONDS in RasterTask over one pass down it — against 37ms of JavaScript — * and dropped 39% of its frames. Baking them to bitmaps took that to zero. * * So: regenerate from the .svg sources next to them (kept for exactly that), * at 360px wide — the art is a 200-radius blur, it has no detail to lose, and * a bitmap upscales for free where a filter re-runs. Measured against the SVGs * the swap moves no pixel by more than 8/255. What you must not do is point * these back at the .svg files. * * What stays a CSS decision is only where each one sits, which is why they are * three elements rather than three background layers on one rule: a layer list * puts each wash's position and size in a different part of the same shorthand, * and nudging one means counting commas. */ .deep-blurs { position: absolute; inset: 0; z-index: -1; pointer-events: none; } /* * Centred on the section and held at the width of the comp rather than * stretched to the viewport: these are soft-edged and already transparent well * before their bounding box ends, so a wider screen shows no seam at the sides * — while stretching would make the glow grow with the window and stop * matching the 1280 of content it sits behind. * * max-width:none because the global img rule caps images at 100%, which here * would shrink the wash on any viewport under 1440. */ .deep-blur { position: absolute; left: 50%; transform: translateX(-50%); width: var(--deep-blur-w); max-width: none; height: auto; } /* * Where each one sits, and each is anchored to the edge its own file is cut * against — which is the part worth knowing before moving any of them. * * All three hold the same 507-radius circle, but their canvases differ, and the * difference is where Figma cropped them: * * 1 1440×1464, circle at y 557. Filter box starts at -350, so 350px of glow * is cut off the top. Its top edge is the * section's top edge. * 2 1440×1814, circle at y 907. Nothing cropped — 1814 is exactly the blur's * full extent, and 907 is dead centre of it. * 3 1440×1026, circle at y 907. Cut off at the bottom. Its bottom edge is * the section's bottom edge. * * So 1 pins to the top, 3 pins to the bottom, and 2 — the only uncropped one — * centres. That lands its glow on the 03/04 rule, which is where the comp puts * it, and keeps it there however much the copy reflows. */ .deep-blur--1 { top: var(--deep-blur-1-top); } /* The only one that needs its own transform: translateX alone would leave it hanging from its top edge at the halfway mark rather than straddling it. */ .deep-blur--2 { top: var(--deep-blur-2-top); transform: translate(-50%, -50%); } .deep-blur--3 { bottom: var(--deep-blur-3-bottom); } .deep-head { display: flex; flex-direction: column; align-items: center; gap: var(--gap-section-head); text-align: center; margin-bottom: 56px; } /* The lede carries the gap down to the grid now that it has left the head — see .deep-head-row for why it was moved out of the sticky block. */ .deep-lede-row { text-align: center; } .deep-lede { margin: 0; color: #000; text-align: center; font-family: "Product Sans"; /* Token, not a literal — see the note on .stat-lede. --fs-deep-lede was dead for the same reason and never stepped on a phone. */ font-size: var(--fs-deep-lede); font-style: normal; font-weight: 400; line-height: var(--lh-lede); } /* ── The ruled grid ──────────────────────────────────────────────────────── */ /* * The rules are borders on the rows, not a background or an image. One pixel of * grey is the kind of thing that survives a border and goes soft in a bitmap, * and it has to land on the same pixel as the diamonds sitting on top of it. * * Position is relative so the closing diamond can be hung off the bottom edge — * every other diamond belongs to the row beneath it. */ /* * The grid is a closed box, not just a set of internal rules: the comp draws an * outer edge all the way round it, which is what makes the last row read as a * complete rectangle rather than a row with two of its sides missing. * * Three sides here rather than four. The bottom is already drawn by row 06's * own cells — every cell paints its bottom edge — and adding it here as well * would stack two lines on the same pixel and leave the closing rule heavier * than the five above it. * * Real borders rather than the pseudo-element the top line used to use, so the * corners meet: a pseudo positioned left:0 right:0 sits inside the border box * and stops a pixel short at each end. */ /* * No rules of its own, and that is deliberate. * * Every row draws its own top, and the last one draws the closing line as well * — both from .deep-row::after, which sits above the cells and so cannot be * painted over by the artwork half's white. A background here would be under * them, which is exactly how the closing line went missing over the picture. * * No sides either. All four was what made the six rows read as a bordered * component sitting on the page rather than as a ruled list running through it; * rows 04 and 06 close their outer edge on their own and say so further down. */ .deep-grid { position: relative; } /* * AN OUTER FRAME, STACKED ONLY — top, left and right. * * On the desktop grid the section needs none: the centre line, the row rules * and the markers give it all the structure it has, and a box around it made * the six rows read as a bordered component sitting on the page. Stacked there * is no centre line and no marker, so the entries have a rule above and below * and nothing holding their ends — which reads as a list that has lost its * margins rather than as a section. * * No bottom: row 06's own closing rule is already there, and a border here * would paint that same edge a second time. * * 991.98 and not 991, because 991.98 is where the columns actually stack. At a * flat 991 there is a pixel of width where the frame is drawn around a layout * that is still two columns. */ @media (max-width: 991.98px) { .deep-grid { border-top: 1px solid var(--deep-rule); border-inline: 1px solid var(--deep-rule); } } /* * A Bootstrap .row of two .col-lg-6, matching how every other section on this * page is built rather than being the one place with a hand-rolled grid. * * g-0 in the markup zeroes the gutter. The default 24 would put 12px of air * either side of the rule down the middle, and that rule is the point of the * whole layout — the two halves have to meet on it. * * Which half goes first is stated per row in the markup with order-lg-*, not * worked out here by counting. Rows get reordered and inserted; a selector * that counts them silently mirrors the wrong ones when that happens. */ .deep-row { position: relative; } /* * THE TWO SURFACES LIVE ON THE ROW, NOT ON THE CELLS THAT MOVE. * * The reveal animates .deep-copy and .deep-shot themselves — opacity 0 to 1 and * a 34px translate with a .97 scale. The artwork's opaque white was on * .deep-shot, so for the whole of that range it was neither opaque nor still: * part-faded, the wash below showed straight through the artwork; part- * travelled, the white slid off its own half and opened a strip of wash at one * edge. That is the wash appearing to move with the row. * * .deep-row carries no animation and no transform, so a surface painted here * cannot fade and cannot travel. The artwork half gets --wash-base, the same * white .deep and .deep-shot already use; the copy half is left transparent, so * .deep-blurs goes on showing through it exactly as before. Nothing about the * wash itself changes — only which element is responsible for covering it. * * .deep-shot keeps its own white. It now slides over an identical white instead * of over the wash, so the motion is invisible rather than wrong. * * The hard stop is at 50%, which is the col-lg-6 boundary — and the 1px centre * divider is drawn on that exact line by .deep-row::after, so any half-pixel * seam at a fractional container width is underneath it. * * Painting order is what makes this work and none of it is new: .deep-blurs is * at z-index -1 inside .deep's stacking context, this background is a * position:relative descendant above it, .deep-row::after is the row's last * child so the divider still paints over both cells, and the stars hold * z-index 1 above everything. * * From lg only. Stacked there are no halves to split. */ @media (min-width: 992px) { /* * White under the picture, clear under the copy. * * The white is what keeps .deep-blurs off the artwork — that layer sits at * z-index:-1 inside .deep's stacking context, above the section's background * and below every cell, so anything that does not paint over it lets it * through. The copy's half is left clear on purpose: the same blurs are the * wash behind the copy, and they should reach it. * * On the row and not on the cells, because .deep-copy and .deep-shot are what * the reveal animates — a surface there fades in and slides 34px, and the * background visibly travels with the row. */ .deep-row { background: linear-gradient(to right, transparent 50%, var(--wash-base) 50%); } /* Rows 02, 04 and 06 put the picture on the left, so the white goes with it. */ .deep-row--mirror { background: linear-gradient(to left, transparent 50%, var(--wash-base) 50%); } /* * ROWS 04 AND 06 CLOSE ON THEIR OUTER EDGE. No other row does. * * The comp encloses the copy on these two: the boundary above it, the * boundary below it and the centre line already draw three of the four sides, * and this is the fourth. Their copy sits on the right, so the fourth side is * the section's right-hand edge. * * Drawn as a background layer on top of the wash the row already carries, not * as a border-right. A border is laid out: it would take a pixel off the * row's content box and move its 50% — and with it the centre line — half a * pixel out of step with the other four rows. This paints in the same place * and costs the layout nothing. * * It is under both cells, which is where it has to be to read as an edge * rather than a line over the copy. .deep-copy paints no background of its * own, so it shows through. */ .deep-row--4, .deep-row--6 { background: linear-gradient(var(--deep-rule), var(--deep-rule)) right / 1px 100% no-repeat, linear-gradient(to left, transparent 50%, var(--wash-base) 50%); } } /* * The mark where the rules cross — a four-pointed star, not the rotated square * this used to draw. The shape has concave sides and no CSS primitive makes * that, so it comes from the comp as an SVG. * * Inlined as a data URI rather than a seventh request for 850 bytes, and used * as a mask rather than a background image: a mask takes only the shape and * lets background-color supply the colour, so the star reads from --deep-rule * like every line it sits on. As an image its #E5E5E5 would be baked into the * URI and would quietly stop matching the moment that token changed. * * It sits on the crossing rather than punching a hole in it: the rules are at * their strongest here and fade away from this point, so the star reads as * where they come from. */ .deep-row::before, .deep-grid::after { content: ""; position: absolute; left: 50%; /* Above both rules — the centre line and the row boundary are both at 1 — so the marker stays the thing you see at a crossing rather than the pixel where two lines meet. */ z-index: 2; width: var(--deep-star); height: var(--deep-star); pointer-events: none; background-color: var(--deep-rule); -webkit-mask: var(--deep-star-shape) center / contain no-repeat; mask: var(--deep-star-shape) center / contain no-repeat; } /* One on the top edge of every row … */ .deep-row::before { top: 0; transform: translate(-50%, -50%); } /* … and one on the bottom edge of the grid, which has no row below it to carry that one. */ .deep-grid::after { bottom: 0; transform: translate(-50%, 50%); } /* ── Cells ───────────────────────────────────────────────────────────────── */ /* * The rules are drawn on pseudo-elements rather than set as borders. * * Not for how they look — a 1px solid border would look the same — but for what * happens around them. The cells swap sides every other row, so a border would * have to be declared on a different side per row and cleared on the old one; * and two stacked rows drawing a full border each would paint the edge they * share twice, leaving one line heavier than the others until a negative margin * pulls them back together. * * A pseudo-element sidesteps both: it moves with the cell it belongs to, and * only ever draws the bottom edge, so nothing is ever painted twice. */ .deep-copy, .deep-shot { position: relative; padding: var(--deep-cell-pad); } /* * The horizontal rule: the cell's bottom edge, the same weight from end to end. * Each cell draws its own half and the two meet under the star. * * Only the bottom edge, never the top, so two stacked rows cannot paint the * same pixel twice and leave one line heavier than the rest. The line above * row 01 is added back below, on the wrapper. */ .deep-copy::after, .deep-shot::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; pointer-events: none; background: var(--deep-rule); } @media (min-width: 992px) { /* * THE CENTRE LINE — ONE ELEMENT, THE FULL HEIGHT OF THE GRID. * * It was six, one per row. They abutted and read as continuous, but they were * six chances to disagree, and the reason they were never the cells' inner * edges still holds: those are two different boxes, and at a fractional * column width they round off in opposite directions — one row gets a crisp * pixel, the next gets it spread over two at half strength, and the pattern * follows the mirroring. * * One line also puts it where the comp has it: unbroken from the rule above * row 01 to the one under row 06, with a marker at each crossing. * * z-index 1, and not more. The rows paint an opaque white half that begins at * exactly this offset, so left at auto the line would be underneath it. 1 is * the layer the markers already use, and they come after this in tree order, * so they still sit on top of it. */ .deep-grid::before { content: ""; position: absolute; top: 0; bottom: 0; left: 50%; z-index: 1; width: 1px; pointer-events: none; background: var(--deep-rule); } /* Each cell drew half the row's boundary; .deep-row draws the whole of it. */ .deep-copy::after, .deep-shot::after { content: none; } } /* * min-height, not height, and the distinction is the whole rule. * * Figma reports 500 because that is what the cell measured in the comp. In * the browser the row is as tall as its tallest half, and that is almost * always the picture: the six exports are 539 wide by 377-481 tall, and once * scaled into a 560px column with 40 of padding either side, five of the six * rows land between 538 and 580. Pinning the copy cell to a flat 500 would * leave it short of its own row in those five — the wash stopping 40px above * the rule underneath it, with the copy centred in a box that is not the one * you can see. * * As a floor it does the job Figma's number is actually for: row 05 has the * shortest picture of the six and would otherwise sit noticeably shallower * than the rest. Everything above it stretches to its row, because a grid * item does that by default and min-height does not take it away. */ .deep-copy { display: flex; flex-direction: column; justify-content: center; align-items: flex-start; gap: var(--gap-deep-copy); min-height: var(--deep-cell-min-h); } /* /* * THE ROW'S OWN BOUNDARY — one line, across both columns, on an element that * does not move. * * It was two halves, drawn by .deep-copy::after and .deep-shot::after. Those * two cells are what the reveal animates, and they do not arrive together: the * copy runs from entry 5% and the picture from entry 12%, and they travel 34px * in OPPOSITE directions on the way in. So through the whole reveal the line * existed on the copy's half and not yet on the picture's — a rule that looked * like it stopped at the middle of the row. * * .deep-row carries no animation and no transform, so this cannot fade out of * step with itself or slide. * * Absolute rather than border-bottom, which is the other way to put a line on * the row: a border is laid out, so it would add a pixel to every row and six * to the section, and it would leave the centre line a pixel short at every * crossing. This costs nothing and crosses cleanly. * * Painted as the row's last child, so it sits over both cells — including the * artwork cell's opaque white — rather than under them. */ .deep-row::after { content: ""; position: absolute; /* * Stretched to the whole row, because it draws TWO rules, not one: the copy * block is ruled above AND below, and both of them land on the copy's own * half. * * That is what makes the boundary between two rows whole. The copy swaps * sides every row, so at any boundary the row above rules one half and the * row below rules the other — row 01's copy closes the left of the 01/02 * line, and row 02's copy opens the right of it. Neither half is ever drawn * twice, and the picture above feature-02 gets the rule it was missing while * only row 01 had a bottom. * * The box is transparent apart from its two 1px layers, and pointer-events * are off, so covering the row costs nothing. */ inset: 0; /* * z-index, and it is not decoration — .deep-row is a flex container, and a * flex container paints its children in ORDER-MODIFIED document order. The * mirrored rows carry order-lg-1 and order-lg-2 on their two cells; this * pseudo has no order, so it counts as 0 and was painted BEFORE both of them. * .deep-copy has no background of its own, so the line showed through on the * copy's half — and .deep-shot's opaque white covered it on the picture's. * That is why 02, 04 and 06 had half a line and 01, 03 and 05 had all of it. * * 1 lifts it clear of both cells whatever their order. The markers sit at 2, * so the crossings still read the same way round. */ z-index: 1; pointer-events: none; /* * The same treatment the rule above row 01 has: it covers the COPY's half * only, solid against the middle and dissolving as it reaches the section's * outer edge. The picture's half of the line is open. * * It covers the COPY's half and stops at the middle. The picture's half of * this edge is open, which is the whole of why feature-01.svg has no rule * above it and none beside it — the artwork simply ends at the section's * measure. * * Rows 01, 03 and 05 keep their copy on the left, so both rules do too. */ background: var(--deep-rule-fade-l) top left / 100% 1px no-repeat, var(--deep-rule-fade-l) bottom left / 100% 1px no-repeat; } /* 02, 04 and 06 keep theirs on the right. Same shape, turned around. */ .deep-row--mirror::after { background: var(--deep-rule-fade-r) top left / 100% 1px no-repeat, var(--deep-rule-fade-r) bottom left / 100% 1px no-repeat; } /* * 04 AND 06 OWN THEIR WHOLE BOUNDARY — both halves of it, and solid. * * These two are closed on their outer side, so their rules run the full width * rather than stopping at the middle — the artwork gets the same line the copy * does. Each end is then finished the way that end deserves: square into the * right-hand edge, dissolving at the open left. * * Their neighbours stand down accordingly, just below — the boundary each of * these draws is a boundary somebody else used to draw half of, and one line * painted twice is a heavier line. */ .deep-row--4::after, .deep-row--6::after { background: var(--deep-rule-closed-r) top left / 100% 1px no-repeat, var(--deep-rule-closed-r) bottom left / 100% 1px no-repeat; } /* 03 keeps its top and gives up its bottom: 04 draws the 03/04 line now. */ .deep-row--3::after { background: var(--deep-rule-fade-l) top left / 100% 1px no-repeat; } /* 05 sits between the two of them and draws neither edge. */ .deep-row--5::after { background: none; } /* * A pale wash, and it can be transparent again now. * * This cell held a flat --wash-base because it had to be the thing covering * .deep-blurs: that layer sits at z-index:-1 inside .deep's stacking context, so * it paints above the section's background and below every positioned cell, and * a half-transparent picture cell let it through under the artwork. * * No background at all, and that is deliberate. * * The artwork sits on clean white and nothing else. The white comes from * .deep-row, which paints it under this half — not from here, because the reveal * animates THIS element: opacity 0 to 1 and a 34px translate, so any surface on * it fades in and slides, and the background visibly travels with the row. */ .deep-shot { display: flex; align-items: center; justify-content: center; } /* * THREE KNOBS FOR THE ARTWORK, so a row that sits wrong against the comp is * three numbers in one place rather than a new selector. * * All six exports share the same box: 539 wide, and the painted card inside it * sits at L28 T16 R36 B48 every time — the heights differ (377-481) but only * because the card is taller, never because the padding moved. So a row that * looks off is almost never that row's asset; check the global default first * and only reach for these when one row genuinely differs. * * --shot-w drawn width. 100% fills the cell between its padding. * --shot-x nudge right, negative for left. * --shot-y nudge down, negative for up. * * The nudges are translate, not margin: they move the picture without changing * the cell's height, so a tweak here can never shift the rule underneath the * row or re-centre the copy across from it. * * To dial one in: open the row in DevTools, put these on .deep-row--N, and * arrow the numbers until it sits right. Then paste the same lines into that * row's block under "Per-row hooks" — the empty blocks are already there. */ .deep-shot img { width: var(--shot-w, 100%); height: auto; translate: var(--shot-x, 0) var(--shot-y, 0); } /* * The mirrored rows — 02, 04 and 06. The copy stays first in the source on * every row, so the heading is still read before the picture it names; only * the painting order changes, and only from lg up. */ /* ── Per-row hooks ─────────────────────────────────────────── */ /* * Every row carries its own class — .deep-row--1 through .deep-row--6 — so a * single row can be given a border or a background of its own without a * selector that counts positions and without touching the other five. * * Two ways to use them, and the first is usually the one you want: * * 1. Override a token on the row. The cells inside already read these, so one * line changes the whole row and keeps it consistent: * * .deep-row--3 { * --deep-line: #D8D8D8; * --deep-rule: #D8D8D8; * } * * 2. Write the property straight onto a cell, when a row needs something the * tokens do not cover: * * .deep-row--4 .deep-shot { background: #FAFBFF; } * * The blur washes behind the section are untouched by either — they sit on * .deep itself, below all of this, and go on showing through wherever a cell * background is transparent or absent. */ /* 01 — Web Application Firewall */ .deep-row--1 { /* per-row overrides go here */ } /* 02 — Malware Scanner (mirrored) */ .deep-row--2 { /* per-row overrides go here */ } /* 03 — Login Protection & 2FA */ .deep-row--3 { /* per-row overrides go here */ } /* 04 — Auto-Quarantine (mirrored) */ .deep-row--4 { /* per-row overrides go here */ } /* 05 — Threat Scoring */ .deep-row--5 { /* per-row overrides go here */ } /* 06 — Hardening Rules (mirrored) */ .deep-row--6 { /* per-row overrides go here */ } /* ── Copy ────────────────────────────────────────────────────────────────── */ /* * A FLEX ROW OF TWO PARTS, not one line of mixed spans. * * The number and the name are separate now - .deep-num and .deep-text - and the * heading is the row that holds them. The 12px gap replaces the margin the * number used to carry, so the space between them is the layout's rather than * the number's. * * align-items: flex-start so a name that wraps to two lines keeps its first line * level with the number, instead of the number drifting to the middle of the * block beside it. * * The type stays HERE rather than on .deep-text, and that is deliberate: both * children have to be 38px, and stating it once on the parent they both inherit * from is one number instead of two that have to be kept equal. */ .deep-title { display: flex; align-items: flex-start; gap: 12px; /* The cell's flex gap sets the space under this now. */ margin: 0; font-family: "Product Sans"; /* * Through the token, not as a literal. * * 38px was pasted straight from Figma and --fs-deep-title was sitting three * hundred lines above it, stepping down to 22px below lg — wired to nothing. * So this heading stayed 38px at every width, and on a phone that made a ROW * heading larger than the SECTION heading above it (30px), which is what it * looked like: "01. Web Application Firewall" shouting over "22 features. * Here's exactly what six of them do." * * The base is 38 so every width the comp was drawn at is untouched. */ font-size: var(--fs-deep-title); font-style: normal; font-weight: 400; line-height: 110%; } /* * BOTH PARTS CARRY THE SAME GRADIENT, and each one runs it across its own width * rather than sharing one across the line. * * So the number goes dark to green over its own few characters, and the name * does the same over however wide it is. That is what two elements with the same * background-clip give you, and it is what the comp draws: two pieces of one * idea, each resolving to the brand green at its end. * * -webkit-background-clip is not a legacy duplicate. Safari and every Chromium * build still need the prefixed property for text clipping; the unprefixed one * is what newer engines read. Both, in that order. * * .deep-accent IS GONE with this, and its markup with it. It painted the last * word green by hand, which the gradient's own end now does - and left in place * it would have made that word INVISIBLE: -webkit-text-fill-color is inherited, * so the span would have gone transparent while having no background of its own * to show through. */ .deep-num, .deep-text { background: linear-gradient(90deg, #151515 21.54%, #008744 100%); background-clip: text; -webkit-background-clip: text; -webkit-text-fill-color: transparent; } /* * Windows High Contrast throws the author's colours away but keeps * -webkit-text-fill-color, so clipped text renders as nothing at all. The * gradient goes and the fill comes back to whatever the system chose - the same * escape hatch .hero-title, .diff-title, .plans-title and .faq-title carry. */ @media (forced-colors: active) { .deep-num, .deep-text { background: none; -webkit-text-fill-color: currentColor; } } /* ── What / How / Why ────────────────────────────────────────────────────── */ .deep-defs { margin: 0; display: flex; width: 472px; flex-direction: column; align-items: flex-start; gap: 12px; } .deep-content { display: flex; padding-bottom: 22px; flex-direction: column; align-items: flex-start; gap: 5px; align-self: stretch; border-bottom: 1px solid var(--deep-line); } /* * The last passage closes the block, so it carries neither the rule nor the * space the rule needs: a border there draws a line with nothing under it, and * the padding would push the copy away from the row's own bottom edge. */ .deep-content:last-child { padding-bottom: 0; border-bottom: 0; } .deep-heading { margin: 0; color: var(--Grey, #646464); font-family: "Product Sans"; font-size: 18px; font-style: normal; text-transform: uppercase; font-weight: 700; line-height: 150%; } .deep-paragraph { margin: 0px; color: var(--Grey, #646464); font-family: "Product Sans"; font-size: 18px; font-style: normal; font-weight: 400; line-height: 150%; } /* ── Closing action ──────────────────────────────────────────────────────── */ .deep-cta { display: flex; justify-content: center; margin-top: 56px; } /* ═══════════════════════════════════════════════════════════════════════════ AI CODE GUARDIAN ═══════════════════════════════════════════════════════════════════════════ */ /* * The section itself is white; the dark is the card inside it. Keeping them * separate is what lets the card have rounded corners and sit inside the page's * margins, which a full-bleed dark band could not do. */ .guardian { padding-block: var(--section-pad-y); } /* * width:1240 in the comp, max-width here. The card is the widest thing in the * section and a fixed width would keep it at 1240 on a 1024 screen, pushing * the page sideways — the container it sits in is fluid below 1400, and the * card has to be too. At full size the cap is what the comp draws, and margin * auto keeps it centred once the container grows past it. */ .guardian-card { display: flex; flex-direction: column; align-items: flex-start; gap: var(--gap-guardian-card); width: 100%; /* * 1240 is Figma's width for this card inside a 1440 frame — i.e. a 100px page * margin, which is Figma's margin for THIS band and nobody else's. Held here * it put the card's edge at x=100 while deep, geo and engine sat at x=72 and * the dashboard below sat at x=120: five bands, five rails, all of them * perfectly centred and none of them agreeing. * * The container is the rail now. The card fills it, so its edge is the same * edge every other section has. */ /* max-width: var(--guardian-card-w); */ margin-inline: auto; padding: var(--guardian-card-pad); border-radius: var(--guardian-card-radius); background: var(--guardian-card-bg); } /* * align-items:flex-start above sizes each child to its own content, which is * right for the head — the headline sets its own measure — and wrong for the * row, which would collapse its two columns to the width of their text. This * is Figma's 'fill container' on that one child. */ .guardian-row { align-self: stretch; } /* ── Head ────────────────────────────────────────────────────────────────── */ /* * The headline sits in its own row now, so its measure can be set in column * classes against the comp rather than only through the token below. * * Same reason .guardian-row needs it: align-items:flex-start on the card sizes * every child to its own content, and a row left at that width collapses its * columns to the width of their text. * * It spans the full 12 by default, which renders exactly as it did before the * row existed — a .row's -12px margin and its column's 12px padding cancel, so * the headline still starts flush with the card's padding edge and flush with * the lede underneath it. * * NOTE: --guardian-title-measure still caps the headline at 730px. Narrowing * the column past 730 takes effect; widening it past 730 does nothing until * that token is raised or dropped. */ .guardian-head-row { align-self: stretch; } .guardian-head { display: flex; flex-direction: column; align-items: flex-start; gap: var(--gap-guardian-head); } .guardian-title { margin: 0; max-width: var(--guardian-title-measure); font-family: var(--font); font-size: var(--fs-guardian-title); font-weight: var(--fw-regular); line-height: var(--lh-guardian-title); color: var(--guardian-ink); } /* ── Copy column ─────────────────────────────────────────────────────────── */ .guardian-copy { display: flex; flex-direction: column; align-items: flex-start; gap: var(--gap-guardian-copy); } /* * Through the token, which until now was dead. * * --fs-guardian-lede is declared 18px at the top of the file and 16px in the * 575 block, and this rule then pasted a literal 20px over both — so the lede * rendered 20px at every width, neither token value was ever read, and this was * the one single-tier section lede on the page that did not match the others. * Same fault .faq-a already carries a note about. * * 18 at desktop is what every other section lede is; 16 on a phone is what the * 575 block was always asking for and never got. */ .guardian-lede { margin: 0; color: #FFF; font-family: "Product Sans"; font-size: 22px; font-style: normal; font-weight: 400; line-height: 150%; } /* ── Claims ──────────────────────────────────────────────────────────────── */ .guardian-claims { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 12px; } /* * The tick is drawn here rather than typed into the markup. A literal ✓ in the * text is announced before every item — "check mark, trained on real WordPress * malware" — which is three words of noise per claim for something that carries * no meaning a list does not already carry. * * Indented with padding and pulled back by the same amount, so a claim that * wraps lines up under its own first word rather than under the tick. */ .guardian-claims li { position: relative; padding-left: 26px; color: #FFF; font-family: "Product Sans"; font-size: 18px; font-style: normal; font-weight: 400; line-height: 145%; } /* * The comp's tick, masked so it takes its colour from --green. * * It was two borders on a rotated box — a serviceable check, but a geometric one * with square ends, and the comp draws a stroke that tapers. No transform now, * so nothing here is rotated into place. * * Centred on the first line rather than nudged with a round em value: the line * box is 1.45em and the artwork is 12px, so half the difference puts it on the * optical middle at any font size this list is ever set in. */ .guardian-claims li::before { content: ""; position: absolute; left: 0; top: calc((1.45em - 12px) / 2); width: 11px; height: 12px; background-color: var(--green); -webkit-mask: var(--guardian-tick) center / contain no-repeat; mask: var(--guardian-tick) center / contain no-repeat; } /* ── Call to action ──────────────────────────────────────────────────────── */ /* Superseded — this CTA is the header .button component now. Kept as the record of what it used to carry. */ /* .guardian-cta { display: inline-flex; align-items: center; gap: 10px; padding: 14px 22px; border-radius: 8px; background: var(--green); color: var(--white); font-family: var(--font-ui); font-size: var(--fs-btn); font-weight: var(--fw-medium); text-decoration: none; white-space: nowrap; transition: background-color .18s ease; } */ /* Superseded — this CTA is the header .button component now. Kept as the record of what it used to carry. */ /* .guardian-cta:hover { background: var(--green-hover); } */ /* Superseded — this CTA is the header .button component now. Kept as the record of what it used to carry. */ /* .guardian-cta:hover .btn-icon { transform: translateX(3px); } */ /* ── Code panel ──────────────────────────────────────────────────────────── */ .guardian-visual { display: flex; justify-content: flex-end; } /* * 450 wide in a 540 column, sitting against the right of it — so its right * edge lines up with the card's padding and the gap opens between it and the * copy rather than at the card's edge. Filling the column would close that gap * and leave the panel reading as a second column of text. */ .guardian-panel { width: 100%; max-width: var(--guardian-panel-w); margin: 0; border: 1px solid var(--guardian-panel-line); border-radius: var(--guardian-panel-radius); background: var(--guardian-panel-bg); overflow: hidden; } /* figcaption, so the file name is the panel's label rather than another line of code that happens to sit above the rest. */ .guardian-panel-bar { display: flex; align-items: center; gap: 10px; padding: 14px 20px; border-bottom: 1px solid var(--guardian-panel-line); background: var(--guardian-bar-bg); font-family: var(--font-ui); font-size: var(--fs-guardian-code); color: var(--guardian-ink-faint); } .guardian-panel-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--guardian-ink-faint); flex-shrink: 0; } /* * Albert Sans, not a monospace stack — the comp draws this panel in the page's * own accent face rather than in code type, so it reads as a picture OF code * rather than as a code block the visitor could edit. * * The face, size and weight are set once here and inherited by every line and * every token inside. Figma repeats them on each .tok-* layer because a design * tool has no inheritance; the browser does, and four copies of the same three * declarations is four places to miss when one of them changes. */ .guardian-panel-body { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; background: #182234; padding: 24px; font-family: var(--font-accent); font-size: var(--fs-guardian-code); font-weight: 300; line-height: normal; color: var(--guardian-ink-soft); } /* * Each line is its own block, and the block is only as wide as its own text — * align-items:flex-start on the body above. * * That is the change the comp asks for. The tinted row used to run the full * width of the panel, which needed the side padding to live on the lines * rather than on the body; now it hugs the line it flags, so the padding sits * on the body where it belongs and the lines carry none. */ .guardian-line { display: block; white-space: pre; overflow-x: auto; } /* * The flagged row gets the padding and the corners the plain lines do not, so * the tint reads as a box drawn around that line rather than as a stripe * behind it. */ .guardian-line--flagged { padding: 6px 10px; border-radius: 8px; background: var(--guardian-flagged-bg); } .tok-fn { color: var(--guardian-tok-fn); } .tok-kw { color: var(--guardian-tok-kw); } .tok-str { color: var(--guardian-tok-str); } .tok-bad { color: var(--guardian-tok-bad); } /* * The flag. Prose, not code — so it is a paragraph in the page's own UI face * rather than the monospace around it, which is also how the product draws it. */ .guardian-flag { display: flex; align-items: center; gap: 8px; /* * No margin. It used to inset itself from panel edges it no longer touches — * the body's 24px does that now, and the flag sizes to its own content like * every line above it. */ margin: 0; padding: 8px 10px; border-radius: 8px; background: var(--guardian-flag-bg); font-family: var(--font-ui); font-size: var(--fs-guardian-code); line-height: 1.4; color: var(--guardian-flag-ink); } .guardian-flag-icon { display: inline-flex; flex-shrink: 0; } /* ═══════════════════════════════════════════════════════════════════════════ PRODUCT IN ACTION ═══════════════════════════════════════════════════════════════════════════ */ .action { position: relative; isolation: isolate; padding-block: var(--section-pad-y); background: var(--wash-base); /* The wash is wider than a narrow viewport and its blur runs past the top of the section. Without this it would push the page sideways and lengthen it. */ overflow: hidden; } /* * THE BLUR IS ALREADY IN THE FILE. Do not add filter: blur() to this, and do * not point it back at the .svg — see the note above .deep-blurs for why the * washes are baked to .webp and how to regenerate them. * * Figma reports this layer as 1200 × 513.749 and the file is 1440 × 951. Both * are right: 1200 × 513.749 is the box the four shapes occupy before they are * blurred, and 1440 × 951 is what they occupy after — three are blurred at * stdDeviation 200 and one at 150, and a Gaussian blur of sigma spreads about * 2 sigma past the shape every way. Figma exports the whole thing, spread * included, because that is what has to be painted. * * So the file is sized at 1440, not at 1200. Forcing it to 1200 would shrink * the colour inside it to about 950 and pull the composition in with it. * * Centred and held at the comps width rather than stretched to the viewport: * it is soft-edged and already transparent well before its box ends, so a wider * screen shows no seam, while stretching would grow the glow with the window * and stop it matching the 1200 dashboard it sits behind. * * max-width:none because the global img rule caps images at 100%, which here * would shrink the wash on any viewport under 1440. */ .action-wash { position: absolute; top: var(--action-wash-top); left: 50%; transform: translateX(-50%); z-index: -1; width: var(--action-wash-w); max-width: none; height: auto; pointer-events: none; } .action-head { display: flex; flex-direction: column; align-items: center; gap: var(--gap-action-head); margin-bottom: 56px; text-align: center; } .action-lede { margin: 0; color: #000; text-align: center; font-family: "Product Sans"; /* Token, not a literal — same dead-token fix as .deep-lede above. */ font-size: var(--fs-action-lede); font-style: normal; font-weight: 400; line-height: var(--lh-lede); } /* ── The dashboard ───────────────────────────────────────────────────────── */ /* * 1200 wide, which is its own measurement — wider than the hero's shot and * narrower than the page container, so it gets a token rather than borrowing * either. Centred, and capped rather than fixed so it comes in with the page * below 1400 instead of pushing it sideways. */ .dash-wrap { width: 100%; /* 1200 was Figma's width in a 1440 frame — a 120px page margin that put this band 48px inside the sections above and below it. Same reason as .guardian-card: the container owns the rail, this fills it. */ /* max-width: var(--dash-w); */ margin-inline: auto; } /* Sits above the card and to its left edge, labelling it the way a legend labels a figure rather than being a heading of its own. */ .dash-label { margin: 0 0 12px; font-family: var(--font); font-size: var(--fs-dash-title); font-weight: var(--fw-bold); color: var(--green); } .dash { border: 1px solid var(--dash-border); border-radius: var(--dash-radius); background: var(--dash-bg); /* The tab strip's tint has to stop at the card's rounded corner rather than square it off. */ overflow: hidden; } /* ── Tabs ────────────────────────────────────────────────────────────────── */ /* * Scrollable rather than wrapping. Five tabs do not fit on a phone, and a tab * strip that wraps to two lines stops reading as a strip — the row of tabs is * the thing that says "these are alternatives to each other". */ .dash-tabs { display: flex; padding: 18px 24px 0 24px; align-items: flex-start; gap: var(--gap-dash-tabs); margin: 0px; align-self: stretch; border-radius: 16px 16px 0 0; border-bottom: 1px solid var(--color-gray-200, #E5E7EB); background: var(--color-gray-50, #F9FAFB); } .dash-tabs::-webkit-scrollbar { display: none; } /* * The underline is a transparent border in the resting state, not no border — * so the open tab does not become 2px taller than the other four and shunt the * strip down when it changes. */ /* * No padding across, only down. In the comp the underline is exactly as wide * as the word above it — 66px under a 64px "Overview" — so the tab box is the * text box, and the space between tabs is the strip's gap rather than padding * inside each one. Padding here would widen every underline by twice it. */ .dash-tab { padding: 0 0 12px; border: 0; border-bottom: 2px solid transparent; background: none; /* * Inter, not the page's own face. This whole block is a picture of the * product's interface, and the comp draws it in the interface's type rather * than in the type the page around it is set in. */ font-family: var(--font-dash); font-size: 15px; line-height: normal; /* Grey and medium at rest; the open tab takes the ink and the weight. */ font-weight: var(--fw-medium); color: var(--color-gray-500, #6B7280); white-space: nowrap; cursor: pointer; transition: color .15s ease; } /* * Every tab is already as wide as its own label IN BOLD, whether or not it is * the open one. * * Without this the strip moves every time someone changes tab: bold text is * wider than medium, so the tab that opens grows and shoves the ones to its * right along — and the underline, which is exactly as wide as the word above * it, slides with them. Five tabs, five different jumps. * * The reservation is a hidden copy of the label at the bold weight. It has no * height, so it costs the strip nothing vertically; it only ever sets a floor * under the width, which the real text then sits inside at whichever weight * the state calls for. * * content: attr(...) / "" — the empty string after the slash is the generated * text's alternative text, which is what keeps a screen reader from announcing * every tab's name twice. A browser too old to understand that syntax drops * the whole declaration and simply gets the old shifting back; nothing breaks. */ .dash-tab::after { content: attr(data-label) / ""; display: block; height: 0; overflow: hidden; font-weight: var(--fw-bold); visibility: hidden; pointer-events: none; } .dash-tab:hover { color: var(--dash-tab-ink-active); } .dash-tab.is-active { font-weight: var(--fw-bold); color: var(--dash-tab-ink-active); border-bottom-color: var(--dash-tab-underline); } /* ── Panels ──────────────────────────────────────────────────────────────── */ /* * All five panels share one grid cell, so the card is always as tall as the * tallest of them and switching tabs changes nothing about the page's layout. * Overview has five rows and Malware Scan has three; sized individually, the * card would jump every time someone moved between them. * * visibility rather than display: it keeps the cell sized and still takes the * closed panels out of the accessibility tree, so a screen reader is read the * open one rather than all five in a row. */ .dash-body { display: grid; padding: var(--dash-pad); } .dash-panel { grid-area: 1 / 1; visibility: hidden; opacity: 0; transition: opacity .2s ease, visibility 0s linear .2s; } .dash-panel.is-active { visibility: visible; opacity: 1; transition: opacity .2s ease, visibility 0s; } .dash-panel:focus-visible { outline: 2px solid var(--green); outline-offset: 4px; border-radius: 6px; } /* ── Panel head ──────────────────────────────────────────────────────────── */ .dash-panel-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 20px; } /* Groups the heading and its line so the pair sits as one flex child against the pill. min-width:0 because a flex item will not shrink below its content otherwise, and a long subtitle would push the pill off the card. */ .dash-panel-titles { min-width: 0; display: flex; flex-direction: column; padding: 7px 14px; align-items: flex-start; gap: 6px; } .dash-title { margin: 0 0 4px; color: var(--color-gray-900, #111827); font-size: 20px; font-style: normal; font-weight: 700; line-height: normal; } .dash-sub { margin: 0; color: var(--color-gray-500, #6B7280); font-size: 14px; font-style: normal; font-weight: 400; line-height: normal; } .dash-pill { display: flex; padding: 7px 14px; align-items: center; gap: 6px; margin: 0; border-radius: 100px; border-radius: 999px; background: var(--color-green-50, #ECFDF5); color: var(--color-green-700, #15803D); font-family: Inter; font-size: 13px; font-style: normal; font-weight: 600; line-height: normal; white-space: nowrap; } .dash-pill-dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; flex-shrink: 0; } /* ── Rows ────────────────────────────────────────────────────────────────── */ /* * A list, because that is what it is: five statuses of equal standing. The * rules between them are borders on the rows rather than a divider element, * and the first row carries none so the box's own edge is not doubled. */ .dash-rows { margin: 0; padding: 0; list-style: none; border: 1px solid var(--dash-border); border-radius: 10px; overflow: hidden; } /* * Three columns: the name takes the slack, the value and the timestamp take * only what they need. 1fr on the name is what keeps the value column from * moving between rows whose labels are different lengths. */ .dash-row { display: grid; grid-template-columns: 1fr auto auto; align-items: center; gap: 20px; min-height: var(--dash-row-h); padding: 12px 20px; font-size: var(--fs-dash-row); } .dash-row+.dash-row { border-top: 1px solid var(--dash-border); } .dash-row-name { color: var(--color-gray-900, #111827); font-family: Inter; font-size: 13px; font-style: normal; font-weight: 400; line-height: normal; } .dash-row-value { color: var(--color-green-700, #15803D); text-align: right; font-family: Inter; font-size: 13px; font-style: normal; font-weight: 600; line-height: normal; } .dash-row-value--bad { color: var(--dash-bad-ink); } /* * Green says resolved, red says stopped. A few rows are neither — a scan hit * somebody has already looked at, a report already sent — and those are stated * in the plain ink of the page rather than being pushed into one of the two * colours that carry a verdict. */ .dash-row-value--muted { color: var(--dash-neutral-ink); } /* Right-aligned and given a floor, so the timestamps line up as a column instead of tracking the width of the value beside them. */ .dash-row-time { min-width: 72px; font-size: var(--fs-dash-sub); color: var(--dash-time-ink); text-align: right; } /* ═══════════════════════════════════════════════════════════════════════════ LIVE THREAT INTELLIGENCE ═══════════════════════════════════════════════════════════════════════════ */ /* * Dark edge to edge, which is why the colour is on the section and not on a * card inside it. The AI Code Guardian block above does the opposite, and the * difference is deliberate in the comp: that one is an object sitting on the * page, this one is a change of ground. */ .geo { padding-block: var(--section-pad-y); background: #050A14; color: var(--geo-ink); } /* ── Head ────────────────────────────────────────────────────────────────── */ .geo-head { display: flex; flex-direction: column; align-items: center; gap: var(--gap-section-head); margin-bottom: var(--gap-geo-block); text-align: center; } .geo-eyebrow { margin: 0; font-family: var(--font-ui); font-size: var(--fs-geo-eyebrow); font-weight: var(--fw-medium); letter-spacing: .14em; text-transform: uppercase; color: var(--geo-ink); } /* * Not .section-title: that one is black on white and this section inverts. * The measure holds the break after the first sentence, which is where the comp * puts it — wider and "Shut" joins line one, narrower and it becomes three. */ .geo-title { margin: 0; max-width: var(--geo-title-measure); font-family: var(--font); font-size: var(--fs-geo-title); font-weight: var(--fw-regular); line-height: var(--lh-geo-title); color: var(--geo-ink); } /* * One sentence per line, the way the comp breaks it. * * Left as one run of text the line lands mid-sentence — "…come from. Shut the" * and then "door on any country in a click." — which reads as a heading that is * off centre even though it is not: measured against the render, the heading, * the map and the three definitions below it agree on their centre to within * 8px. It is the ragged split that looks wrong, not the position. * * inline-block rather than a
. A
would hold the break at every width, * including a phone where each sentence needs the whole screen and then some; * this keeps each sentence together while there is room for it and lets one * wrap inside itself when there is not. */ .geo-title-part { display: inline-block; } /* ── Map ─────────────────────────────────────────────────────────────────── */ /* Labels the map the way "Your Site" labels the dashboard: a legend above it, not a heading in the document's outline. */ .geo-label { margin: 0 0 24px; font-family: var(--font-ui); font-size: var(--fs-geo-label); font-weight: var(--fw-regular); letter-spacing: .12em; text-transform: uppercase; color: var(--geo-ink); } /* * The map is a live SVG, so every country is addressable and its state is a * class rather than a colour baked into a file. Changing which countries are * blocked is a class swap in the markup; when the data goes live it becomes the * same class swap from a script, with nothing here to change. */ .geo-map { margin: 0 0 var(--gap-geo-block); } /* The positioning context the pins are placed against, and the box that gives the map its height before the paths are laid out. */ .geo-map-inner { position: relative; aspect-ratio: var(--geo-map-ratio); } .geo-map-svg { display: block; width: 100%; height: 100%; } /* * The comp insets the map from the container; the legend goes with it, because * the legend's whole job is to sit at the map's left edge. * * Done in CSS rather than by wrapping both in a row and a col like the heading * and the trio. The map is four hundred lines of inline SVG, and a wrapper * means re-indenting every one of them — a whitespace diff that would bury the * two lines that actually change anything. The result is the same box. * * From lg only, and 992 is not an arbitrary choice: it is where the trio stops * being three columns and the legend stops being flush left. Below it the * section is one centred stack and the map should have the whole width. */ @media (min-width: 992px) { .geo-label, .geo-map { max-width: var(--geo-map-rail); /* After the margin shorthand each already sets, so the bottom gaps stand and only the sides become auto. */ margin-inline: auto; } } /* ── Countries ───────────────────────────────────────────────────────────── */ /* * The hairline is the section's own background, not a grey: it separates * neighbours by cutting the ground between them rather than by drawing a line * on top, which is what keeps a continent reading as one mass at this size. * * vector-effect keeps that hairline one device pixel at any width. Without it * the stroke scales with the viewBox, and on a wide screen the borders thicken * into a visible mesh over the whole map. */ .geo-country { fill: var(--geo-country); stroke: var(--geo-bg); stroke-width: 1; vector-effect: non-scaling-stroke; } .geo-country.is-customer { fill: var(--geo-customer); } .geo-country.is-blocked { fill: var(--geo-blocked); } /* * Hover lights the country under the cursor. The transition is on fill alone * — it is a paint, so it costs no layout, which matters when the thing being * hovered is one of 176 paths sharing a canvas. * * No pointer cursor: nothing happens when you click yet, and a hand promises * that something will. */ .geo-country { transition: fill .18s ease; } .geo-country:hover { fill: var(--geo-country-hover); } .geo-country.is-customer:hover { fill: var(--geo-customer-hover); } .geo-country.is-blocked:hover { fill: var(--geo-blocked-hover); } /* ── Pins ────────────────────────────────────────────────────────────────── */ .geo-pins { position: absolute; inset: 0; margin: 0; padding: 0; list-style: none; pointer-events: none; } /* * Placed by percentage, so the pin holds its spot on the country as the map * scales. The translate is what centres the dot on its coordinate instead of * hanging it down and to the right of it. */ .geo-pin { position: absolute; left: var(--x); top: var(--y); width: var(--geo-pin-size); height: var(--geo-pin-size); transform: translate(-50%, -50%); border-radius: 50%; } /* All three kinds name their own colour rather than two of them overriding a default, so the markup reads the same for every pin and none of them is the one that happens to inherit. */ .geo-pin--ok { background: var(--geo-pin-ok); } /* * The ring each pin sends out. One ping every --geo-pulse-dur, expanding from * the dot and fading as it goes, which is what makes the map read as reporting * rather than as a drawing of some pins. * * background:inherit so the ring is whatever colour its pin is — green, red or * purple — without the colour being written three more times here. * * .geo-pin carries a transform, which makes it a stacking context, so z-index * -1 puts the ring behind the dot without escaping the pin. Painted in front it * would wash the dot out for the first frames of every cycle. * * Only scale and opacity animate. Both are compositor properties, so ten rings * running forever cost no layout and no repaint — which is the difference * between a detail and a section that makes the page feel heavy while it sits * on screen. * * The delay is per pin, set in the markup, so the ten come round in turn. * Without it they fire in unison and the map blinks rather than ticks. */ @keyframes geo-ping { 0% { transform: scale(1); opacity: .55; } 70% { transform: scale(3.4); opacity: 0; } 100% { transform: scale(3.4); opacity: 0; } } .geo-pin::before { content: ""; position: absolute; inset: 0; z-index: -1; border-radius: 50%; background: inherit; animation: geo-ping var(--geo-pulse-dur) cubic-bezier(0, 0, .2, 1) var(--d, 0s) infinite; } .geo-pin--bad { background: var(--geo-pin-bad); } .geo-pin--count { background: var(--geo-pin-count); } /* * The label sits beside its dot and is taken out of the flow, so a long one * cannot push the dot off its coordinate. It is the dot that has to stay * accurate; the label only has to be next to it. */ .geo-pin-label { position: absolute; left: calc(100% + 10px); top: 50%; transform: translateY(-50%); font-family: var(--font-ui); font-size: var(--fs-geo-pin); font-weight: var(--fw-regular); line-height: 1; color: var(--geo-ink); white-space: nowrap; } /* * Two of the five labels have a short form, and only those two need one. * * Measured against a 360px screen, where the map is 336 x 151: "Blocked", * "Blocked" and "Counting" all clear their neighbours, but "2.4k customers" is * 84px and runs straight over the United Kingdom's dot, and "Australia 1k * customers" is 132px — most of the width of the map. * * display:none on the form not in use, rather than hiding one visually: that * keeps it out of the accessibility tree too, so a screen reader is read one * label per pin and not both. */ .geo-pin-short { display: none; } /* One label sits above its dot rather than beside it — there is no room to its right at the edge of the map. */ .geo-pin--above .geo-pin-label { left: 50%; top: auto; bottom: calc(100% + 10px); transform: translateX(-50%); } /* * Present for a screen reader, absent for everyone else. clip-path rather than * display:none or visibility:hidden, both of which would take it out of the * accessibility tree along with everything else — which is the opposite of what * this is for. */ .visually-hidden { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; } /* ── What / How / Why it's safe ──────────────────────────────────────────── */ /* * A Bootstrap .row and nothing else, and each of the four declarations that * were here is left off for a reason: * * display:flex .row already is one. * * align-items:center This is what broke the rules. The default is stretch, * which makes all three columns as tall as the tallest — * and the rules are border-lefts ON those columns, so * stretch is what gives them one shared height. Centred, * each rule was only as tall as its own passage and the * three sat at three different heights. * * justify-content Three col-lg-4 come to exactly 100%; there is no free * space left to distribute. * * gap:20px The columns come to 100% between them, so gap here puts * the row wider than the column holding it. The space * between the passages is the columns own gutter, inside * them, where it cannot push the row out. * * row-gap stays: it is the space between the three when they stack. */ .geo-defs { margin: 0; row-gap: 40px; } /* * The rules sit between the columns, so they are drawn on every column but the * first — which is what keeps them between things rather than around them, and * means a fourth column would be ruled correctly without anyone counting. * * They disappear with the columns at the stacking breakpoint: a rule down the * left of a full-width block is not a divider, it is a quote mark. */ .geo-def { text-align: center; } /* * BOTH RULES ON THE MIDDLE PASSAGE, and only there. * * It was a border-left on every passage but the first, which draws the same two * lines — but written that way the 2|3 boundary belongs to the third passage * while the 1|2 boundary belongs to the second, and the pair are only ever in * step by coincidence. * * Here the middle one owns both of its edges. Note what is NOT done: a * border-right on the first as well would land on the same pixel as this one's * border-left, because the columns abut — two 1px lines stacked into a 2px * divider on one side and not the other. */ .geo-def:nth-child(2) { border-inline: 1px solid var(--geo-rule); } /* * Paragraphs with classes, not a description list. Both labels and passages are *

, which keeps WHAT / HOW / WHY out of the document's heading outline — * eighteen of them across this page would otherwise sit in the list a screen * reader offers for jumping around it, and none of them names a section. * * Prefixed .geo- like every other class in this file. A bare .heading would be * claimed by the first other section that wanted one. */ .geo-heading { margin-bottom: 12px; color: var(--geo-def-ink); text-align: center; font-family: var(--font); font-size: var(--fs-geo-def); font-style: normal; font-weight: 700; line-height: var(--lh-geo-heading); /* The comp types these in capitals; done here instead so the text a screen reader is handed is still "What", not four spelled-out letters. Identical on screen either way. */ text-transform: uppercase; } .geo-paragraph { margin: 0; color: var(--geo-def-ink); text-align: center; font-family: var(--font); font-size: var(--fs-geo-def); font-style: normal; font-weight: 400; line-height: var(--lh-geo-paragraph); } /* /* * Once the section stacks, EVERYTHING in it is centred — and .geo-label was * the one thing that was not. * * On a desktop it is right to be left: it labels the map the way "Your Site" * labels the dashboard, and it sits at the left edge of a map that runs the * full width under it. Stacked, there is no full-width map to sit against any * more — there is a centred title above it and a centred What/How/Why trio * below it, and one flush-left line between them reads as a mistake rather * than as a legend. * * 991.98 because that is where the trio stops being three columns, which is * the same moment the section stops being a row of things and becomes one * centred stack. */ @media (max-width: 991.98px) { :root { --gap-geo-block: 44px; } .geo-label { text-align: center; } /* * These three moved out of a max-width:991px block, 28/09/2026. * * 991.98 is where the columns actually stack — .col-lg-3 stops applying at * 992. At a flat 991 there was a pixel of width where the three passages were * ALREADY stacked and full-width but this rule had not fired yet, so the * middle one kept the rules down both its sides: two vertical lines through a * single-column list. The label above it centred at 991.98 and the margins * closed at 991, so the section changed shape twice on the way down. */ .geo-def:nth-child(2) { /* border-inline, to match what the rule above sets — border-left alone would leave the right-hand one standing once the passages stack. */ border-inline: 0; } } /* The step from the heading to the legend, and from the map to the passages. It was 64 with one step to 44 and nothing below that, so a phone kept the tablet's spacing. */ @media (max-width: 575.98px) { :root { --gap-geo-block: 32px; } /* * THE SENTENCES STOP BEING BLOCKS AND GO BACK TO BEING TEXT. * * inline-block keeps each sentence whole, which is the point of it from lg up: * one sentence, one line, the way the comp breaks it. At this width neither * sentence fits on a line of its own, so each one wrapped INSIDE itself and * the first left "from." stranded on a line by itself. * * Inline, the two run together as one passage and the break can fall wherever * the measure wants it. balance then evens the lines out, so the block reads * as a shape rather than as three full lines and a short one — which is what * the inline-block was trying to buy in the first place, by a means that only * works while a sentence fits. * * A browser too old for text-wrap: balance simply wraps normally, which is * still the orphan gone. */ .geo-title-part { display: inline; } } /* ═══════════════════════════════════════════════════════════════════════════ WHY LEADX SECURITY ═══════════════════════════════════════════════════════════════════════════ */ /* * The tint is on the section, so it runs the full width of the window the way * the comp draws it. The content inside sits in the same container-aligned box * every other section below the hero uses, so the headline and the card row line * up with the sections above rather than with the band's own edges. * * That split is the point: ground full-bleed, content on the page's rail. One * element cannot do both — it forces a choice between a band that stops short of * the window and content that lines up with nothing. */ .diff { display: flex; /* * padding-block, not the flat `padding: 80px` Figma reports. * * Figma measures that 80 from the edge of a 1440 frame, so the number already * contains the page margin. Applied here it is charged twice: the section pays * 80 a side, then the .container inside it pays the page margin again, and the * headline and card row land 50px inside every other section on the page. * Measured at a 1200 viewport: this band 1016 wide where deep, guardian, action * and geo were all 1116. That step in and out at every band is what read as * "sections not centred". * * The horizontal margin belongs to the container — the one rail the whole page * shares. The 80 vertical is real and stays. */ /* * Through the token, not as a literal. * * --diff-panel-pad-y was already stepping down — 48 below lg, 36 on a phone * — and wired to nothing, because this rule carried Figma's 80 as a number. * So the band kept 80px above and below at every width while every section * around it dropped to 64, and on a phone that reads as one section padded * differently from the rest of the page. * * The token's base becomes 80, the comp's own value, so nothing the comp was * drawn at moves. */ padding-block: var(--diff-panel-pad-y); flex-direction: column; justify-content: center; align-items: center; gap: 56px; align-self: stretch; border-radius: 52px; background: #F8F9FB; } /* ── Head ────────────────────────────────────────────────────────────────── */ .diff-head { display: flex; flex-direction: column; align-items: center; gap: var(--gap-diff-head); margin-bottom: var(--gap-diff-cards); text-align: center; } /* * The page's ink gradient clipped to the glyphs, the same treatment the hero * headline uses — dark where the sentence starts, lighter where it ends. The * measure is what holds the break after "Dashboards."; without it the two lines * fall in the wrong places at almost every width. * * box-decoration-break so each line gets its own copy of the gradient. Without * it the browser paints one strip across both lines and slices it, which hands * line two the faded half and leaves "One Number You Can Trust." grey. */ .diff-title { margin: 0; max-width: var(--diff-title-measure); font-family: var(--font); font-size: var(--fs-diff-title); font-weight: var(--fw-regular); line-height: var(--lh-diff-title); color: var(--text-heading); background: var(--title-gradient); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; -webkit-box-decoration-break: clone; box-decoration-break: clone; } @media (forced-colors: active) { .diff-title { background: none; -webkit-text-fill-color: currentColor; } } /* ── Cards ───────────────────────────────────────────────────────────────── */ /* * 26 between cards, not Bootstrap's 24. Set through --bs-gutter-x rather than a * gap of our own, because that is the variable the columns already pay their * padding out of — change it here and the column padding, the row's negative * margins and the space between cards all move together. A separate gap would * stack on top of the gutter and give 50. * * Measured: the comp puts four 300px cards in a 1278 row, and 4×300 + 3×26 is * exactly 1278. */ .diff-cards { --bs-gutter-x: var(--gap-diff-card); /* * margin-block, not a flat `margin: 0`. This is a