/* Deltus rebuild: design tokens. Measured from the live site (https://deltus.ai/, 2026-10-05; research/refs/deltus/live/ and live-html/). Breakpoints: desktop ≥1200px · tablet 810–1199px · phone ≤809px. Colour names below map to the Framer token ids in the comments, so a value can be traced back to the source. */ :root { /* ---------- colour ---------- */ --c-bg: #131517; /* 8c339a8e — surface/footer colour (NOT the page background) */ --c-bg-deep: #080a09; /* 16f611a0 — the page background: live paints body and the page wrapper this */ --c-surface: #232326; /* ad0e5630 — cards */ --c-surface-2: #303131; /* 03d079c3 — raised / borders */ --c-white: #fff; /* cecf886f / 1ef9e3a0 — headings */ --c-text: #fff; --c-text-80: #fffc; /* 7a4abf4f — body copy (80% white) */ --c-text-70: #ffffffb3; /* b2053b36 — muted copy (70% white) */ /* accents (used by cards, pills and charts) */ --c-orange: #f19447; /* 35240c30 */ --c-gold: #d4b144; /* 5b835f3d */ --c-lime: #f3ffc9; /* 63b032cc */ --c-green: #68cc58; /* bfafb4ac */ --c-mint: #91cfb5; /* d3ad1a85 */ --c-cyan: #9efaff; /* 6928ba12 */ --c-blue: #3064ff; /* 38ca9266 */ --c-violet: #b59aff; /* 3c43e087 */ --c-pink: #fe257f; /* e2d82bd7 */ /* ---------- type ---------- */ --f-display: "Host Grotesk", "Host Grotesk Placeholder", sans-serif; --f-sans: "Inter", "Inter Placeholder", sans-serif; /* ---------- layout ---------- */ --content-max: 1080px; /* measured: every section is 1080px wide inside a 1440 viewport */ --page-pad: 24px; --nav-h: 65px; /* ---------- motion ---------- */ --ease-appear: cubic-bezier(.44, 0, .56, 1); /* Framer default tween; override per element with measured values */ --ease-out: cubic-bezier(0, 0, .58, 1); /* framer-motion default for duration-only HTML fades */ --dur-appear: .4s; /* Framer spring {bounce .2, duration .4} as a CSS curve, from springCurve(.4,.2,32) in js/motion.js */ --spring-btn: linear(0, 0.0314, 0.1087, 0.2111, 0.324, 0.4369, 0.5434, 0.6393, 0.7228, 0.7933, 0.8512, 0.8976, 0.9337, 0.9611, 0.9811, 0.9953, 1.0047, 1.0106, 1.0138, 1.0151, 1.015, 1.0141, 1.0127, 1.011, 1.0093, 1.0076, 1.0061, 1.0047, 1.0036, 1.0026, 1.0018, 1.0012, 1); } /* ---------- text presets (Framer text styles; the Framer class is in the comment) ---------- Line heights are percentages exactly as Framer writes them. Numbers use tabular figures ('tnum' on live). */ .t-h1 { font: 400 48px/110% var(--f-display); letter-spacing: -.04em; color: var(--c-white); } /* s5fotf */ .t-h2 { font: 400 38px/110% var(--f-display); letter-spacing: -.04em; color: var(--c-white); } /* 1apj62e */ .t-h3 { font: 400 32px/110% var(--f-display); letter-spacing: -.04em; color: var(--c-white); } /* qq5w07 */ .t-h4 { font: 500 24px/110% var(--f-display); letter-spacing: -.04em; color: var(--c-white); } /* 19n25u9 */ .t-h5 { font: 500 18px/110% var(--f-display); letter-spacing: -.04em; color: var(--c-white); } /* 1efpdce */ .t-body { font: 400 16px/150% var(--f-display); letter-spacing: -.02em; color: var(--c-text-80); } /* 1jyfdru */ .t-body-sm { font: 400 14px/150% var(--f-display); letter-spacing: -.02em; color: var(--c-text-80); } /* o2x06q */ .t-label { font: 500 14px/120% var(--f-display); letter-spacing: -.02em; color: #08090a; } /* z62jgw (on light) */ .t-button { font: 500 16px/110% var(--f-display); letter-spacing: -.04em; color: var(--c-white); } /* jx9uun (measured on live: Host Grotesk 500, not Inter) */ .t-num { font-variant-numeric: tabular-nums; font-feature-settings: "tnum" on; } @media (max-width: 1199px) { .t-h2 { font-size: 32px; } .t-h3 { font-size: 24px; } } @media (max-width: 809px) { .t-h1 { font-size: 38px; } } /* Self-hosted copies of the exact font files the live site loads (Host Grotesk + Inter). Self-hosted so the Cloudflare build has no dependency on Google Fonts or framerusercontent.com. */ /* Host Grotesk is a variable font: the 400, 500 and 700 files were byte-identical (same md5), so one file per style and subset now serves the whole 400-700 range (2026-10-09, site audit T1 S12; was 12 rules, 3 URLs each). */ @font-face { font-family: "Host Grotesk"; src: url("/assets/fonts/host-grotesk-400-italic-latin-ext.woff2") format("woff2"); font-weight: 400 700; font-style: italic; font-display: swap; unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } @font-face { font-family: "Host Grotesk"; src: url("/assets/fonts/host-grotesk-400-italic-latin.woff2") format("woff2"); font-weight: 400 700; font-style: italic; font-display: swap; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: "Host Grotesk"; src: url("/assets/fonts/host-grotesk-400-latin-ext.woff2") format("woff2"); font-weight: 400 700; font-style: normal; font-display: swap; unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } @font-face { font-family: "Host Grotesk"; src: url("/assets/fonts/host-grotesk-400-latin.woff2") format("woff2"); font-weight: 400 700; font-style: normal; font-display: swap; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: "Inter"; src: url("/assets/fonts/inter-400-latin-ext.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF; } @font-face { font-family: "Inter"; src: url("/assets/fonts/inter-400-latin.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2070, U+2074-207E, U+2080-208E, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: "Inter"; src: url("/assets/fonts/inter-500-latin-ext.woff2") format("woff2"); font-weight: 500; font-style: normal; font-display: swap; unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF; } @font-face { font-family: "Inter"; src: url("/assets/fonts/inter-500-latin.woff2") format("woff2"); font-weight: 500; font-style: normal; font-display: swap; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2070, U+2074-207E, U+2080-208E, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: "Inter"; src: url("/assets/fonts/inter-600-italic-latin-ext.woff2") format("woff2"); font-weight: 600; font-style: italic; font-display: swap; unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF; } @font-face { font-family: "Inter"; src: url("/assets/fonts/inter-600-italic-latin.woff2") format("woff2"); font-weight: 600; font-style: italic; font-display: swap; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2070, U+2074-207E, U+2080-208E, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: "Inter"; src: url("/assets/fonts/inter-600-latin-ext.woff2") format("woff2"); font-weight: 600; font-style: normal; font-display: swap; unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF; } @font-face { font-family: "Inter"; src: url("/assets/fonts/inter-600-latin.woff2") format("woff2"); font-weight: 600; font-style: normal; font-display: swap; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2070, U+2074-207E, U+2080-208E, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: "Inter"; src: url("/assets/fonts/inter-700-italic-latin-ext.woff2") format("woff2"); font-weight: 700; font-style: italic; font-display: swap; unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF; } @font-face { font-family: "Inter"; src: url("/assets/fonts/inter-700-italic-latin.woff2") format("woff2"); font-weight: 700; font-style: italic; font-display: swap; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2070, U+2074-207E, U+2080-208E, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: "Inter"; src: url("/assets/fonts/inter-700-latin-ext.woff2") format("woff2"); font-weight: 700; font-style: normal; font-display: swap; unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF; } @font-face { font-family: "Inter"; src: url("/assets/fonts/inter-700-latin.woff2") format("woff2"); font-weight: 700; font-style: normal; font-display: swap; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2070, U+2074-207E, U+2080-208E, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } /* Deltus rebuild: reset + shared primitives. Section styles live in styles/sections/.css. */ *, *::before, *::after { box-sizing: border-box; } /* live does not set scroll-behavior (computed: auto) — smooth scrolling here also broke scripted scroll sweeps */ /* overflow-x must be clipped on html as well as body: with html visible the clip does not contain the wide decorative backdrops (the 920px dot grids), which gave contact/dispute/404 a horizontal scrollbar below 1200px. */ html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; overflow-x: clip; } html, body { margin: 0; padding: 0; } body { background: var(--c-bg-deep); color: var(--c-text); /* live body background is #080a09 */ font: 400 16px/150% var(--f-display); letter-spacing: -.02em; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; overflow-x: clip; } h1, h2, h3, h4, h5, h6, p, figure, blockquote, ul, ol, dl, dd { margin: 0; padding: 0; } h1, h2, h3, h4, h5, h6 { font-weight: inherit; font-size: inherit; } ul, ol { list-style: none; } a { color: inherit; text-decoration: none; } button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; } input, textarea, select { font: inherit; color: inherit; } img, svg, video, canvas { display: block; max-width: 100%; } img { height: auto; } :focus-visible { outline: 2px solid var(--c-white); outline-offset: 2px; } ::selection { background: var(--c-surface-2); color: var(--c-white); } .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } .skip-link { position: absolute; left: -9999px; top: 0; z-index: 100; padding: 12px 16px; background: var(--c-white); color: #000; border-radius: 8px; } .skip-link:focus { left: 16px; top: 16px; } /* ---------- page + section frame ---------- Measured: each section is a block whose inner content column is 1080px wide, centred, with 24px side padding below that. The nav and footer span the full viewport width. */ .section { position: relative; display: flex; flex-direction: column; align-items: center; } .content { position: relative; width: 100%; max-width: var(--content-max); margin: 0 auto; padding: 0 var(--page-pad); } /* Measured on live (tools/_verify_gap2.mjs): sections are separated by 48px at >=1200px and by nothing below it. A section that needs more than that adds its own margin — e.g. the home CTA sits 32px lower again at every width. */ @media (min-width: 1200px) { main > .section + .section { margin-top: 48px; } main { margin: 48px 0; } /* live leaves the same 48px between nav→first section and last section→footer */ } /* ---------- media slot ---------- */ .media { position: relative; overflow: hidden; } .media img { width: 100%; height: 100%; object-fit: cover; } /* ---------- button (template component "Button" P90iAy18v) ---------- Measured on live: every instance is padding 8px 12px, radius 8, width min-content, label Host Grotesk 500 14px/120% -.02em. Primary is #fff with #08090a text, Secondary is --c-surface with 80% white text. Hover (measured directly on live by hovering, and matching the Button source): Primary gains a 2px rgba(255,255,255,.5) ring, Secondary's background goes to --c-surface-2; spring bounce .2 over .4s. The nav's own CTA is styled separately in nav.css and has no hover. */ .btn { position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 8px; flex: none; white-space: nowrap; cursor: pointer; user-select: none; border-radius: 8px; padding: 8px 12px; width: min-content; text-align: center; font: 500 14px/120% var(--f-display); letter-spacing: -.02em; transition: background-color .4s var(--spring-btn), box-shadow .4s var(--spring-btn); } .btn--primary { background: var(--c-white); color: #08090a; } .btn--primary:hover { box-shadow: 0 0 0 2px rgba(255, 255, 255, .5); } .btn--secondary { background: var(--c-surface); color: var(--c-text-80); } .btn--secondary:hover { background: var(--c-surface-2); } .btn--ghost { background: transparent; color: var(--c-white); } /* ---------- component placeholder (until an agent fills a section) ---------- */ .stub { display: flex; align-items: center; justify-content: center; min-height: 200px; color: var(--c-text-70); font: 500 12px/16px var(--f-sans); letter-spacing: .04em; text-transform: uppercase; } .stub--error { color: #ff6b6b; text-transform: none; letter-spacing: 0; } /* ---------- motion ---------- */ .no-motion [data-appear] { opacity: 1 !important; transform: none !important; filter: none !important; } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; } } /* ===== sections/addOns.css ===== */ /* Add-ons (#add-ons): heading plus two Feature Cards side by side. Measured from research/refs/deltus/live/home/w1440 . w810 . w390 sections/12-add-ons.*. Two columns on desktop and tablet (live keeps repeat(2) there), a 12px stack on phone. */ [data-section="addOns"] .addOns__grid { display: grid; width: 100%; gap: 16px; justify-content: start; grid-template-columns: repeat(2, minmax(50px, 1fr)); grid-auto-rows: minmax(0, 1fr); } @media (max-width: 809px) { [data-section="addOns"] .addOns__grid { display: flex; flex-direction: column; align-items: flex-start; justify-content: flex-start; gap: 12px; } } /* ===== sections/contactForm.css ===== */ /* contactForm — /contact, live layer "Main" #hero (page module G9l6HTB3t.js, hash framer-U0zB8). Measured from the live site at 1440 / 810 / 390 (site/deltus/_shots/forms-legal/contact-live-w*.tree.txt): hero max-width 760 / padding 48px 0 / gap 64 (tablet 56, phone 48 + 16px side padding) · Content gap 16 · cards radius 4 bg #131517 · form gap 20 (phone 16) · rows gap 16 (phone: stacked) · field gap 10 · input wrapper 46px radius 12 bg #232326 padding 16 · select 42px · textarea min-height 100. Form input variables mirror Framer's --framer-input-* tokens for this page. The page background comes from base.css (body = var(--c-bg-deep) #080a09), as live. */ [data-section="contactForm"] { --field-bg: var(--c-surface); /* --framer-input-background #232326 */ --field-radius: 12px; --field-pad: 16px; --field-focus-border: rgba(255, 255, 255, .6); /* 2026-10-09 (T1 C2): was #303131 (live token), ~1.2:1 on the field, so keyboard focus was invisible */ --field-placeholder: var(--c-text-70); /* --framer-input-placeholder-color 70% white */ --field-icon: #999; /* --framer-input-icon-color */ width: 100%; max-width: 760px; margin: 0 auto; padding: 48px 0; gap: 64px; scroll-margin-top: 200px; } @media (min-width: 810px) and (max-width: 1199px) { [data-section="contactForm"] { gap: 56px; } } @media (max-width: 809px) { [data-section="contactForm"] { gap: 48px; padding: 48px 16px; } } /* ---------- dot-grid backdrop (live layer "Dots": 920px wide, aspect 1.17949, pulsing opacity 1 → .5) ---------- */ [data-section="contactForm"] .cf__dots { position: absolute; top: 0; left: 0; z-index: 0; flex: none; width: 920px; aspect-ratio: 1.17949; height: auto; overflow: hidden; pointer-events: none; animation: cf-dots 2s cubic-bezier(.44, 0, .56, 1) infinite alternate; } [data-section="contactForm"] .cf__dots img { width: 100%; height: 100%; object-fit: cover; object-position: center; } @keyframes cf-dots { from { opacity: 1; } to { opacity: .5; } } @media (prefers-reduced-motion: reduce) { [data-section="contactForm"] .cf__dots { animation: none; opacity: .75; } } /* ---------- heading ---------- */ [data-section="contactForm"] .cf__head { display: flex; flex-direction: column; align-items: flex-start; gap: 16px; width: 100%; overflow: hidden; position: relative; } [data-section="contactForm"] .cf__tag { display: flex; align-items: center; gap: 8px; width: min-content; } [data-section="contactForm"] .cf__dot { flex: none; width: 14px; height: 8px; border-radius: 9999px; background: var(--c-white); } [data-section="contactForm"] .cf__tag p { white-space: pre; } [data-section="contactForm"] h1 { width: 100%; white-space: pre-wrap; word-break: break-word; } [data-section="contactForm"] .cf__intro { width: 100%; text-align: left; white-space: pre-wrap; word-break: break-word; } /* ---------- cards ---------- */ [data-section="contactForm"] .cf__content { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 16px; width: 100%; overflow: clip; position: relative; } [data-section="contactForm"] .cf__cards { display: flex; align-items: center; justify-content: center; gap: 16px; width: 100%; overflow: clip; } [data-section="contactForm"] .cf__card { display: flex; flex-direction: column; align-items: flex-start; gap: 24px; flex: 1 0 0; width: 1px; padding: 24px 20px; background: var(--c-bg); border-radius: 4px; overflow: hidden; position: relative; } [data-section="contactForm"] .cf__icon { display: flex; align-items: center; justify-content: center; flex: none; width: 64px; height: 64px; border-radius: 999px; border: 1px solid var(--c-surface-2); overflow: clip; } [data-section="contactForm"] .cf__icon svg { width: 24px; height: 24px; opacity: .9; color: var(--c-white); } [data-section="contactForm"] .cf__card-text { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; width: 100%; } [data-section="contactForm"] .cf__card-title, [data-section="contactForm"] .cf__card-desc { width: 100%; } [data-section="contactForm"] .cf__card-title h5, [data-section="contactForm"] .cf__card-desc p { width: 100%; white-space: pre-wrap; word-break: break-word; } [data-section="contactForm"] .cf__card-desc a { color: var(--c-text-80); text-decoration: underline; } [data-section="contactForm"] .cf__card-desc a:hover { color: var(--c-white); } /* the form card is a full-width card with its own padding */ [data-section="contactForm"] .cf__card--form { flex: none; width: 100%; gap: 32px; padding: 32px 24px 40px; } [data-section="contactForm"] .cf__card-head { display: flex; flex-direction: column; align-items: flex-start; justify-content: flex-end; gap: 8px; width: 100%; } @media (max-width: 809px) { [data-section="contactForm"] .cf__cards { flex-direction: column; } [data-section="contactForm"] .cf__card { flex: none; width: 100%; } } /* ---------- form ---------- */ [data-section="contactForm"] .cf__form { display: flex; flex-direction: column; align-items: flex-start; gap: 20px; width: 100%; overflow: hidden; position: relative; } [data-section="contactForm"] .cf__row { display: flex; align-items: center; justify-content: center; gap: 16px; width: 100%; overflow: clip; } [data-section="contactForm"] .cf__field { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; flex: none; width: 100%; position: relative; } [data-section="contactForm"] .cf__row > .cf__field { flex: 1 0 0; width: 1px; } [data-section="contactForm"] .cf__label { flex: none; width: auto; } [data-section="contactForm"] .cf__label p { white-space: pre; } @media (max-width: 809px) { [data-section="contactForm"] .cf__form { gap: 16px; } [data-section="contactForm"] .cf__row { flex-direction: column; } [data-section="contactForm"] .cf__row > .cf__field { flex: none; width: 100%; } } /* input shells: Framer's .framer-form-input-wrapper + .framer-form-text-input */ [data-section="contactForm"] .cf__wrap { display: flex; align-items: center; flex: none; width: 100%; height: 46px; padding: 0 var(--field-pad); /* 2026-10-09 (T1 C1/D1): vertical padding left the input 14px tall and clipped descenders */ background: var(--field-bg); border-radius: var(--field-radius); overflow: hidden; position: relative; } [data-section="contactForm"] .cf__wrap::after { content: ""; pointer-events: none; box-sizing: border-box; position: absolute; top: 0; left: 0; width: 100%; height: 100%; border: 0 solid var(--field-focus-border); border-radius: inherit; } [data-section="contactForm"] .cf__wrap:focus-within::after { border-width: 1px; } [data-section="contactForm"] .cf__wrap input, [data-section="contactForm"] .cf__wrap textarea, [data-section="contactForm"] .cf__wrap select { flex: 1; width: 100%; min-width: 0; height: 100%; padding: 0; margin: 0; font: 400 16px/1.2em var(--f-display); letter-spacing: 0; color: var(--c-white); background: none; border: none; overflow: hidden; } [data-section="contactForm"] .cf__wrap input { text-overflow: ellipsis; white-space: nowrap; } [data-section="contactForm"] .cf__wrap input:focus-visible, [data-section="contactForm"] .cf__wrap textarea:focus-visible, [data-section="contactForm"] .cf__wrap select:focus-visible { outline: none; } [data-section="contactForm"] .cf__wrap input::placeholder, [data-section="contactForm"] .cf__wrap textarea::placeholder { color: var(--field-placeholder); } /* textarea: the wrapper has no padding, the field carries it (Framer .framer-form-textarea-input-type) */ [data-section="contactForm"] .cf__wrap--textarea { height: auto; min-height: 100px; padding: 0; } [data-section="contactForm"] .cf__wrap--textarea textarea { display: flex; width: 100%; height: auto; padding: var(--field-pad); min-height: inherit; max-height: inherit; white-space: break-spaces; resize: vertical; overflow: hidden auto; } [data-section="contactForm"] .cf__wrap--textarea textarea::-webkit-resizer { background: url("data:image/svg+xml,") no-repeat; } /* select: 42px tall, 16px of room on the right for the caret drawn by ::before */ [data-section="contactForm"] .cf__wrap--select { display: block; height: 42px; padding: 0 var(--field-pad) 0 0; } [data-section="contactForm"] .cf__wrap--select select { display: inline-block; height: 42px; padding: 12px var(--field-pad); appearance: none; -webkit-appearance: none; } [data-section="contactForm"] .cf__wrap--select select:required:invalid { color: var(--c-text-70); } [data-section="contactForm"] .cf__wrap--select select option { color: #000; } [data-section="contactForm"] .cf__wrap--select::before { content: ""; box-sizing: content-box; display: block; pointer-events: none; position: absolute; top: 0; bottom: 0; right: 0; width: 16px; padding: 12px 16px; padding-left: 10px; background-color: var(--field-icon); -webkit-mask-image: url("data:image/svg+xml,"); mask-image: url("data:image/svg+xml,"); -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-size: 16px; mask-size: 16px; -webkit-mask-position: 10px; mask-position: 10px; } [data-section="contactForm"] .cf__wrap--select::after { content: none; } /* ---------- submit button: the live "Form Button" (LfcphVkGA) ---------- */ [data-section="contactForm"] .cf__submit { position: relative; flex: none; width: auto; } [data-section="contactForm"] .cf__btn { display: flex; flex-direction: row; align-items: center; justify-content: center; gap: 0; width: min-content; height: min-content; padding: 8px 12px; background: var(--c-white); border: 0; border-radius: 8px; box-shadow: none; opacity: 1; cursor: pointer; position: relative; transition: box-shadow .2s var(--ease-appear), background-color .2s var(--ease-appear), opacity .2s var(--ease-appear); } [data-section="contactForm"] .cf__btn-label { flex: none; width: auto; white-space: pre; text-align: start; -webkit-user-select: none; user-select: none; } [data-section="contactForm"] .cf__btn:hover { box-shadow: 0 0 0 2px rgba(255, 255, 255, .5); } [data-section="contactForm"] .cf__btn:active { box-shadow: 0 0 0 2px rgba(255, 255, 255, .7); } [data-section="contactForm"] .cf__btn[data-state="loading"], [data-section="contactForm"] .cf__btn[data-state="success"], [data-section="contactForm"] .cf__btn[data-state="error"], [data-section="contactForm"] .cf__btn[data-state="disabled"] { cursor: default; box-shadow: none; } [data-section="contactForm"] .cf__btn[data-state="disabled"] { opacity: .5; } [data-section="contactForm"] .cf__btn[data-state="error"] { background: rgba(255, 34, 68, .15); } [data-section="contactForm"] .cf__btn[data-state="error"] .cf__btn-label { color: rgb(255, 34, 68); } [data-section="contactForm"] .cf__btn[data-state="loading"] .cf__btn-label { display: none; } /* spinner: a conic arc masked to a ring, rotating once a second (live Form Button "Spinner" / "Conic") */ [data-section="contactForm"] .cf__spinner { display: none; } [data-section="contactForm"] .cf__btn[data-state="loading"] .cf__spinner { display: block; flex: none; width: 20px; aspect-ratio: 1; height: auto; overflow: hidden; position: relative; -webkit-mask: url("/assets/img/pGiXYozQ3mE4cilNOItfe2L2fUA.svg") alpha no-repeat center / cover; mask: url("/assets/img/pGiXYozQ3mE4cilNOItfe2L2fUA.svg") alpha no-repeat center / cover; } [data-section="contactForm"] .cf__spinner-arc { position: absolute; inset: 0; display: block; background: conic-gradient(from 0deg at 50% 50%, rgb(0, 0, 0) 7.208614864864882deg, rgba(0, 0, 0, .7) 342deg); animation: cf-spin 1s linear infinite; } [data-section="contactForm"] .cf__spinner-cap { position: absolute; top: 0; left: 50%; transform: translateX(-50%); display: block; width: 2px; aspect-ratio: 1; height: auto; background: var(--c-white); border-radius: 1px; } @keyframes cf-spin { to { transform: rotate(360deg); } } @media (prefers-reduced-motion: reduce) { [data-section="contactForm"] .cf__spinner-arc { animation-duration: 2s; } } /* ---------- spam trap (live: absolutely positioned, scaled to nothing, never focusable) ---------- */ [data-section="contactForm"] .cf__trap { position: absolute; transform: scale(0); } /* Form status line under the button: shown only when a submit fails (mountForm in contactForm.js). */ [data-section="contactForm"] .cf__status { margin: 12px 0 0; color: var(--c-text-70, rgba(255,255,255,.7)); } [data-section="contactForm"] .cf__status[hidden] { display: none; } /* ===== sections/coverage.css ===== */ /* Coverage (#compliance) plus the two primitives the other home-c sections share: the section shell, the "Heading" block and the live "Feature Card" (iQvnlfc3o). Measured from research/refs/deltus/live/home/w1440 . w810 . w390, sections 09-coverage ... 15-cta, and the recovered sources augiA20Il.js (Home) and iQvnlfc3o.js (Feature Card). Breakpoints are the live ones: desktop >= 1200px, tablet 810-1199px, phone <= 809px. HC = home-c; the hc- classes are shared by coverage, proof, localCoverage, addOns, partnersSection, faq. */ /* ---------- the section shell ---------- Live, each of these sections IS the 1080px column: width 100%, max-width 1080px, centred, with its own vertical padding and its own side padding per breakpoint (0 / 24px / 16px). There is no inner wrapper, which is why these components call section({ framed: false }). */ [data-section="coverage"], [data-section="proof"], [data-section="localCoverage"], [data-section="addOns"], [data-section="partnersSection"], [data-section="faq"], [data-section="cta"] { width: 100%; max-width: var(--content-max); margin-inline: auto; align-items: flex-start; justify-content: center; scroll-margin-top: 40px; } /* Coverage and FAQ end 48px short (padding 72px 0 48px); proof, localCoverage, addOns and partners are 72px both ends. */ [data-section="coverage"], [data-section="faq"] { gap: 64px; padding: 72px 0 48px; } [data-section="proof"], [data-section="localCoverage"], [data-section="addOns"], [data-section="partnersSection"] { gap: 64px; padding: 72px 0; } @media (max-width: 1199px) { [data-section="coverage"], [data-section="faq"] { gap: 48px; padding: 72px 24px 48px; } [data-section="proof"], [data-section="localCoverage"], [data-section="addOns"], [data-section="partnersSection"] { gap: 48px; padding: 72px 24px; } } @media (max-width: 809px) { [data-section="coverage"], [data-section="faq"] { gap: 32px; padding: 72px 16px 48px; } [data-section="proof"], [data-section="localCoverage"], [data-section="addOns"], [data-section="partnersSection"] { gap: 32px; padding: 72px 16px; } } /* ---------- Heading block (tag + title + description) ---------- */ :is([data-section="coverage"], [data-section="proof"], [data-section="localCoverage"], [data-section="addOns"], [data-section="partnersSection"], [data-section="faq"]) .hc-head { display: flex; flex-direction: column; align-items: flex-start; justify-content: center; gap: 24px; width: 100%; max-width: 480px; } :is([data-section="coverage"], [data-section="proof"], [data-section="localCoverage"], [data-section="addOns"], [data-section="partnersSection"], [data-section="faq"]) .hc-head__tag { display: flex; flex-direction: row; align-items: center; gap: 8px; width: min-content; } :is([data-section="coverage"], [data-section="proof"], [data-section="localCoverage"], [data-section="addOns"], [data-section="partnersSection"], [data-section="faq"]) .hc-head__dot { flex: none; width: 14px; height: 8px; border-radius: 9999px; } :is([data-section="coverage"], [data-section="proof"], [data-section="localCoverage"], [data-section="addOns"], [data-section="partnersSection"], [data-section="faq"]) .hc-head__label { white-space: pre; } :is([data-section="coverage"], [data-section="proof"], [data-section="localCoverage"], [data-section="addOns"], [data-section="partnersSection"], [data-section="faq"]) .hc-head__text { display: flex; flex-direction: column; align-items: flex-start; justify-content: center; gap: 20px; width: 100%; } :is([data-section="coverage"], [data-section="proof"], [data-section="localCoverage"], [data-section="addOns"], [data-section="partnersSection"], [data-section="faq"]) .hc-head__title, :is([data-section="coverage"], [data-section="proof"], [data-section="localCoverage"], [data-section="addOns"], [data-section="partnersSection"], [data-section="faq"]) .hc-head__desc { width: 100%; white-space: pre-wrap; } /* ---------- Feature Card ---------- 24px/20px padding, 20px gap, 4px radius on #131517; 48px round icon well with a 1px #303131 hairline. The hairline is an inset shadow because live draws it with a pseudo-element: it must not grow the 48px box. No hover state: the live component has no hover variant. */ :is([data-section="coverage"], [data-section="proof"], [data-section="addOns"], [data-section="partnersSection"]) .hc-card { display: flex; flex-direction: column; align-items: flex-start; justify-content: flex-start; gap: 20px; width: 100%; padding: 24px 20px; background: var(--c-bg); border-radius: 4px; overflow: hidden; text-decoration: none; } :is([data-section="coverage"], [data-section="proof"], [data-section="addOns"], [data-section="partnersSection"]) .hc-card__top { display: flex; flex-direction: row; align-items: center; justify-content: space-between; width: 100%; } :is([data-section="coverage"], [data-section="proof"], [data-section="addOns"], [data-section="partnersSection"]) .hc-card__well { flex: none; display: flex; align-items: center; justify-content: center; width: 48px; height: 48px; border-radius: 999px; box-shadow: inset 0 0 0 1px var(--c-surface-2); overflow: clip; } :is([data-section="coverage"], [data-section="proof"], [data-section="addOns"], [data-section="partnersSection"]) .hc-card__icon { flex: none; width: 20px; height: 20px; opacity: .9; } :is([data-section="coverage"], [data-section="proof"], [data-section="addOns"], [data-section="partnersSection"]) .hc-card__text { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; width: 100%; } :is([data-section="coverage"], [data-section="proof"], [data-section="addOns"], [data-section="partnersSection"]) .hc-card__title, :is([data-section="coverage"], [data-section="proof"], [data-section="addOns"], [data-section="partnersSection"]) .hc-card__desc { width: 100%; white-space: pre-wrap; } /* ---------- Coverage: the 9 channel cards ---------- 5 equal columns on desktop, 2 on tablet, a 12px-gap stack on phone; grid rows are equal height. */ [data-section="coverage"] .coverage__grid { display: grid; width: 100%; gap: 16px; justify-content: start; grid-template-columns: repeat(5, minmax(50px, 1fr)); grid-auto-rows: minmax(0, 1fr); } @media (max-width: 1199px) { [data-section="coverage"] .coverage__grid { grid-template-columns: repeat(2, minmax(50px, 1fr)); } } @media (max-width: 809px) { [data-section="coverage"] .coverage__grid { display: flex; flex-direction: column; align-items: flex-start; justify-content: flex-start; gap: 12px; } } /* ===== sections/cta.css ===== */ /* CTA (#cta): dotted backdrop, dark copy panel and the illustration with the scan-report mock-up. Measured from research/refs/deltus/live/home/w1440 . w810 . w390 sections/15-cta.*. Desktop: a 16px-gap row, panel flex 1 (584px) + 480px illustration = 1080px. The mock-up is deliberately light-on-dark: all of its colours are literals, exactly as live. */ [data-section="cta"] { flex-direction: row; align-items: center; gap: 16px; padding: 72px 0 48px; border-radius: 2px; overflow: visible; } /* ---------- dotted backdrop ---------- Absolute against the section's padding box, flush right, 1.91666:1. Live runs a mirrored opacity loop (1 -> .5 -> 1, 2s each way, cubic-bezier(.44,0,.56,1), no repeat delay, paused off-screen). */ [data-section="cta"] .cta__dots { position: absolute; top: 0; right: 0; bottom: 0; width: auto; aspect-ratio: 1.9166666666666667 / 1; overflow: hidden; z-index: 0; animation: cta-dots-pulse 2s cubic-bezier(.44, 0, .56, 1) infinite alternate; } [data-section="cta"] .cta__dots img { width: 100%; height: 100%; object-fit: cover; object-position: center; } @keyframes cta-dots-pulse { from { opacity: 1; } to { opacity: .5; } } /* ---------- copy panel ---------- */ /* position: relative so the panel paints above the absolutely positioned dots, exactly as live */ [data-section="cta"] .cta__panel { position: relative; flex: 1 0 0px; width: 1px; align-self: stretch; height: auto; display: flex; flex-direction: column; align-items: flex-start; justify-content: center; gap: 32px; padding: 40px; background: var(--c-bg); border-radius: 4px; overflow: hidden; } [data-section="cta"] .cta__content { display: flex; flex-direction: column; align-items: flex-start; justify-content: center; gap: 32px; width: 100%; max-width: 400px; } [data-section="cta"] .cta__text { display: flex; flex-direction: column; align-items: flex-start; justify-content: flex-start; gap: 16px; width: 100%; overflow: hidden; } [data-section="cta"] .cta__tag { display: flex; flex-direction: row; align-items: center; gap: 8px; width: min-content; } [data-section="cta"] .cta__dot { flex: none; width: 14px; height: 8px; border-radius: 9999px; } [data-section="cta"] .cta__label { white-space: pre; } [data-section="cta"] .cta__title, [data-section="cta"] .cta__desc { width: 100%; white-space: pre-wrap; } /* ---------- illustration + scan-report window ---------- */ /* 2026-10-09 (T1 H7): at >=1200px the copy panel stretched to the row while the image kept its 360px ratio height, so the two cards ended ~6px apart. The image now stretches to the row too, never below 360px. */ [data-section="cta"] .cta__image { position: relative; flex: none; width: 480px; aspect-ratio: auto; height: auto; min-height: 360px; align-self: stretch; display: flex; flex-direction: column; align-items: flex-start; justify-content: flex-start; gap: 0; padding: 34px 0 0 60px; border-radius: 4px; overflow: clip; } [data-section="cta"] .cta__image > img { position: absolute; inset: 0; width: 100%; height: 100%; border-radius: 4px; object-fit: cover; object-position: left center; } [data-section="cta"] .scan { position: relative; flex: 1 0 0px; height: 1px; width: 100%; display: flex; flex-direction: column; align-items: flex-start; justify-content: flex-start; gap: 0; background: #f9fafb; border-top-left-radius: 8px; overflow: clip; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .7); } [data-section="cta"] .scan__bar-title { flex: none; display: flex; flex-direction: row; align-items: center; justify-content: flex-start; gap: 8px; width: 100%; padding: 11px 16px; background: #fff; box-shadow: inset 0 -1px 0 0 rgba(17, 25, 40, .08); } [data-section="cta"] .scan__mark { flex: none; display: flex; align-items: center; justify-content: center; width: 16px; height: 16px; background: #111928; border-radius: 4px; } [data-section="cta"] .scan__markdot { width: 6px; height: 6px; border-radius: 9999px; background: var(--c-green); } [data-section="cta"] .scan__name { font: 600 13px/1.3em var(--f-sans); letter-spacing: -.01em; color: #111928; white-space: pre; } [data-section="cta"] .scan__brand { font: 500 13px/1.3em var(--f-sans); letter-spacing: -.01em; color: #606773; white-space: pre; } [data-section="cta"] .scan__body { flex: 1 0 0px; height: 1px; width: 100%; display: flex; flex-direction: column; align-items: flex-start; justify-content: flex-start; gap: 14px; padding: 16px; } [data-section="cta"] .scan__chip { flex: none; display: flex; flex-direction: row; align-items: center; justify-content: flex-start; gap: 4px; padding: 2px 7px; border-radius: 9999px; background: rgba(17, 25, 40, .04); box-shadow: inset 0 0 0 1px rgba(17, 25, 40, .08); width: min-content; } [data-section="cta"] .scan__chip p { font: 500 10.5px/1.2em var(--f-sans); letter-spacing: -.01em; color: #606773; white-space: pre; } [data-section="cta"] .scan__headline { flex: none; display: flex; flex-direction: row; align-items: flex-end; justify-content: flex-start; gap: 10px; width: 100%; } /* the font shorthand resets font-feature-settings, so tabular figures are restated after it (live: 'tnum' on) */ [data-section="cta"] .scan__num { font: 700 38px/0.9em var(--f-sans); letter-spacing: -.04em; color: #111928; white-space: pre; font-feature-settings: "tnum" on; } [data-section="cta"] .scan__numlabel { flex: 1 0 0px; width: 1px; display: flex; flex-direction: column; align-items: flex-start; justify-content: flex-start; gap: 2px; } [data-section="cta"] .scan__numtitle { font: 600 12.5px/1.3em var(--f-sans); letter-spacing: -.01em; color: #111928; white-space: pre-line; } [data-section="cta"] .scan__numnote { font: 500 11.5px/1.3em var(--f-sans); letter-spacing: -.01em; color: #606773; white-space: pre-line; } [data-section="cta"] .scan__channels { flex: none; display: flex; flex-direction: column; align-items: flex-start; justify-content: flex-start; gap: 8px; width: 100%; padding: 12px 0 0; box-shadow: inset 0 1px 0 0 rgba(17, 25, 40, .08); } [data-section="cta"] .scan__chtitle { width: 100%; font: 500 10px/1.3em var(--f-sans); letter-spacing: .04em; text-transform: uppercase; color: #8c929c; } [data-section="cta"] .scan__ch { flex: none; display: flex; flex-direction: row; align-items: center; justify-content: flex-start; gap: 8px; width: 100%; } [data-section="cta"] .scan__chname { flex: none; width: 92px; font: 500 11.5px/1.3em var(--f-sans); letter-spacing: -.01em; color: #373e4b; white-space: pre-line; } [data-section="cta"] .scan__track { flex: 1 0 0px; width: 1px; height: 6px; display: flex; align-items: center; background: rgba(17, 25, 40, .07); border-radius: 9999px; overflow: clip; } [data-section="cta"] .scan__bar { height: 6px; border-radius: 9999px; } [data-section="cta"] .scan__chcount { flex: none; width: 18px; font: 600 11.5px/1.3em var(--f-sans); letter-spacing: -.01em; color: #111928; text-align: right; font-variant-numeric: tabular-nums; font-feature-settings: "tnum" on; } @media (max-width: 1199px) { [data-section="cta"] { padding: 72px 24px 48px; } [data-section="cta"] .cta__panel { align-self: auto; height: min-content; } [data-section="cta"] .cta__image { align-self: stretch; aspect-ratio: auto; min-height: 0; flex: 1 0 0px; width: 1px; padding: 38px 0 0 60px; } } @media (max-width: 809px) { [data-section="cta"] { flex-direction: column; padding: 72px 16px 48px; } [data-section="cta"] .cta__dots { order: 0; } [data-section="cta"] .cta__panel { order: 2; align-self: auto; flex: none; width: 100%; height: min-content; padding: 20px; } [data-section="cta"] .cta__image { order: 1; flex: none; width: 100%; align-self: auto; aspect-ratio: 1.3333333333333333 / 1; padding: 25px 0 0 44px; } /* 2026-10-09 (T1 H5): the scan window is shorter than its rows at 390px; fade the cut row out */ [data-section="cta"] .scan__body { -webkit-mask-image: linear-gradient(to bottom, #000 75%, transparent 100%); mask-image: linear-gradient(to bottom, #000 75%, transparent 100%); } } /* ===== sections/disputeForm.css ===== */ /* disputeForm — /dispute, live layer "Main" #hero (page module pdN0APKZ4.js, hash framer-nCuOS). Measured from the live site at 1440 / 810 / 390 (site/deltus/_shots/forms-legal/dispute-live-w*.tree.txt): hero max-width 760 / padding 48px 0 / gap 64 (tablet 56, phone 48 + 16px side padding) · Content gap 16 · the two cards are a 2-column grid (phone: one column) · cards radius 4 bg #131517 · form gap 20 (phone 16) · rows gap 16 (phone: stacked) · field gap 10 · input wrapper 46px radius 12 bg #232326 padding 16 · select 42px · textarea min-height 100. Form input variables mirror Framer's --framer-input-* tokens for this page. The page background comes from base.css (body = var(--c-bg-deep) #080a09), as live. */ [data-section="disputeForm"] { --field-bg: var(--c-surface); /* --framer-input-background #232326 */ --field-radius: 12px; --field-pad: 16px; --field-focus-border: rgba(255, 255, 255, .6); /* 2026-10-09 (T1 C2): was #303131 (live token), ~1.2:1 on the field, so keyboard focus was invisible */ --field-placeholder: var(--c-text-70); /* --framer-input-placeholder-color 70% white */ --field-icon: #999; /* --framer-input-icon-color */ width: 100%; max-width: 760px; margin: 0 auto; padding: 48px 0; gap: 64px; scroll-margin-top: 200px; } @media (min-width: 810px) and (max-width: 1199px) { [data-section="disputeForm"] { gap: 56px; } } @media (max-width: 809px) { [data-section="disputeForm"] { gap: 48px; padding: 48px 16px; } } /* ---------- dot-grid backdrop (live layer "Dots": 920px wide, aspect 1.17949, pulsing opacity 1 → .5) ---------- */ [data-section="disputeForm"] .dp__dots { position: absolute; top: 0; left: 0; z-index: 0; flex: none; width: 920px; aspect-ratio: 1.17949; height: auto; overflow: hidden; pointer-events: none; animation: dp-dots 2s cubic-bezier(.44, 0, .56, 1) infinite alternate; } [data-section="disputeForm"] .dp__dots img { width: 100%; height: 100%; object-fit: cover; object-position: center; } @keyframes dp-dots { from { opacity: 1; } to { opacity: .5; } } @media (prefers-reduced-motion: reduce) { [data-section="disputeForm"] .dp__dots { animation: none; opacity: .75; } } /* ---------- heading ---------- */ [data-section="disputeForm"] .dp__head { display: flex; flex-direction: column; align-items: flex-start; gap: 16px; width: 100%; overflow: hidden; position: relative; } [data-section="disputeForm"] .dp__tag { display: flex; align-items: center; gap: 8px; width: min-content; } [data-section="disputeForm"] .dp__dot { flex: none; width: 14px; height: 8px; border-radius: 9999px; background: var(--c-white); } [data-section="disputeForm"] .dp__tag p { white-space: pre; } [data-section="disputeForm"] h1 { width: 100%; white-space: pre-wrap; word-break: break-word; } [data-section="disputeForm"] .dp__intro { width: 100%; text-align: left; white-space: pre-wrap; word-break: break-word; } /* ---------- cards ---------- */ [data-section="disputeForm"] .dp__content { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 16px; width: 100%; overflow: clip; position: relative; } [data-section="disputeForm"] .dp__cards { display: grid; grid-template-columns: repeat(2, minmax(50px, 1fr)); grid-template-rows: repeat(1, minmax(0, 1fr)); grid-auto-rows: minmax(0, 1fr); justify-content: center; gap: 16px; width: 100%; overflow: clip; } [data-section="disputeForm"] .dp__card { display: flex; flex-direction: column; align-items: flex-start; align-self: start; gap: 24px; flex: none; width: 100%; height: 100%; padding: 24px 20px; background: var(--c-bg); border-radius: 4px; overflow: hidden; position: relative; } [data-section="disputeForm"] .dp__icon { display: flex; align-items: center; justify-content: center; flex: none; width: 64px; height: 64px; border-radius: 999px; border: 1px solid var(--c-surface-2); overflow: clip; } [data-section="disputeForm"] .dp__icon svg { width: 24px; height: 24px; opacity: .9; color: var(--c-white); } [data-section="disputeForm"] .dp__card-text { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; width: 100%; } [data-section="disputeForm"] .dp__card-title, [data-section="disputeForm"] .dp__card-desc { width: 100%; } [data-section="disputeForm"] .dp__card-title h5, [data-section="disputeForm"] .dp__card-desc p { width: 100%; white-space: pre-wrap; word-break: break-word; } [data-section="disputeForm"] .dp__card-desc a { color: var(--c-text-80); text-decoration: underline; } [data-section="disputeForm"] .dp__card-desc a:hover { color: var(--c-white); } /* the form card is a full-width card with its own padding */ [data-section="disputeForm"] .dp__card--form { flex: none; width: 100%; height: auto; align-self: auto; gap: 32px; padding: 32px 24px 40px; } [data-section="disputeForm"] .dp__card-head { display: flex; flex-direction: column; align-items: flex-start; justify-content: flex-end; gap: 8px; width: 100%; } @media (max-width: 809px) { [data-section="disputeForm"] .dp__cards { display: flex; flex-direction: column; align-items: center; justify-content: flex-start; } [data-section="disputeForm"] .dp__card { align-self: unset; height: min-content; flex: none; width: 100%; } } /* ---------- form ---------- */ [data-section="disputeForm"] .dp__form { display: flex; flex-direction: column; align-items: flex-start; gap: 20px; width: 100%; overflow: hidden; position: relative; } [data-section="disputeForm"] .dp__row { display: flex; align-items: center; justify-content: center; gap: 16px; width: 100%; overflow: clip; } [data-section="disputeForm"] .dp__field { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; flex: none; width: 100%; position: relative; } [data-section="disputeForm"] .dp__row > .dp__field { flex: 1 0 0; width: 1px; } [data-section="disputeForm"] .dp__label { flex: none; width: auto; } [data-section="disputeForm"] .dp__label p { white-space: pre; } @media (max-width: 809px) { [data-section="disputeForm"] .dp__form { gap: 16px; } [data-section="disputeForm"] .dp__row { flex-direction: column; } [data-section="disputeForm"] .dp__row > .dp__field { flex: none; width: 100%; } } /* input shells: Framer's .framer-form-input-wrapper + .framer-form-text-input */ [data-section="disputeForm"] .dp__wrap { display: flex; align-items: center; flex: none; width: 100%; height: 46px; padding: 0 var(--field-pad); /* 2026-10-09 (T1 C1/D1): vertical padding left the input 14px tall and clipped descenders */ background: var(--field-bg); border-radius: var(--field-radius); overflow: hidden; position: relative; } [data-section="disputeForm"] .dp__wrap::after { content: ""; pointer-events: none; box-sizing: border-box; position: absolute; top: 0; left: 0; width: 100%; height: 100%; border: 0 solid var(--field-focus-border); border-radius: inherit; } [data-section="disputeForm"] .dp__wrap:focus-within::after { border-width: 1px; } [data-section="disputeForm"] .dp__wrap input, [data-section="disputeForm"] .dp__wrap textarea, [data-section="disputeForm"] .dp__wrap select { flex: 1; width: 100%; min-width: 0; height: 100%; padding: 0; margin: 0; font: 400 16px/1.2em var(--f-display); letter-spacing: 0; color: var(--c-white); background: none; border: none; overflow: hidden; } [data-section="disputeForm"] .dp__wrap input { text-overflow: ellipsis; white-space: nowrap; } [data-section="disputeForm"] .dp__wrap input:focus-visible, [data-section="disputeForm"] .dp__wrap textarea:focus-visible, [data-section="disputeForm"] .dp__wrap select:focus-visible { outline: none; } [data-section="disputeForm"] .dp__wrap input::placeholder, [data-section="disputeForm"] .dp__wrap textarea::placeholder { color: var(--field-placeholder); } /* textarea: the wrapper has no padding, the field carries it (Framer .framer-form-textarea-input-type) */ [data-section="disputeForm"] .dp__wrap--textarea { height: auto; min-height: 100px; padding: 0; } [data-section="disputeForm"] .dp__wrap--textarea textarea { display: flex; width: 100%; height: auto; padding: var(--field-pad); min-height: inherit; max-height: inherit; white-space: break-spaces; resize: vertical; overflow: hidden auto; } [data-section="disputeForm"] .dp__wrap--textarea textarea::-webkit-resizer { background: url("data:image/svg+xml,") no-repeat; } /* select: 42px tall, 16px of room on the right for the caret drawn by ::before */ [data-section="disputeForm"] .dp__wrap--select { display: block; height: 42px; padding: 0 var(--field-pad) 0 0; } [data-section="disputeForm"] .dp__wrap--select select { display: inline-block; height: 42px; padding: 12px var(--field-pad); appearance: none; -webkit-appearance: none; } [data-section="disputeForm"] .dp__wrap--select select:required:invalid { color: var(--c-text-70); } [data-section="disputeForm"] .dp__wrap--select select option { color: #000; } [data-section="disputeForm"] .dp__wrap--select::before { content: ""; box-sizing: content-box; display: block; pointer-events: none; position: absolute; top: 0; bottom: 0; right: 0; width: 16px; padding: 12px 16px; padding-left: 10px; background-color: var(--field-icon); -webkit-mask-image: url("data:image/svg+xml,"); mask-image: url("data:image/svg+xml,"); -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-size: 16px; mask-size: 16px; -webkit-mask-position: 10px; mask-position: 10px; } [data-section="disputeForm"] .dp__wrap--select::after { content: none; } /* ---------- submit button: the live "Form Button" (LfcphVkGA) ---------- */ [data-section="disputeForm"] .dp__submit { position: relative; flex: none; width: auto; } [data-section="disputeForm"] .dp__btn { display: flex; flex-direction: row; align-items: center; justify-content: center; gap: 0; width: min-content; height: min-content; padding: 8px 12px; background: var(--c-white); border: 0; border-radius: 8px; box-shadow: none; opacity: 1; cursor: pointer; position: relative; transition: box-shadow .2s var(--ease-appear), background-color .2s var(--ease-appear), opacity .2s var(--ease-appear); } [data-section="disputeForm"] .dp__btn-label { flex: none; width: auto; white-space: pre; text-align: start; -webkit-user-select: none; user-select: none; } [data-section="disputeForm"] .dp__btn:hover { box-shadow: 0 0 0 2px rgba(255, 255, 255, .5); } [data-section="disputeForm"] .dp__btn:active { box-shadow: 0 0 0 2px rgba(255, 255, 255, .7); } [data-section="disputeForm"] .dp__btn[data-state="loading"], [data-section="disputeForm"] .dp__btn[data-state="success"], [data-section="disputeForm"] .dp__btn[data-state="error"], [data-section="disputeForm"] .dp__btn[data-state="disabled"] { cursor: default; box-shadow: none; } [data-section="disputeForm"] .dp__btn[data-state="disabled"] { opacity: .5; } [data-section="disputeForm"] .dp__btn[data-state="error"] { background: rgba(255, 34, 68, .15); } [data-section="disputeForm"] .dp__btn[data-state="error"] .dp__btn-label { color: rgb(255, 34, 68); } [data-section="disputeForm"] .dp__btn[data-state="loading"] .dp__btn-label { display: none; } /* spinner: a conic arc masked to a ring, rotating once a second (live Form Button "Spinner" / "Conic") */ [data-section="disputeForm"] .dp__spinner { display: none; } [data-section="disputeForm"] .dp__btn[data-state="loading"] .dp__spinner { display: block; flex: none; width: 20px; aspect-ratio: 1; height: auto; overflow: hidden; position: relative; -webkit-mask: url("/assets/img/pGiXYozQ3mE4cilNOItfe2L2fUA.svg") alpha no-repeat center / cover; mask: url("/assets/img/pGiXYozQ3mE4cilNOItfe2L2fUA.svg") alpha no-repeat center / cover; } [data-section="disputeForm"] .dp__spinner-arc { position: absolute; inset: 0; display: block; background: conic-gradient(from 0deg at 50% 50%, rgb(0, 0, 0) 7.208614864864882deg, rgba(0, 0, 0, .7) 342deg); animation: dp-spin 1s linear infinite; } [data-section="disputeForm"] .dp__spinner-cap { position: absolute; top: 0; left: 50%; transform: translateX(-50%); display: block; width: 2px; aspect-ratio: 1; height: auto; background: var(--c-white); border-radius: 1px; } @keyframes dp-spin { to { transform: rotate(360deg); } } @media (prefers-reduced-motion: reduce) { [data-section="disputeForm"] .dp__spinner-arc { animation-duration: 2s; } } /* ---------- spam trap (live: absolutely positioned, scaled to nothing, never focusable) ---------- */ [data-section="disputeForm"] .dp__trap { position: absolute; transform: scale(0); } /* Form status line under the button: shown only when a submit fails (mountForm in contactForm.js). */ [data-section="disputeForm"] .dp__status { margin: 12px 0 0; color: var(--c-text-70, rgba(255,255,255,.7)); } [data-section="disputeForm"] .dp__status[hidden] { display: none; } /* ===== sections/faq.css ===== */ /* FAQ (#faq): heading plus the two-column accordion. Measured from research/refs/deltus/live/home/w1440 . w810 . w390 sections/14-faq.* and from the live page driven with Playwright (tools/deltus_homec_faqprobe.mjs, 2026-10-05): closed card 53.59px = 18 + 17.59 + 18 open card 132.59px = 18 + 17.59 + 16 + 63 + 18 dot 8px round: #232326 closed, #303131 closed+hover, #f19447 open (card ground never changes) several items can be open at once Framer morphs the height with the same layout spring as the Button variants (bounce .2, duration .4s), so this reuses tokens.css --spring-btn rather than redefining the curve. */ /* two equal columns with a 16px gutter; each column centres its items and clips, exactly as live */ [data-section="faq"] .faq__cols { display: flex; flex-direction: row; align-items: flex-start; justify-content: flex-start; gap: 16px; width: 100%; } /* overflow: clip is live. overflow-clip-margin pushes the clip edge out by the 32px the appear effect starts from: without it the last card in a column is only 40% inside the clip rect, so the IntersectionObserver in motion.js (threshold .5) never fires and that card stays invisible. */ [data-section="faq"] .faq__col { flex: 1 0 0px; width: 1px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; overflow: clip; overflow-clip-margin: 32px; } /* ---------- one accordion item ---------- */ [data-section="faq"] .faq__item { display: flex; flex-direction: column; align-items: center; justify-content: flex-start; width: 100%; padding: 18px 16px; background: var(--c-bg); border-radius: 4px; overflow: hidden; } [data-section="faq"] .faq__q { display: flex; flex-direction: row; align-items: center; justify-content: center; gap: 10px; width: 100%; cursor: pointer; text-align: left; } /* the question uses the live text preset jx9uun = tokens.css .t-button */ [data-section="faq"] .faq__title { flex: 1 0 0px; width: 1px; white-space: pre-wrap; overflow-wrap: break-word; } [data-section="faq"] .faq__icon { flex: none; display: flex; align-items: center; justify-content: center; width: 16px; height: 16px; } [data-section="faq"] .faq__dot { width: 8px; height: 8px; border-radius: 100%; background: var(--c-surface); transition: background-color .4s var(--spring-btn); } [data-section="faq"] .faq__q:hover .faq__dot { background: var(--c-surface-2); } [data-section="faq"] .faq__item[data-open] .faq__dot { background: var(--c-orange); } /* the answer: a 0fr -> 1fr grid row, so the card height springs open and closed like the live layout animation. The 16px that live gets from the card's row-gap lives on the answer here, so a closed card is exactly padding + question tall. */ [data-section="faq"] .faq__panel { display: grid; grid-template-rows: 0fr; width: 100%; transition: grid-template-rows .4s var(--spring-btn); } [data-section="faq"] .faq__item[data-open] .faq__panel { grid-template-rows: 1fr; } /* visibility keeps the collapsed answer out of the accessibility tree (live does not render it at all when closed); it is delayed by the 0.4s collapse so the text stays on screen while the card springs shut. */ [data-section="faq"] .faq__panelinner { overflow: hidden; visibility: hidden; transition: visibility 0s linear .4s; } [data-section="faq"] .faq__item[data-open] .faq__panelinner { visibility: visible; transition-delay: 0s; } [data-section="faq"] .faq__a { padding-top: 16px; width: 100%; white-space: pre-wrap; } /* tablet and phone: live switches the FAQ Accordions component to its Mobile variant — the two columns stack with the same 10px gap, and every item is full width. */ @media (max-width: 1199px) { [data-section="faq"] .faq__cols { flex-direction: column; gap: 10px; } [data-section="faq"] .faq__col { flex: none; width: 100%; } } /* ===== sections/features.css ===== */ /* features section (live layer "Features", id #features). Owner: home-a. Heading + three "Content Card" (h3PijSECn) cards. Values measured from research/refs/deltus/live/home/w1440|w810|w390/sections/04-features.*. */ [data-section="features"] { justify-content: center; align-items: flex-start; width: 100%; max-width: var(--content-max); margin: 0 auto; padding: 72px 0; gap: 64px; scroll-margin-top: 40px; /* the live page wrapper (.framer-72rtr7, overflow:clip) is what crops the 920px dot grid - see agents/home-a.md */ overflow: clip; } @media (max-width: 1199px) { [data-section="features"] { padding: 72px 24px; gap: 48px; } } @media (max-width: 809px) { [data-section="features"] { padding: 72px 16px; gap: 32px; } } /* dot grid: 920x780, pinned top-right, appears (y 40) then pulses 1 -> .5 (Framer loop, mirror, 2s) */ .ft__dots { position: absolute; top: 0; right: 0; z-index: 0; width: 920px; height: 780px; overflow: hidden; } .ft__dots-img { width: 100%; height: 100%; animation: ft-dots 2s cubic-bezier(.44, 0, .56, 1) infinite alternate; } .ft__dots-img img { width: 100%; height: 100%; object-fit: cover; } @keyframes ft-dots { from { opacity: 1; } to { opacity: .5; } } @media (prefers-reduced-motion: reduce) { .ft__dots-img { animation: none; } } .ft__heading { position: relative; display: flex; flex-direction: column; justify-content: center; align-items: flex-start; gap: 24px; width: 100%; max-width: 480px; } .ft__tag { display: flex; align-items: center; gap: 8px; width: min-content; } .ft__tag p { white-space: pre; } .ft__tag-dot { flex: none; width: 14px; height: 8px; border-radius: 9999px; background: var(--c-gold); } .ft__text { display: flex; flex-direction: column; justify-content: center; align-items: flex-start; gap: 20px; width: 100%; } .ft__text h2, .ft__text p { width: 100%; } /* ---------- the three cards ---------- */ .ft__cards { position: relative; display: flex; justify-content: center; align-items: flex-start; gap: 24px; width: 100%; } @media (max-width: 809px) { .ft__cards { flex-direction: column; } } .ft-card { display: flex; flex-direction: column; align-items: flex-start; gap: 0; flex: 1 1 0; min-width: 0; overflow: hidden; background: var(--c-bg); border-radius: 4px; } @media (max-width: 809px) { .ft-card { flex: none; width: 100%; } } .ft-card__image { position: relative; display: flex; flex-direction: column; justify-content: center; align-items: center; width: 100%; aspect-ratio: 1.45763; overflow: clip; } .ft-card__shot { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; } .ft-chart { position: relative; display: flex; flex-direction: column; justify-content: center; align-items: flex-start; gap: 10px; width: 72%; height: 66%; padding: 12px 14px; overflow: clip; background: #f3f4f2; border-radius: 6px; box-shadow: 0 8px 24px rgba(0, 0, 0, .18); } .ft-chart::after { content: ""; position: absolute; inset: 0; border: 1px solid rgba(255, 255, 255, .6); border-radius: inherit; pointer-events: none; } .ft-chart__caption { width: 100%; font: 600 11px/1.3em var(--f-sans); letter-spacing: -.01em; color: #111928; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; } /* donut (card 1) */ .ft-donut { display: flex; align-items: center; gap: 10px; width: 100%; } .ft-donut__ring { display: flex; flex-direction: column; justify-content: center; align-items: center; flex: none; width: 54px; height: 54px; border-radius: 9999px; } .ft-donut__hole { display: flex; flex-direction: column; justify-content: center; align-items: center; flex: none; width: 38px; height: 38px; border-radius: 9999px; background: #f3f4f2; } .ft-donut__hole p { font: 700 11.5px/1.3em var(--f-sans); letter-spacing: -.01em; color: #111928; white-space: pre; font-variant-numeric: tabular-nums; font-feature-settings: "tnum" on; } .ft-legend { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; flex: 1 1 0; min-width: 0; } .ft-legend__row { display: flex; align-items: center; gap: 6px; width: 100%; } .ft-legend__dot { flex: none; width: 7px; height: 7px; border-radius: 9999px; } .ft-legend__text { flex: 1 1 0; min-width: 0; font: 500 11px/1.3em var(--f-sans); letter-spacing: -.01em; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; } .ft-legend__note { width: 100%; font: 500 10.5px/1.3em var(--f-sans); letter-spacing: -.01em; color: #8c929c; font-variant-numeric: tabular-nums; font-feature-settings: "tnum" on; } /* timeline (card 2) and bars (card 3) */ .ft-timeline { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; width: 100%; } .ft-track { display: flex; align-items: center; width: 100%; height: 8px; border-radius: 9999px; background: #11192814; overflow: clip; } .ft-track__fill { flex: 1 1 0; height: 8px; border-radius: 9999px; } .ft-timeline__ends { display: flex; justify-content: space-between; align-items: center; width: 100%; } .ft-timeline__ends p { font: 500 10.5px/1.3em var(--f-sans); letter-spacing: -.01em; color: #606773; white-space: pre; } .ft-median { display: flex; justify-content: flex-start; align-items: flex-end; gap: 6px; width: 100%; } .ft-median__value { font: 700 18px/1em var(--f-sans); letter-spacing: -.03em; color: #111928; white-space: pre; font-variant-numeric: tabular-nums; font-feature-settings: "tnum" on; } .ft-median__unit { flex: 1 1 0; min-width: 0; font: 500 10.5px/1.3em var(--f-sans); letter-spacing: -.01em; color: #606773; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; } .ft-bar { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; width: 100%; } .ft-bar__label { display: flex; align-items: center; gap: 8px; width: 100%; } .ft-bar__name { flex: 1 1 0; min-width: 0; font: 500 10.5px/1.3em var(--f-sans); letter-spacing: -.01em; color: #606773; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; } .ft-bar__value { font: 700 11px/1.3em var(--f-sans); letter-spacing: -.01em; color: #111928; white-space: pre; font-variant-numeric: tabular-nums; font-feature-settings: "tnum" on; } .ft-bar .ft-track__fill { flex: none; } /* card body */ .ft-card__body { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; width: 100%; padding: 32px 24px; background: var(--c-bg); } .ft-card__heading { display: flex; align-items: center; gap: 12px; width: 100%; } .ft-card__bar { flex: none; width: 8px; height: 14px; border-radius: 9999px; background: var(--c-gold); } .ft-card__heading h4 { flex: 1 1 0; min-width: 0; } .ft-card__text { width: 100%; } /* ===== sections/footer.css ===== */ /* footer — live Framer component "Footer" (FcRdbUGhW), layers "Desktop", "Tablet", "Mobile". Owner: chrome. Every rule is scoped under [data-section="footer"]. Measured on the live site 2026-10-05 (live/home/w1440|w810|w390/sections/.styles.json): desktop (>=1200px): height 336.594px, padding 48px 0, container 1080px max with 32px side padding, info 264px wide, menu gap 72px, columns 128px tablet (810-1199): same, container side padding 24px, menu gap 40px mobile (<=809px): container stacks, gap 48px, info gap 32px, columns wrap two-up with a 40px gap */ [data-section="footer"] { justify-content: flex-start; padding: 48px 0; background: var(--c-bg); /* #131517 */ } [data-section="footer"] .footer__container { position: relative; display: flex; flex-direction: row; align-items: flex-start; justify-content: space-between; width: 100%; max-width: var(--content-max); padding: 0; /* 2026-10-09 (T1 S17): was 32px, which indented the footer 32px from every section above it at >=1200px */ } /* ---------- left: logo, description, copyright ---------- */ [data-section="footer"] .footer__info { display: flex; flex: 1 0 0; width: 1px; max-width: 264px; align-self: stretch; flex-direction: column; align-items: flex-start; justify-content: space-between; } [data-section="footer"] .footer__desc { display: flex; flex: none; flex-direction: column; align-items: flex-start; gap: 16px; width: 100%; } [data-section="footer"] .footer__logo { display: flex; flex: none; flex-direction: row; align-items: center; justify-content: flex-start; gap: 8px; width: 100%; height: 32px; border-radius: 6px; text-decoration: none; } [data-section="footer"] .footer__mark { display: block; flex: none; width: 20px; height: 20px; color: var(--c-white); } [data-section="footer"] .footer__mark svg { width: 20px; height: 20px; } [data-section="footer"] .footer__wordmark { flex: none; font: 500 16px/16px var(--f-display); letter-spacing: -.02em; color: var(--c-white); white-space: pre; } [data-section="footer"] .footer__tagline, [data-section="footer"] .footer__copy { flex: none; width: 100%; font: 400 14px/150% var(--f-display); letter-spacing: -.02em; color: var(--c-text-80); white-space: pre-wrap; word-break: break-word; } /* ---------- right: the link columns ---------- */ [data-section="footer"] .footer__menu { display: flex; flex: none; flex-direction: row; align-items: flex-start; justify-content: flex-start; gap: 72px; width: min-content; } [data-section="footer"] .footer__col { display: flex; flex: none; flex-direction: column; align-items: flex-start; justify-content: flex-start; gap: 16px; width: 128px; max-width: 172px; } /* Live text preset jx9uun: Host Grotesk 500 16px/110%, -0.04em, white — not tokens.css's .t-button, which currently says Inter 600. See agents/chrome.md for the proposed token fix. */ [data-section="footer"] .footer__col-title { width: 100%; font: 500 16px/110% var(--f-display); letter-spacing: -.04em; color: var(--c-white); white-space: pre-wrap; } [data-section="footer"] .footer__items { display: flex; flex: none; flex-direction: column; align-items: flex-start; justify-content: flex-start; gap: 12px; width: 100%; } [data-section="footer"] .footer__items li { flex: none; width: 100%; font: 400 14px/150% var(--f-display); letter-spacing: -.02em; color: var(--c-text-80); white-space: pre-wrap; word-break: break-word; } [data-section="footer"] .footer__items a { color: inherit; } [data-section="footer"] .footer__items a:hover { color: var(--c-white); } /* live: instant, no transition */ /* ---------- tablet ---------- */ @media (max-width: 1199.98px) { [data-section="footer"] .footer__container { padding: 0 24px; } [data-section="footer"] .footer__menu { gap: 40px; } } /* ---------- phone ---------- */ @media (max-width: 809.98px) { [data-section="footer"] .footer__container { flex-direction: column; align-items: flex-start; justify-content: flex-start; gap: 48px; } [data-section="footer"] .footer__info { flex: none; width: 100%; max-width: none; align-self: auto; justify-content: flex-start; gap: 32px; } [data-section="footer"] .footer__menu { flex-wrap: wrap; gap: 40px; width: 100%; } /* 2026-10-09 (T1 S17): the copyright sat between the tagline and the link columns once the footer stacked. Unwrapping .footer__info lets the copyright be ordered after the menu, at the very bottom. */ [data-section="footer"] .footer__info { display: contents; } [data-section="footer"] .footer__desc { order: 1; } [data-section="footer"] .footer__menu { order: 2; } [data-section="footer"] .footer__copy { order: 3; } } /* ===== sections/hero.css ===== */ /* hero section (live layer "Hero", id #hero). Owner: home-a. Every value measured from research/refs/deltus/live/home/w1440|w810|w390/sections/02-hero.styles.json and the live Framer rules for .framer-1e8i6tz … .framer-1c9eytv. Breakpoints: desktop >=1200 - tablet 810-1199 - phone <=809. */ [data-section="hero"] { width: 100%; max-width: 920px; margin: 0 auto; padding: 48px 0; gap: 32px; scroll-margin-top: 40px; /* The live page wrapper (.framer-72rtr7) is overflow:clip, which is what crops the 920px dot grid below 920px of viewport. We have no page wrapper, so the hero clips it itself - same pixels, see agents/home-a.md. */ overflow: clip; } @media (max-width: 1199px) { [data-section="hero"] { padding: 48px 24px; } } @media (max-width: 809px) { [data-section="hero"] { padding: 48px 16px; } } /* ---------- dot grid: 920px wide, pinned top-left, pulsing 1 -> .5 (Framer loop, mirror, 2s) ---------- */ .hero__dots { position: absolute; top: 0; left: 0; z-index: 0; width: 920px; aspect-ratio: 1.17949; height: auto; overflow: hidden; animation: hero-dots 2s cubic-bezier(.44, 0, .56, 1) infinite alternate; } .hero__dots img { width: 100%; height: 100%; object-fit: cover; } @keyframes hero-dots { from { opacity: 1; } to { opacity: .5; } } @media (prefers-reduced-motion: reduce) { .hero__dots { animation: none; } } /* ---------- header column ---------- */ .hero__header { position: relative; display: flex; flex-direction: column; align-items: center; gap: 64px; width: 100%; max-width: 900px; } .hero__heading { display: flex; flex-direction: column; align-items: flex-start; gap: 40px; width: 100%; max-width: 800px; } .hero__intro { display: flex; flex-direction: column; align-items: flex-start; gap: 24px; width: 100%; max-width: 640px; } @media (max-width: 1199px) { .hero__header { gap: 48px; } } @media (max-width: 809px) { .hero__header { gap: 32px; } } .hero__tag { display: flex; align-items: center; gap: 8px; width: min-content; } .hero__tag p { white-space: pre; } .hero__tag-dot { flex: none; width: 14px; height: 8px; border-radius: 9999px; background: var(--c-white); } .hero__text { display: flex; flex-direction: column; align-items: flex-start; gap: 20px; width: 100%; } .hero__text h1 { width: 100%; white-space: pre-wrap; } .hero__text p { width: 100%; white-space: pre-wrap; } /* per-word appear spans (see hero.js) */ .hero__text h1 > span, .hero__text p > span { display: inline-block; } .hero__cta { display: flex; flex-direction: column; align-items: flex-start; gap: 14px; width: 100%; } .hero__actions { display: flex; align-items: flex-start; gap: 8px; width: min-content; } .hero__trust { width: 100%; font: 400 14px/150% var(--f-display); letter-spacing: -.02em; color: var(--c-text-70); } /* The Button matches base.css .btn exactly (padding 8px 12px, radius 8, Host Grotesk 500 14px/120%). The live buttons DO have a hover state, which base.css does not carry yet - exact code in agents/home-a.md. */ /* ---------- hero image + mockup ---------- */ .hero__image { position: relative; display: flex; align-items: flex-end; gap: 0; width: 100%; aspect-ratio: 1.875; border-radius: 4px; overflow: clip; } .hero__shot { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; border-radius: 4px; } .hero__offset { position: relative; flex: none; width: 5%; height: 10px; } /* mockup chrome ------------------------------------------------------------------ */ .hero-win { position: relative; display: flex; flex-direction: column; align-items: flex-start; gap: 0; width: 86%; height: 90%; overflow: clip; background: #f9fafb; border-radius: 8px 8px 0 0; } .hero-win::after { content: ""; position: absolute; inset: 0; border: 1px solid #ffffffb3; border-radius: inherit; pointer-events: none; } .hero-win__bar { position: relative; display: flex; justify-content: space-between; align-items: center; width: 100%; padding: 11px 16px; background: #fff; } .hero-win__bar::after { content: ""; position: absolute; inset: 0; border-bottom: 1px solid #11192814; pointer-events: none; } @media (max-width: 809px) { .hero-win__bar { padding: 9px 12px; } } .hero-win__title { display: flex; align-items: center; gap: 8px; width: min-content; } .hero-win__mark { display: flex; align-items: center; justify-content: center; flex: none; width: 16px; height: 16px; border-radius: 4px; background: #111928; } .hero-win__mark-dot { width: 6px; height: 6px; border-radius: 9999px; background: var(--c-green); } .hero-win__name { font: 600 13px/1.3em var(--f-sans); letter-spacing: -.01em; color: #111928; white-space: pre; } .hero-win__brand { font: 500 13px/1.3em var(--f-sans); letter-spacing: -.01em; color: #606773; white-space: pre; } .hero-win__meta { display: flex; align-items: center; gap: 10px; width: min-content; } .hero-win__scan { display: flex; align-items: center; gap: 6px; } .hero-win__scan p { font: 500 11px/1.3em var(--f-sans); letter-spacing: -.01em; color: #606773; white-space: pre; } .hero-win__badge { position: relative; display: flex; align-items: center; gap: 4px; width: min-content; padding: 2px 7px; border-radius: 9999px; background: #1119280a; } .hero-win__badge::after { content: ""; position: absolute; inset: 0; border: 1px solid #11192814; border-radius: inherit; pointer-events: none; } .hero-win__badge p { font: 500 10.5px/1.2em var(--f-sans); letter-spacing: -.01em; color: #606773; white-space: pre; } /* dots and status chips (shared inside the mockup) ------------------------------- */ .hdot { flex: none; width: 6px; height: 6px; border-radius: 9999px; } .hdot--green { background: var(--c-green); } .hdot--orange { background: var(--c-orange); } .hdot--blue { background: var(--c-blue); } .hdot--gold { background: var(--c-gold); } .hdot--pink { background: var(--c-pink); } .hchip { display: inline-flex; align-items: center; gap: 5px; width: min-content; padding: 3px 8px 3px 7px; border-radius: 9999px; background: #1119280d; } .hchip__label { font: 500 11px/1.2em var(--f-sans); letter-spacing: -.01em; color: #373e4b; white-space: pre; } /* mockup body ------------------------------------------------------------------- */ .hero-win__body { display: flex; align-items: flex-start; gap: 12px; flex: 1 1 0; min-height: 0; width: 100%; padding: 14px; } @media (max-width: 809px) { .hero-win__body { padding: 10px; } } .hero-win__main { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; flex: 1 1 0; min-width: 0; } .hero-win__kpis { display: flex; align-items: flex-start; gap: 8px; width: 100%; } .hero-kpi { position: relative; display: flex; flex-direction: column; align-items: flex-start; gap: 4px; flex: 1 1 0; min-width: 0; padding: 10px 12px; background: #fff; border-radius: 6px; } .hero-kpi::after { content: ""; position: absolute; inset: 0; border: 1px solid #11192814; border-radius: inherit; pointer-events: none; } .hero-kpi__label { display: flex; align-items: center; gap: 6px; width: 100%; } .hero-kpi__label p { font: 500 11px/1.3em var(--f-sans); letter-spacing: -.01em; color: #606773; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; } .hero-kpi__value { font: 600 22px/1.1em var(--f-sans); letter-spacing: -.03em; color: #111928; font-variant-numeric: tabular-nums; font-feature-settings: "tnum" on; } .hero-win__list { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; width: 100%; } @media (max-width: 809px) { .hero-win__list { gap: 5px; } } .hero-win__head { display: flex; align-items: center; gap: 8px; width: 100%; padding: 0 12px; } .hero-col { font: 500 10px/1.3em var(--f-sans); letter-spacing: .04em; text-transform: uppercase; color: #8c929c; } .hero-col--link { flex: 1 1 0; min-width: 0; } .hero-col--channel { flex: none; width: 96px; } .hero-col--up { flex: none; width: 44px; } .hero-col--status { flex: none; width: 136px; } .hero-row { position: relative; display: flex; align-items: center; gap: 8px; width: 100%; padding: 8px 12px; background: #fff; border-radius: 6px; } .hero-row::after { content: ""; position: absolute; inset: 0; border: 1px solid #11192814; border-radius: inherit; pointer-events: none; } @media (max-width: 809px) { .hero-row { padding: 7px 10px; } } .hero-row__link { display: flex; flex-direction: column; align-items: flex-start; gap: 1px; flex: 1 1 0; min-width: 0; } .hero-row__title { width: 100%; font: 600 12.5px/1.3em var(--f-sans); letter-spacing: -.01em; color: #111928; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; } .hero-row__detail { width: 100%; font: 400 11px/1.3em var(--f-sans); letter-spacing: -.01em; color: #606773; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; } .hero-row__channel { flex: none; width: 96px; font: 500 12px/1.3em var(--f-sans); letter-spacing: -.01em; color: #606773; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; } .hero-row__up { flex: none; width: 44px; font: 500 12px/1.3em var(--f-sans); letter-spacing: -.01em; color: #111928; font-variant-numeric: tabular-nums; font-feature-settings: "tnum" on; } .hero-row__status { display: flex; align-items: center; flex: none; width: 136px; } @media (max-width: 809px) { .hero-row__status { width: min-content; } } /* takedown ledger --------------------------------------------------------------- */ .hero-ledger { position: relative; display: flex; flex-direction: column; align-items: flex-start; gap: 0; flex: none; width: 224px; padding: 12px 14px; background: #fff; border-radius: 6px; } .hero-ledger::after { content: ""; position: absolute; inset: 0; border: 1px solid #11192814; border-radius: inherit; pointer-events: none; } @media (max-width: 1199px) { .hero-ledger { width: 200px; } } .hero-ledger__head { display: flex; justify-content: space-between; align-items: center; width: 100%; padding: 0 0 10px; } .hero-ledger__title { font: 600 12.5px/1.3em var(--f-sans); letter-spacing: -.01em; color: #111928; white-space: pre; } .hero-ledger__meta { font: 500 11px/1.3em var(--f-sans); letter-spacing: -.01em; color: #8c929c; white-space: pre; } .hero-ledger__entry { position: relative; display: flex; align-items: flex-start; gap: 10px; width: 100%; padding: 9px 0; } .hero-ledger__entry::after { content: ""; position: absolute; inset: 0; border-top: 1px solid #11192814; pointer-events: none; } .hero-ledger__marker { flex: none; width: 3px; height: 30px; border-radius: 3px; } .hero-ledger__marker--green { background: var(--c-green); } .hero-ledger__marker--orange { background: var(--c-orange); } .hero-ledger__marker--pink { background: var(--c-pink); } .hero-ledger__body { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; flex: 1 1 0; min-width: 0; } .hero-ledger__link { width: 100%; font: 600 12px/1.3em var(--f-sans); letter-spacing: -.01em; color: #111928; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; } .hero-ledger__status { width: 100%; font: 400 11px/1.3em var(--f-sans); letter-spacing: -.01em; color: #606773; } .hero-ledger__foot { position: relative; display: flex; justify-content: space-between; align-items: center; width: 100%; padding: 10px 0 0; } .hero-ledger__foot::after { content: ""; position: absolute; inset: 0; border-top: 1px solid #11192814; pointer-events: none; } .hero-ledger__foot-left { font: 500 11px/1.3em var(--f-sans); letter-spacing: -.01em; color: #606773; white-space: pre; } .hero-ledger__foot-right { font: 600 11px/1.3em var(--f-sans); letter-spacing: -.01em; color: #111928; white-space: pre; } /* 2026-10-09 (T1 H5): below 1200px the window is shorter than its rows, so the last visible row was cut through its text and status pill. Fade the bottom of the body out instead of a hard crop (the title bar stays sharp), and give the KPI labels a little more room so "Removed this month" is not truncated at 810px. */ @media (max-width: 1199px) { .hero-win__body { -webkit-mask-image: linear-gradient(to bottom, #000 72%, transparent 100%); mask-image: linear-gradient(to bottom, #000 72%, transparent 100%); } .hero-kpi { padding: 10px; } .hero-kpi__label { gap: 5px; } .hero-kpi__label p { font-size: 10.5px; } } /* columns the live site drops at tablet / phone */ @media (max-width: 1199px) { .hero-col--channel, .hero-row__channel { display: none; } } @media (max-width: 809px) { .hero-win__scan, .hero-win__kpis, .hero-win__head, .hero-row__up, .hero-ledger { display: none; } } /* ---------- four action cards ("Action card" BE0Kc14HI) ---------- */ .hero__cards { display: flex; align-items: center; gap: 40px; width: 100%; } @media (max-width: 1199px) { .hero__cards { gap: 32px; } } @media (max-width: 809px) { .hero__cards { flex-direction: column; gap: 32px; } } .hero-card { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; flex: 1 1 0; min-width: 0; } @media (max-width: 809px) { .hero-card { flex: none; width: 100%; } } .hero-card__title { display: flex; align-items: center; gap: 8px; width: 100%; } .hero-card__icon { flex: none; width: 16px; height: 16px; fill: none; stroke: var(--c-text-80); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; } .hero-card__title h6 { flex: 1 1 0; min-width: 0; font: 500 16px/110% var(--f-display); letter-spacing: -.04em; color: var(--c-white); } .hero-card__text { width: 100%; font: 400 14px/150% var(--f-display); letter-spacing: -.02em; color: var(--c-text-80); } /* ===== sections/howWeWork.css ===== */ /* howWeWork section (live layer "How we work", id #benefits). Owner: home-b. Every value measured from research/refs/deltus/live/home/w1440|w810|w390 and the live stylesheet (.framer-4i19r section, .framer-1vl8lc5 grid, Icon Card .framer-uUqBr). */ [data-section="howWeWork"] { width: 100%; max-width: var(--content-max); margin: 0 auto; align-items: flex-start; gap: 64px; padding: 72px 0; scroll-margin-top: 40px; } /* ---------- dot pattern (Framer "Dots", 920x780, pinned to the section's top-right) ---------- */ [data-section="howWeWork"] .hww__dots { position: absolute; top: 0; right: 0; z-index: 0; width: 920px; height: 780px; overflow: hidden; /* loop effect: opacity 1 -> .5, 2s tween, ease [.44,0,.56,1], repeatType "mirror", no delay */ animation: hww-dots 2s var(--ease-appear) infinite alternate; } [data-section="howWeWork"] .hww__dots img { width: 100%; height: 100%; object-fit: cover; } @keyframes hww-dots { from { opacity: 1; } to { opacity: .5; } } .no-motion [data-section="howWeWork"] .hww__dots { animation: none; } /* ---------- heading ---------- */ [data-section="howWeWork"] .hww__heading { position: relative; display: flex; flex-direction: column; align-items: flex-start; justify-content: center; gap: 24px; width: 100%; max-width: 480px; } [data-section="howWeWork"] .hww__tag { display: flex; align-items: center; gap: 8px; width: min-content; } [data-section="howWeWork"] .hww__tag p { white-space: pre; } [data-section="howWeWork"] .hww__indicator { flex: none; width: 14px; height: 8px; border-radius: 9999px; background: var(--c-violet); } [data-section="howWeWork"] .hww__text { display: flex; flex-direction: column; align-items: flex-start; justify-content: center; gap: 20px; width: 100%; } [data-section="howWeWork"] .hww__text h2, [data-section="howWeWork"] .hww__text p { width: 100%; word-break: break-word; } /* ---------- icon cards ---------- */ [data-section="howWeWork"] .hww__cards { position: relative; display: grid; grid-template-columns: repeat(3, minmax(50px, 1fr)); grid-auto-rows: minmax(0, 1fr); justify-content: center; gap: 16px; width: 100%; } [data-section="howWeWork"] .hww__cell { position: relative; place-self: start; width: 100%; height: 100%; } [data-section="howWeWork"] .hww__card { display: flex; flex-direction: column; align-items: flex-start; gap: 24px; width: 100%; height: 100%; padding: 24px 20px; border-radius: 4px; background: var(--c-bg); overflow: hidden; } [data-section="howWeWork"] .hww__icon { flex: none; display: flex; align-items: center; justify-content: center; width: 64px; height: 64px; border: 1px solid var(--c-surface-2); border-radius: 999px; overflow: clip; } [data-section="howWeWork"] .hww__icon svg { width: 24px; height: 24px; opacity: .9; color: var(--c-white); } [data-section="howWeWork"] .hww__card-text { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; width: 100%; } [data-section="howWeWork"] .hww__card-text h5, [data-section="howWeWork"] .hww__card-text p { width: 100%; word-break: break-word; } /* ---------- tablet 810-1199 ---------- */ @media (max-width: 1199px) { [data-section="howWeWork"] { gap: 48px; padding: 72px 24px; } [data-section="howWeWork"] .hww__cards { grid-template-columns: repeat(2, minmax(50px, 1fr)); } } /* ---------- phone <=809 ---------- */ @media (max-width: 809px) { [data-section="howWeWork"] { gap: 32px; padding: 72px 16px; } [data-section="howWeWork"] .hww__cards { grid-template-columns: repeat(1, minmax(50px, 1fr)); } [data-section="howWeWork"] .hww__cell { height: auto; } } /* ===== sections/localCoverage.css ===== */ /* Local coverage (element id #local-coverage): two icon points beside a marketplace panel. Measured from research/refs/deltus/live/home/w1440 . w810 . w390 sections/11-local-coverage.*. */ [data-section="localCoverage"] .lc-card { display: flex; flex-direction: row; align-items: flex-start; justify-content: flex-start; gap: 48px; width: 100%; padding: 40px; background: var(--c-bg); border-radius: 4px; overflow: clip; } /* ---------- left: the icon points ---------- */ [data-section="localCoverage"] .lc-points { flex: 1 0 0px; width: 1px; display: flex; flex-direction: column; align-items: flex-start; justify-content: flex-start; gap: 28px; } [data-section="localCoverage"] .lc-point { display: flex; flex-direction: row; align-items: flex-start; justify-content: flex-start; gap: 16px; width: 100%; } [data-section="localCoverage"] .lc-point__well { flex: none; display: flex; align-items: center; justify-content: center; width: 48px; height: 48px; border-radius: 999px; box-shadow: inset 0 0 0 1px var(--c-surface-2); overflow: clip; } [data-section="localCoverage"] .lc-point__icon { flex: none; width: 20px; height: 20px; opacity: .9; } [data-section="localCoverage"] .lc-point__text { flex: 1 0 0px; width: 1px; display: flex; flex-direction: column; align-items: flex-start; justify-content: flex-start; gap: 6px; } [data-section="localCoverage"] .lc-point__title, [data-section="localCoverage"] .lc-point__desc { width: 100%; white-space: pre-wrap; } /* ---------- right: the marketplace panel ---------- */ [data-section="localCoverage"] .lc-panel { flex: 1 0 0px; width: 1px; display: flex; flex-direction: column; align-items: flex-start; justify-content: flex-start; gap: 20px; padding: 32px; background: var(--c-surface); border-radius: 4px; } [data-section="localCoverage"] .lc-panel__label, [data-section="localCoverage"] .lc-panel__note { width: 100%; white-space: pre-wrap; } [data-section="localCoverage"] .lc-panel__chips { display: flex; flex-direction: row; flex-wrap: wrap; align-items: center; justify-content: flex-start; gap: 10px; width: 100%; } /* chip hairline is an inset shadow so the measured 39.8px height (10 + 19.8 + 10) is unchanged */ [data-section="localCoverage"] .lc-chip { display: flex; flex-direction: row; align-items: center; justify-content: center; width: min-content; padding: 10px 18px; border-radius: 100px; box-shadow: inset 0 0 0 1px var(--c-surface-2); } [data-section="localCoverage"] .lc-chip h5 { white-space: pre; } [data-section="localCoverage"] .lc-panel__divider { flex: none; width: 100%; height: 1px; background: var(--c-surface-2); } @media (max-width: 1199px) { [data-section="localCoverage"] .lc-card { gap: 32px; padding: 32px; } } @media (max-width: 809px) { [data-section="localCoverage"] .lc-card { flex-direction: column; gap: 28px; padding: 24px 20px; } [data-section="localCoverage"] .lc-points { flex: none; width: 100%; } [data-section="localCoverage"] .lc-panel { flex: none; width: 100%; padding: 24px 20px; } } /* ===== sections/nav.css ===== */ /* nav — live Framer component "Navigation" (xfh9lOiA3), layers "Desktop", "Mobile (Closed)", "Mobile (Open)". Owner: chrome. Every rule is scoped under [data-section="nav"]. Measured on the live site 2026-10-05 (live/home/w1440|w810|w390/sections/01-*.styles.json + a Playwright probe): desktop (>=1200px): height 64.797px, container 1080px max, padding 16px 0, gap 72px mobile (<1200px): height 64px, container padding 16px 24px, gap 40px, column open: container height = viewport height, links 18px, CTA full width Scroll behaviour, sampled live at y = 0 / 100 / 400 / 1200 / 4000: none at all. The bar is sticky at top 0 and its background, border, blur, transform and opacity never change. */ [data-section="nav"] { position: sticky; top: 0; z-index: 10; justify-content: center; background: var(--c-bg-deep); } /* Live draws the 1px bottom rule as an overlay (Framer's data-border ::after), so it costs no height: the bar measures 64.797px, not 65.797px. rgb(34, 34, 34) is a one-off on live, not a token. */ [data-section="nav"]::after { content: ""; position: absolute; inset: 0; box-sizing: border-box; border-bottom: 1px solid #222; pointer-events: none; } [data-section="nav"] .nav__container { position: relative; display: flex; flex-direction: row; align-items: center; justify-content: center; gap: 72px; width: 100%; max-width: var(--content-max); padding: 16px 0; } /* ---------- logo ---------- */ [data-section="nav"] .nav__bar { display: flex; flex: 1 0 0; width: 1px; /* live: flex-basis 0 with width 1px, so the two end columns share the free space */ flex-direction: column; align-items: center; justify-content: center; gap: 10px; } [data-section="nav"] .nav__logo { display: flex; flex: none; flex-direction: row; align-items: center; justify-content: flex-start; gap: 8px; width: 100%; height: 32px; text-decoration: none; } [data-section="nav"] .nav__mark { display: block; flex: none; width: 20px; height: 20px; color: var(--c-white); } [data-section="nav"] .nav__mark svg { width: 20px; height: 20px; } [data-section="nav"] .nav__wordmark { flex: none; font: 500 16px/16px var(--f-display); letter-spacing: -.02em; color: var(--c-white); white-space: pre; } /* ---------- links ---------- */ [data-section="nav"] .nav__links { display: flex; flex: none; flex-direction: row; align-items: center; justify-content: flex-start; gap: 32px; width: min-content; } [data-section="nav"] .nav__link { flex: none; font: 400 14px/150% var(--f-display); letter-spacing: -.02em; color: var(--c-text-80); white-space: pre; } [data-section="nav"] .nav__link a { color: inherit; } [data-section="nav"] .nav__link a:hover { color: var(--c-white); } /* live: instant, no transition */ /* ---------- CTA (live "Button" P90iAy18v, variant Primary) ---------- */ [data-section="nav"] .nav__cta { display: flex; flex: 1 0 0; width: 1px; flex-direction: row; align-items: center; justify-content: flex-end; } [data-section="nav"] .nav__btn { display: flex; flex: none; flex-direction: row; align-items: center; justify-content: center; gap: 0; width: min-content; padding: 8px 12px; border-radius: 8px; background: var(--c-white); text-decoration: none; } [data-section="nav"] .nav__btn-label { flex: none; font: 500 14px/120% var(--f-display); letter-spacing: -.02em; color: #08090a; text-align: center; white-space: pre; } /* ---------- hamburger (live "Hamburger" tvrMDEcEB, 31x31 here) ---------- Three 24x2 bars that become a 20px X. Live animates them with a physics spring (stiffness 500, damping 60, mass 1) -> overdamped, x(t) = 1 - 1.25e^-10t + 0.25e^-50t, settled at 713ms. The linear() below samples that curve; the cubic-bezier above it is the fallback for older browsers. */ [data-section="nav"] .nav__burger { display: none; position: relative; flex: none; width: 31px; height: 31px; overflow: hidden; cursor: pointer; } [data-section="nav"] .nav__burger-line { position: absolute; left: calc(50% - 12px); width: 24px; height: 2px; border-radius: 7px; background: var(--c-white); transition-property: top, left, width, opacity, transform; transition-duration: .713s; transition-timing-function: cubic-bezier(.2, .7, .3, 1); transition-timing-function: linear(0, 0.0566, 0.1669, 0.285, 0.3944, 0.4902, 0.5722, 0.6416, 0.6999, 0.7488, 0.7898, 0.8241, 0.8528, 0.8768, 0.8969, 0.9138, 0.9278, 0.9396, 0.9495, 0.9577, 0.9646, 0.9704, 0.9752, 0.9793, 0.9827, 0.9855, 0.9879, 0.9898, 0.9915, 0.9929, 0.994, 0.995, 0.9958, 0.9965, 0.9971, 0.9976, 0.998, 0.9983, 0.9986, 0.9988, 1); } [data-section="nav"] .nav__burger-line:nth-child(1) { top: 7px; } [data-section="nav"] .nav__burger-line:nth-child(2) { top: calc(50% - 1px); } [data-section="nav"] .nav__burger-line:nth-child(3) { top: calc(100% - 9px); } /* live: bottom 7px */ [data-section="nav"].is-open .nav__burger-line { top: calc(51.6129% - 1px); } [data-section="nav"].is-open .nav__burger-line:nth-child(1) { left: calc(50% - 10px); width: 20px; transform: rotate(45deg); } [data-section="nav"].is-open .nav__burger-line:nth-child(2) { left: calc(48.3871% - .5px); width: 1px; opacity: 0; } [data-section="nav"].is-open .nav__burger-line:nth-child(3) { left: calc(50% - 10px); width: 20px; transform: rotate(-45deg); } /* ---------- tablet + phone: the collapsed bar ---------- */ @media (max-width: 1199.98px) { [data-section="nav"] .nav__container { flex-direction: column; align-items: flex-start; justify-content: flex-start; gap: 40px; height: 64px; padding: 16px 24px; /* live: tween, 0.4s, cubic-bezier(.44, 0, .56, 1) — the same curve as --ease-appear */ transition: height .4s var(--ease-appear); } [data-section="nav"] .nav__bar { flex: none; flex-direction: row; width: 100%; } [data-section="nav"] .nav__logo { flex: 1 0 0; width: 1px; } [data-section="nav"] .nav__burger { display: block; } /* closed: the links and the CTA are not in the live DOM at all — display:none keeps them unreachable */ [data-section="nav"] .nav__links, [data-section="nav"] .nav__cta { display: none; } [data-section="nav"].is-open .nav__container { height: 100vh; height: 100dvh; } [data-section="nav"].is-open .nav__links { display: flex; flex-direction: column; align-items: flex-start; gap: 24px; width: min-content; } [data-section="nav"].is-open .nav__link { font: 500 18px/110% var(--f-display); letter-spacing: -.04em; } [data-section="nav"].is-open .nav__cta { display: flex; flex: none; justify-content: center; width: 100%; height: 33px; } [data-section="nav"].is-open .nav__btn { width: 100%; } } @media (prefers-reduced-motion: reduce) { [data-section="nav"] .nav__container, [data-section="nav"] .nav__burger-line { transition: none; } } /* ===== sections/notFoundPage.css ===== */ /* notFoundPage — /404, live layer "Main" #hero (hash framer-eaSJQ). Measured from the live site at 1440 / 810 / 390 (site/deltus/_shots/forms-legal/404-live-w*.tree.txt): hero max-width 920 / padding 48px 0 / gap 32 · Header max-width 900 gap 64 · Heading max-width 800 gap 40 · Container max-width 640 gap 24 · Text gap 20. The page background comes from base.css (body = var(--c-bg-deep) #080a09), as live. */ [data-section="notFoundPage"] { width: 100%; max-width: 920px; margin: 0 auto; padding: 48px 0; gap: 32px; scroll-margin-top: 40px; } @media (min-width: 810px) and (max-width: 1199px) { [data-section="notFoundPage"] { padding: 48px 24px; } } @media (max-width: 809px) { [data-section="notFoundPage"] { padding: 48px 16px; } } /* ---------- dot-grid backdrop (live layer "Dots": 920px wide, aspect 1.17949, pulsing opacity 1 → .5) ---------- */ [data-section="notFoundPage"] .nf__dots { position: absolute; top: 0; left: 0; z-index: 0; flex: none; width: 920px; aspect-ratio: 1.17949; height: auto; overflow: hidden; pointer-events: none; animation: nf-dots 2s cubic-bezier(.44, 0, .56, 1) infinite alternate; } [data-section="notFoundPage"] .nf__dots img { width: 100%; height: 100%; object-fit: cover; object-position: center; } /* Framer loop effect: opacity 1 ↔ .5, duration 2s, repeatType "mirror", ease [.44,0,.56,1] */ @keyframes nf-dots { from { opacity: 1; } to { opacity: .5; } } @media (prefers-reduced-motion: reduce) { [data-section="notFoundPage"] .nf__dots { animation: none; opacity: .75; } } /* ---------- heading ---------- */ [data-section="notFoundPage"] .nf__header { display: flex; flex-direction: column; align-items: center; gap: 64px; width: 100%; max-width: 900px; position: relative; } @media (min-width: 810px) and (max-width: 1199px) { [data-section="notFoundPage"] .nf__header { gap: 48px; } } @media (max-width: 809px) { [data-section="notFoundPage"] .nf__header { gap: 32px; } } [data-section="notFoundPage"] .nf__heading { display: flex; flex-direction: column; align-items: flex-start; gap: 40px; width: 100%; max-width: 800px; } [data-section="notFoundPage"] .nf__container { display: flex; flex-direction: column; align-items: flex-start; gap: 24px; width: 100%; max-width: 640px; } [data-section="notFoundPage"] .nf__tag { display: flex; align-items: center; gap: 8px; width: min-content; } [data-section="notFoundPage"] .nf__dot { flex: none; width: 14px; height: 8px; border-radius: 9999px; background: var(--c-white); } [data-section="notFoundPage"] .nf__tag p { white-space: pre; } [data-section="notFoundPage"] .nf__text { display: flex; flex-direction: column; align-items: flex-start; gap: 20px; width: 100%; } [data-section="notFoundPage"] h1 { width: 100%; white-space: pre-wrap; word-break: break-word; } [data-section="notFoundPage"] .nf__desc { width: 100%; text-align: left; white-space: pre-wrap; word-break: break-word; } /* ---------- "Back to home" ---------- The shared Button component (P90iAy18v), variant Secondary — styled by .btn/.btn--secondary in base.css. Only its wrapper is positioned here, as live ("framer-uuejet-container": flex none, width auto). */ [data-section="notFoundPage"] .nf__action { position: relative; flex: none; width: auto; display: flex; flex-wrap: wrap; gap: 8px; } /* 2026-10-09: room for two buttons */ /* ===== sections/overview.css ===== */ /* overview section (live layer "Overview", id #overview). Owner: home-a. Section frame + the "Showcase" component (e8KEhUs8c): accordion list left, cross-fading mockup right. Values measured from research/refs/deltus/live/home/w1440|w810|w390/sections/03-overview.*. */ [data-section="overview"] { align-items: flex-start; width: 100%; max-width: var(--content-max); margin: 0 auto; padding: 72px 0; gap: 64px; scroll-margin-top: 40px; } @media (max-width: 1199px) { [data-section="overview"] { padding: 72px 24px; gap: 48px; } } @media (max-width: 809px) { [data-section="overview"] { padding: 72px 16px; gap: 32px; } } .ov__heading { display: flex; flex-direction: column; justify-content: center; align-items: flex-start; gap: 24px; width: 100%; max-width: 480px; } .ov__tag { display: flex; align-items: center; gap: 8px; width: min-content; } .ov__tag p { white-space: pre; } .ov__tag-dot { flex: none; width: 14px; height: 8px; border-radius: 9999px; background: var(--c-green); } .ov__text { display: flex; flex-direction: column; justify-content: center; align-items: flex-start; gap: 20px; width: 100%; } .ov__text h2, .ov__text p { width: 100%; } .ov__showcase { width: 100%; } /* ---------- Showcase ---------- */ .ov-showcase { display: flex; justify-content: center; align-items: center; gap: 24px; width: 100%; height: 410px; overflow: hidden; background: var(--c-bg-deep); } .ov-showcase__list { display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 16px; flex: 1 1 0; min-width: 0; overflow: hidden; } .ov-showcase__visual { position: relative; flex: 1 1 0; min-width: 0; aspect-ratio: 1.29; height: auto; } @media (max-width: 809px) { .ov-showcase { flex-direction: column; gap: 16px; height: auto; } .ov-showcase__list { order: 1; flex: none; width: 100%; gap: 8px; } .ov-showcase__visual { order: 0; flex: none; width: 100%; aspect-ratio: 1.2878; } } /* accordion item ("Showcase accordion" BLTyZCJu2): open 24/20 padding, closed 20/20, tween .4s */ .ov-item { display: flex; flex-direction: column; align-items: flex-start; gap: 0; width: 100%; padding: 20px 32px 20px 20px; text-align: left; cursor: pointer; overflow: hidden; background: var(--c-bg); border-radius: 4px; transition: padding-top .4s cubic-bezier(.12, .23, .5, 1); } .ov-item[aria-expanded="true"] { padding-top: 24px; } .ov-item__head { display: flex; align-items: center; gap: 12px; width: 100%; } .ov-item__bar { flex: none; width: 2px; height: 16px; border-radius: 9999px; background: var(--c-surface); transition: background-color .4s cubic-bezier(.12, .23, .5, 1); } .ov-item:hover .ov-item__bar { background: var(--c-surface-2); } .ov-item[aria-expanded="true"] .ov-item__bar { background: var(--c-green); } .ov-item__title { flex: 1 1 0; min-width: 0; font: 500 16px/110% var(--f-display); letter-spacing: -.04em; color: var(--c-white); } .ov-item__desc { display: grid; grid-template-rows: 0fr; width: 100%; padding-top: 0; transition: grid-template-rows .4s cubic-bezier(.12, .23, .5, 1), padding-top .4s cubic-bezier(.12, .23, .5, 1); } .ov-item[aria-expanded="true"] .ov-item__desc { grid-template-rows: 1fr; padding-top: 12px; } .ov-item__desc-inner { overflow: hidden; min-height: 0; font: 400 14px/150% var(--f-display); letter-spacing: -.02em; color: var(--c-text-80); } /* mockup panels: all five stacked, only the active one visible (Showcase spring, bounce .2, .4s) */ .ov-panel { position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; border-radius: 4px; overflow: clip; opacity: 0; transition: opacity .4s linear(0, .0532, .1752, .324, .4734, .6086, .7228, .8139, .8833, .9337, .9685, .9911, 1.0047, 1.0119, 1.0148, 1.015, 1.0136, 1.0116, 1.0093, 1.0071, 1.0051, 1.0036, 1.0023, 1.0014, 1); } .ov-panel.is-active { opacity: 1; } .ov-panel__shot { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; } /* ---------- the card inside a panel ---------- */ .ov-card { position: relative; display: flex; flex-direction: column; align-items: flex-start; gap: 10px; width: 76%; height: 90%; padding: 16px 16px 0; overflow: clip; background: #f3f4f2; border-radius: 6px 6px 0 0; } .ov-card::after { content: ""; position: absolute; inset: 0; border: 1px solid rgba(255, 255, 255, .6); border-radius: inherit; pointer-events: none; } /* 2026-10-09 (T1 H5): at 810 and 390 the card is shorter than its rows and the last row was cut through its text. Fade the bottom out instead of a hard crop. */ @media (max-width: 1199px) { .ov-card { -webkit-mask-image: linear-gradient(to bottom, #000 75%, transparent 100%); mask-image: linear-gradient(to bottom, #000 75%, transparent 100%); } } .ov-card__head { display: flex; justify-content: space-between; align-items: center; width: 100%; } .ov-card__head-title { display: flex; align-items: center; gap: 8px; width: min-content; } .ov-card__bar { flex: none; width: 2px; height: 14px; border-radius: 2px; background: var(--c-green); } .ov-card__head-title p { font: 600 13px/1.3em var(--f-sans); letter-spacing: -.01em; color: #111928; white-space: pre; } .ov-card__badge { position: relative; display: flex; align-items: center; gap: 4px; width: min-content; padding: 2px 7px; border-radius: 9999px; background: #1119280a; } .ov-card__badge::after { content: ""; position: absolute; inset: 0; border: 1px solid #11192814; border-radius: inherit; pointer-events: none; } .ov-card__badge p { font: 500 10.5px/1.2em var(--f-sans); letter-spacing: -.01em; color: #606773; white-space: pre; } .ov-card__line { width: 100%; font: 500 11px/1.3em var(--f-sans); letter-spacing: -.01em; color: #606773; } .ovdot { flex: none; width: 6px; height: 6px; border-radius: 9999px; } .ovdot--green { background: var(--c-green); } .ovdot--orange { background: var(--c-orange); } .ovdot--blue { background: var(--c-blue); } .ovdot--gold { background: var(--c-gold); } .ovdot--pink { background: var(--c-pink); } .ovdot--grey { background: #aaafb7; } .ovchip { display: inline-flex; align-items: center; gap: 5px; width: min-content; padding: 3px 8px 3px 7px; border-radius: 9999px; background: #1119280d; } .ovchip__label { font: 500 11px/1.2em var(--f-sans); letter-spacing: -.01em; color: #373e4b; white-space: pre; } .ov-row { position: relative; display: flex; align-items: center; gap: 10px; width: 100%; padding: 10px 12px; background: #fff; border-radius: 4px; } .ov-row::after { content: ""; position: absolute; inset: 0; border: 1px solid #11192814; border-radius: inherit; pointer-events: none; } .ov-row--filed { padding: 9px 12px; } .ov-row--ledger { align-items: flex-start; } .ov-cell { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; flex: 1 1 0; min-width: 0; } .ov-cell__title { width: 100%; font: 600 12.5px/1.3em var(--f-sans); letter-spacing: -.01em; color: #111928; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; } .ov-cell__detail { width: 100%; font: 400 11px/1.3em var(--f-sans); letter-spacing: -.01em; color: #606773; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; } /* step 2: risk meter */ .ov-risk { display: flex; align-items: center; gap: 8px; flex: none; width: 70px; } .ov-meter { display: flex; align-items: center; flex: none; width: 44px; height: 5px; border-radius: 9999px; background: #11192814; overflow: clip; } .ov-meter__fill { height: 5px; border-radius: 9999px; } .ov-meter__fill--pink { background: var(--c-pink); } .ov-meter__fill--orange { background: var(--c-orange); } .ov-meter__fill--grey { background: #aaafb7; } .ov-risk__score { flex: none; width: 18px; text-align: right; font: 600 12.5px/1.3em var(--f-sans); letter-spacing: -.01em; color: #111928; font-variant-numeric: tabular-nums; font-feature-settings: "tnum" on; } .ov-note { display: flex; align-items: center; gap: 8px; width: 100%; padding: 0 2px; } .ov-note--box { padding: 2px; } .ov-note p { font: 500 11px/1.3em var(--f-sans); letter-spacing: -.01em; color: #606773; } /* step 3: approval card */ .ov-approval { position: relative; display: flex; flex-direction: column; align-items: flex-start; gap: 10px; width: 100%; padding: 12px; background: #fff; border-radius: 4px; } .ov-approval::after { content: ""; position: absolute; inset: 0; border: 1px solid #11192814; border-radius: inherit; pointer-events: none; } .ov-approval__head { display: flex; align-items: center; gap: 8px; width: 100%; } .ov-approval__name { flex: 1 1 0; min-width: 0; font: 600 13px/1.3em var(--f-sans); letter-spacing: -.01em; color: #111928; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; } .ov-evidence { display: flex; flex-direction: column; align-items: flex-start; gap: 5px; width: 100%; padding: 8px 0; } .ov-evidence__line { display: flex; align-items: center; gap: 8px; width: 100%; } .ov-evidence__line p { flex: 1 1 0; min-width: 0; font: 500 11.5px/1.3em var(--f-sans); letter-spacing: -.01em; color: #373e4b; } .ov-actions { display: flex; align-items: center; gap: 8px; width: 100%; } .ov-btn { position: relative; display: flex; justify-content: center; align-items: center; flex: 1 1 0; min-width: 0; padding: 7px 12px; border-radius: 4px; } .ov-btn p { font: 600 12px/1.3em var(--f-sans); letter-spacing: -.01em; white-space: pre; } .ov-btn--approve { background: #111928; } .ov-btn--approve p { color: #fff; } .ov-btn--skip { background: #fff; } .ov-btn--skip p { color: #111928; } .ov-btn--skip::after { content: ""; position: absolute; inset: 0; border: 1px solid rgba(17, 25, 40, .16); border-radius: inherit; pointer-events: none; } .ov-rule { position: relative; display: flex; align-items: center; gap: 10px; width: 100%; padding: 9px 12px; background: #fff; border-radius: 4px; } .ov-rule::after { content: ""; position: absolute; inset: 0; border: 1px solid #11192814; border-radius: inherit; pointer-events: none; } .ov-rule__text { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; flex: 1 1 0; min-width: 0; } .ov-rule__title { width: 100%; font: 600 12px/1.3em var(--f-sans); letter-spacing: -.01em; color: #111928; } .ov-rule__sub { width: 100%; font: 400 11px/1.3em var(--f-sans); letter-spacing: -.01em; color: #606773; } .ov-toggle { display: flex; justify-content: flex-end; align-items: center; flex: none; width: 28px; height: 16px; padding: 2px; border-radius: 9999px; background: var(--c-green); } .ov-toggle__thumb { width: 12px; height: 12px; border-radius: 9999px; background: #fff; } /* step 5: ledger */ .ov-marker { flex: none; width: 3px; height: 38px; border-radius: 3px; } .ov-marker--green { background: var(--c-green); } .ov-marker--orange { background: var(--c-orange); } .ov-marker--pink { background: var(--c-pink); } .ov-entry { display: flex; flex-direction: column; align-items: flex-start; gap: 5px; flex: 1 1 0; min-width: 0; } .ov-foot { display: flex; justify-content: space-between; align-items: center; width: 100%; padding: 2px; } .ov-foot__left { font: 500 11px/1.3em var(--f-sans); letter-spacing: -.01em; color: #606773; } .ov-foot__right { font: 600 11px/1.3em var(--f-sans); letter-spacing: -.01em; color: #111928; } /* ===== sections/partnerTypes.css ===== */ /* partnerTypes section (live layer "Partner types", /partners #types). Scoped under [data-section="partnerTypes"]. Owner: solutions-c. Measured from research/refs/deltus/live/partners/w1440|w810|w390/sections/03-partner-types.styles.json. */ [data-section="partnerTypes"] { width: 100%; max-width: 1080px; margin: 0 auto; padding: 72px 0; gap: 64px; align-items: flex-start; scroll-margin-top: 40px; } [data-section="partnerTypes"] .ptypes__heading { display: flex; flex-direction: column; align-items: flex-start; gap: 24px; width: 100%; max-width: 480px; } [data-section="partnerTypes"] .ptypes__tagrow, [data-section="partnerTypes"] .ptypes__tag { display: flex; align-items: center; width: min-content; } [data-section="partnerTypes"] .ptypes__tagrow { gap: 12px; } [data-section="partnerTypes"] .ptypes__tag { gap: 8px; } [data-section="partnerTypes"] .ptypes__dot { flex: none; width: 14px; height: 8px; border-radius: 9999px; background: var(--c-white); } [data-section="partnerTypes"] .ptypes__tagtext { white-space: pre; } [data-section="partnerTypes"] .ptypes__text { display: flex; flex-direction: column; align-items: flex-start; gap: 20px; width: 100%; } [data-section="partnerTypes"] .ptypes__title, [data-section="partnerTypes"] .ptypes__desc { width: 100%; text-wrap: balance; } /* ---------- the grid of four "Action card"s ---------- */ [data-section="partnerTypes"] .ptypes__grid { display: grid; width: 100%; gap: 16px; justify-content: center; grid-template-columns: repeat(2, minmax(50px, 1fr)); grid-template-rows: repeat(2, minmax(0, 1fr)); grid-auto-rows: minmax(0, 1fr); } [data-section="partnerTypes"] .ptypes__card { display: flex; flex-direction: column; align-items: flex-start; justify-content: space-between; width: 100%; height: 100%; padding: 32px 28px; background: var(--c-bg); border-radius: 4px; overflow: clip; } [data-section="partnerTypes"] .ptypes__body { display: flex; flex-direction: column; align-items: flex-start; gap: 24px; width: 100%; } [data-section="partnerTypes"] .ptypes__top { display: flex; align-items: flex-start; justify-content: space-between; width: 100%; } [data-section="partnerTypes"] .ptypes__icon { flex: none; display: flex; align-items: center; justify-content: center; width: 56px; height: 56px; border-radius: 999px; overflow: clip; border: 1px solid var(--c-surface-2); } [data-section="partnerTypes"] .ptypes__icon-svg { width: 22px; height: 22px; opacity: .9; stroke: var(--c-white); stroke-width: 1.4; fill: none; } [data-section="partnerTypes"] .ptypes__head { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; width: 100%; } [data-section="partnerTypes"] .ptypes__name, [data-section="partnerTypes"] .ptypes__line { width: 100%; overflow-wrap: break-word; } [data-section="partnerTypes"] .ptypes__divider { flex: none; width: 100%; height: 1px; background: var(--c-surface-2); } [data-section="partnerTypes"] .ptypes__block { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; width: 100%; } [data-section="partnerTypes"] .ptypes__label { width: 100%; color: var(--c-text-70); overflow-wrap: break-word; } [data-section="partnerTypes"] .ptypes__btext { width: 100%; overflow-wrap: break-word; } [data-section="partnerTypes"] .ptypes__item { display: flex; align-items: flex-start; gap: 10px; width: 100%; } [data-section="partnerTypes"] .ptypes__item .ptypes__btext { flex: 1 0 0; width: 1px; } [data-section="partnerTypes"] .ptypes__check { flex: none; display: flex; align-items: center; justify-content: center; width: 16px; height: 24px; } [data-section="partnerTypes"] .ptypes__check-svg { width: 14px; height: 14px; stroke: var(--c-green); stroke-width: 1.6; fill: none; } [data-section="partnerTypes"] .ptypes__footer { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; width: 100%; padding: 8px 0 0; } @media (max-width: 1199px) { [data-section="partnerTypes"] { padding: 72px 24px; gap: 48px; } } @media (max-width: 809px) { [data-section="partnerTypes"] { padding: 72px 16px; gap: 32px; } [data-section="partnerTypes"] .ptypes__grid { grid-template-columns: repeat(1, minmax(50px, 1fr)); grid-template-rows: repeat(4, min-content); grid-auto-rows: min-content; } [data-section="partnerTypes"] .ptypes__card { height: auto; padding: 28px 20px; } } /* ===== sections/partnersCta.css ===== */ /* partnersCta section (live layer "Closing CTA", /partners #become-a-partner). Scoped under [data-section="partnersCta"]. Owner: solutions-c. Measured from research/refs/deltus/live/partners/w1440|w810|w390/sections/06-closing-cta.styles.json. */ [data-section="partnersCta"] { width: 100%; max-width: 1080px; margin: 0 auto; padding: 72px 0 96px; gap: 0; align-items: flex-start; scroll-margin-top: 40px; } [data-section="partnersCta"] .pcta__card { position: relative; display: flex; flex-direction: column; align-items: flex-start; gap: 32px; width: 100%; padding: 64px 48px; background: var(--c-bg); border-radius: 4px; overflow: clip; } [data-section="partnersCta"] .pcta__dots { position: absolute; top: -80px; right: -120px; z-index: 0; width: 720px; height: 600px; opacity: .6; overflow: hidden; pointer-events: none; } [data-section="partnersCta"] .pcta__dots img { width: 100%; height: 100%; object-fit: cover; } [data-section="partnersCta"] .pcta__heading { position: relative; display: flex; flex-direction: column; align-items: flex-start; gap: 24px; width: 100%; max-width: 480px; } [data-section="partnersCta"] .pcta__tagrow, [data-section="partnersCta"] .pcta__tag { display: flex; align-items: center; width: min-content; } [data-section="partnersCta"] .pcta__tagrow { gap: 12px; } [data-section="partnersCta"] .pcta__tag { gap: 8px; } [data-section="partnersCta"] .pcta__dot { flex: none; width: 14px; height: 8px; border-radius: 9999px; background: var(--c-white); } [data-section="partnersCta"] .pcta__tagtext { white-space: pre; } [data-section="partnersCta"] .pcta__text { display: flex; flex-direction: column; align-items: flex-start; gap: 20px; width: 100%; } [data-section="partnersCta"] .pcta__title, [data-section="partnersCta"] .pcta__desc { width: 100%; text-wrap: balance; } [data-section="partnersCta"] .pcta__actions { position: relative; display: flex; align-items: center; gap: 8px; } [data-section="partnersCta"] .pcta__hint { position: relative; width: 100%; color: var(--c-text-70); overflow-wrap: break-word; } @media (max-width: 1199px) { [data-section="partnersCta"] { padding: 72px 24px; } [data-section="partnersCta"] .pcta__card { padding: 48px 32px; } } @media (max-width: 809px) { [data-section="partnersCta"] { padding: 48px 16px 72px; } [data-section="partnersCta"] .pcta__card { gap: 24px; padding: 40px 20px; } } /* 2026-10-09 (T1 PA1): same fix as the /platform closing CTA. The copy sat in a 480px column on the left of a 1080px card, which left the right half empty. Single centred column instead; dot pattern centred behind it. */ [data-section="partnersCta"] .pcta__card { align-items: center; text-align: center; } [data-section="partnersCta"] .pcta__heading, [data-section="partnersCta"] .pcta__text { align-items: center; } [data-section="partnersCta"] .pcta__hint { max-width: 480px; } [data-section="partnersCta"] .pcta__dots { right: auto; left: 50%; transform: translateX(-50%); } /* ===== sections/partnersHero.css ===== */ /* partnersHero section (live layer "Hero", /partners #hero). Every rule scoped under [data-section="partnersHero"]. Owner: solutions-c. Measured from research/refs/deltus/live/partners/w1440|w810|w390/sections/02-hero.styles.json. */ [data-section="partnersHero"] { width: 100%; max-width: 920px; margin: 0 auto; padding: 48px 0; gap: 32px; align-items: center; scroll-margin-top: 40px; /* Live clips the 920px dots backdrop on the page root (.framer-S8TI8 overflow:clip). Below 1200px the hero IS the viewport width, so clipping here is pixel-identical and keeps the document from scrolling sideways. The y axis stays visible: the dots are 780px tall and deliberately bleed into the next section. */ overflow-x: clip; overflow-y: visible; } /* Dots backdrop: 920x780 pinned to the hero's top-left, clipped, looping opacity 1 -> .5 -> 1 (Framer loop: duration 2s, ease [.44,0,.56,1], repeatType mirror). */ [data-section="partnersHero"] .phero__dots { position: absolute; top: 0; left: 0; z-index: 0; width: 920px; height: 780px; overflow: hidden; pointer-events: none; animation: phero-dots 2s var(--ease-appear) infinite alternate; } [data-section="partnersHero"] .phero__dots img { width: 100%; height: 100%; object-fit: cover; } @keyframes phero-dots { from { opacity: 1; } to { opacity: .5; } } [data-section="partnersHero"] .phero__header { position: relative; display: flex; flex-direction: column; align-items: center; gap: 64px; width: 100%; max-width: 900px; } [data-section="partnersHero"] .phero__heading { display: flex; flex-direction: column; align-items: flex-start; gap: 40px; width: 100%; max-width: 800px; } [data-section="partnersHero"] .phero__container { display: flex; flex-direction: column; align-items: flex-start; gap: 24px; width: 100%; max-width: 640px; } /* tag row */ [data-section="partnersHero"] .phero__tagrow, [data-section="partnersHero"] .phero__tag { display: flex; align-items: center; width: min-content; } [data-section="partnersHero"] .phero__tagrow { gap: 12px; } [data-section="partnersHero"] .phero__tag { gap: 8px; } [data-section="partnersHero"] .phero__dot { flex: none; width: 14px; height: 8px; border-radius: 9999px; background: var(--c-white); } [data-section="partnersHero"] .phero__tagtext { white-space: pre; } [data-section="partnersHero"] .phero__text { display: flex; flex-direction: column; align-items: flex-start; gap: 20px; width: 100%; } [data-section="partnersHero"] .phero__title, [data-section="partnersHero"] .phero__desc { width: 100%; text-wrap: balance; } [data-section="partnersHero"] .phero__actions { display: flex; align-items: center; gap: 8px; } /* the four small "Icon Card" items under the header */ [data-section="partnersHero"] .phero__types { display: grid; width: 100%; gap: 40px; justify-content: start; grid-template-columns: repeat(4, minmax(50px, 1fr)); grid-template-rows: repeat(1, minmax(0, 1fr)); grid-auto-rows: minmax(0, 1fr); } [data-section="partnersHero"] .phero__type { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; width: 100%; } [data-section="partnersHero"] .phero__type-top { display: flex; align-items: center; gap: 8px; width: 100%; } [data-section="partnersHero"] .phero__type-icon { flex: none; width: 16px; height: 16px; stroke: var(--c-text-80); stroke-width: 1.8; fill: none; } /* title uses the .t-button preset (live text style jx9uun) */ [data-section="partnersHero"] .phero__type-title { flex: 1 0 0; width: 1px; overflow-wrap: break-word; } [data-section="partnersHero"] .phero__type-text { width: 100%; overflow-wrap: break-word; } @media (max-width: 1199px) { [data-section="partnersHero"] { padding: 48px 24px; } [data-section="partnersHero"] .phero__header { gap: 48px; } [data-section="partnersHero"] .phero__types { grid-template-columns: repeat(2, minmax(50px, 1fr)); grid-template-rows: repeat(2, minmax(0, 1fr)); gap: 32px; } } @media (max-width: 809px) { [data-section="partnersHero"] { padding: 48px 16px; } [data-section="partnersHero"] .phero__header { gap: 40px; } [data-section="partnersHero"] .phero__types { grid-template-columns: repeat(1, minmax(50px, 1fr)); grid-template-rows: repeat(4, min-content); grid-auto-rows: min-content; gap: 24px; } } /* ===== sections/partnersHow.css ===== */ /* partnersHow section (live layer "How it works", /partners #how-it-works). Scoped under [data-section="partnersHow"]. Owner: solutions-c. Measured from research/refs/deltus/live/partners/w1440|w810|w390/sections/04-how-it-works.styles.json. */ [data-section="partnersHow"] { width: 100%; max-width: 1080px; margin: 0 auto; padding: 72px 0; gap: 64px; align-items: flex-start; scroll-margin-top: 40px; } [data-section="partnersHow"] .phow__heading { display: flex; flex-direction: column; align-items: flex-start; gap: 24px; width: 100%; max-width: 480px; } [data-section="partnersHow"] .phow__tagrow, [data-section="partnersHow"] .phow__tag { display: flex; align-items: center; width: min-content; } [data-section="partnersHow"] .phow__tagrow { gap: 12px; } [data-section="partnersHow"] .phow__tag { gap: 8px; } [data-section="partnersHow"] .phow__dot { flex: none; width: 14px; height: 8px; border-radius: 9999px; background: var(--c-white); } [data-section="partnersHow"] .phow__tagtext { white-space: pre; } [data-section="partnersHow"] .phow__text { display: flex; flex-direction: column; align-items: flex-start; gap: 20px; width: 100%; } [data-section="partnersHow"] .phow__title, [data-section="partnersHow"] .phow__desc { width: 100%; text-wrap: balance; } [data-section="partnersHow"] .phow__grid { display: grid; width: 100%; gap: 16px; justify-content: center; grid-template-columns: repeat(4, minmax(50px, 1fr)); grid-template-rows: repeat(1, minmax(0, 1fr)); grid-auto-rows: minmax(0, 1fr); } [data-section="partnersHow"] .phow__step { display: flex; flex-direction: column; align-items: flex-start; gap: 24px; width: 100%; height: 100%; padding: 24px 20px; background: var(--c-bg); border-radius: 4px; overflow: clip; } [data-section="partnersHow"] .phow__num { width: 100%; color: var(--c-text-70); overflow-wrap: break-word; } [data-section="partnersHow"] .phow__steptext { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; width: 100%; } [data-section="partnersHow"] .phow__steptitle, [data-section="partnersHow"] .phow__stepdesc { width: 100%; overflow-wrap: break-word; } @media (max-width: 1199px) { [data-section="partnersHow"] { padding: 72px 24px; gap: 48px; } [data-section="partnersHow"] .phow__grid { grid-template-columns: repeat(2, minmax(50px, 1fr)); grid-template-rows: repeat(2, minmax(0, 1fr)); } } @media (max-width: 809px) { [data-section="partnersHow"] { padding: 72px 16px; gap: 32px; } [data-section="partnersHow"] .phow__grid { grid-template-columns: repeat(1, minmax(50px, 1fr)); grid-template-rows: repeat(4, min-content); grid-auto-rows: min-content; } [data-section="partnersHow"] .phow__step { height: auto; } } /* ===== sections/partnersRules.css ===== */ /* partnersRules section (live layer "Same rules", /partners #principles). Scoped under [data-section="partnersRules"]. Owner: solutions-c. Measured from research/refs/deltus/live/partners/w1440|w810|w390/sections/05-same-rules.styles.json. */ [data-section="partnersRules"] { width: 100%; max-width: 1080px; margin: 0 auto; padding: 72px 0; gap: 64px; align-items: flex-start; scroll-margin-top: 40px; } [data-section="partnersRules"] .prules__heading { display: flex; flex-direction: column; align-items: flex-start; gap: 24px; width: 100%; max-width: 480px; } [data-section="partnersRules"] .prules__tagrow, [data-section="partnersRules"] .prules__tag { display: flex; align-items: center; width: min-content; } [data-section="partnersRules"] .prules__tagrow { gap: 12px; } [data-section="partnersRules"] .prules__tag { gap: 8px; } [data-section="partnersRules"] .prules__dot { flex: none; width: 14px; height: 8px; border-radius: 9999px; background: var(--c-white); } [data-section="partnersRules"] .prules__tagtext { white-space: pre; } [data-section="partnersRules"] .prules__text { display: flex; flex-direction: column; align-items: flex-start; gap: 20px; width: 100%; } [data-section="partnersRules"] .prules__title, [data-section="partnersRules"] .prules__desc { width: 100%; text-wrap: balance; } [data-section="partnersRules"] .prules__grid { display: grid; width: 100%; gap: 16px; justify-content: center; grid-template-columns: repeat(3, minmax(50px, 1fr)); grid-template-rows: repeat(1, minmax(0, 1fr)); grid-auto-rows: minmax(0, 1fr); } [data-section="partnersRules"] .prules__card { display: flex; flex-direction: column; align-items: flex-start; gap: 24px; width: 100%; height: 100%; padding: 24px 20px; background: var(--c-bg); border-radius: 4px; overflow: hidden; } [data-section="partnersRules"] .prules__icon { flex: none; display: flex; align-items: center; justify-content: center; width: 64px; height: 64px; border-radius: 999px; overflow: clip; border: 1px solid var(--c-surface-2); } [data-section="partnersRules"] .prules__icon-svg { width: 24px; height: 24px; opacity: .9; stroke: var(--c-white); stroke-width: 1.4; fill: none; } [data-section="partnersRules"] .prules__cardtext { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; width: 100%; } [data-section="partnersRules"] .prules__cardtitle, [data-section="partnersRules"] .prules__carddesc { width: 100%; overflow-wrap: break-word; } @media (max-width: 1199px) { [data-section="partnersRules"] { padding: 72px 24px; gap: 48px; } [data-section="partnersRules"] .prules__grid { grid-template-columns: repeat(2, minmax(50px, 1fr)); grid-template-rows: repeat(2, minmax(0, 1fr)); } } @media (max-width: 809px) { [data-section="partnersRules"] { padding: 72px 16px; gap: 32px; } [data-section="partnersRules"] .prules__grid { grid-template-columns: repeat(1, minmax(50px, 1fr)); grid-template-rows: repeat(3, min-content); grid-auto-rows: min-content; } [data-section="partnersRules"] .prules__card { height: auto; } } /* ===== sections/partnersSection.css ===== */ /* Partners (#partners): heading + primary Button on the left, a 2x2 grid of Feature Cards on the right. Measured from research/refs/deltus/live/home/w1440 . w810 . w390 sections/13-partners.*. Desktop: a 64px-gap row where the left column is flex 1 (max-width 420px) and the card grid is flex 1.5, giving 406.4px + 64px + 609.6px = 1080px. Tablet and phone stack them. */ [data-section="partnersSection"] .partners__row { display: flex; flex-direction: row; align-items: flex-start; justify-content: flex-start; gap: 64px; width: 100%; } [data-section="partnersSection"] .partners__left { flex: 1 0 0px; width: 1px; max-width: 420px; display: flex; flex-direction: column; align-items: flex-start; justify-content: flex-start; gap: 40px; } [data-section="partnersSection"] .partners__cards { flex: 1.5 0 0px; width: 1px; display: grid; gap: 16px; justify-content: start; grid-template-columns: repeat(2, minmax(50px, 1fr)); grid-auto-rows: minmax(0, 1fr); } @media (max-width: 1199px) { [data-section="partnersSection"] .partners__row { flex-direction: column; gap: 48px; } [data-section="partnersSection"] .partners__left, [data-section="partnersSection"] .partners__cards { flex: none; width: 100%; max-width: none; } [data-section="partnersSection"] .partners__left .hc-head { max-width: 480px; } } @media (max-width: 809px) { [data-section="partnersSection"] .partners__row { gap: 32px; } [data-section="partnersSection"] .partners__cards { display: flex; flex-direction: column; align-items: flex-start; justify-content: flex-start; gap: 12px; } } /* ===== sections/platformCta.css ===== */ /* platformCta section (live layer "Closing CTA", /platform#get-started). Owner: platform. Measured from research/refs/deltus/live/platform/w1440,w810,w390/sections/11-closing-cta.* */ .section[data-section="platformCta"] { padding: 72px 0 96px; gap: 0; } @media (max-width: 1199px) { .section[data-section="platformCta"] { padding: 72px 24px; gap: 0; } } @media (max-width: 809px) { .section[data-section="platformCta"] { padding: 48px 16px 72px; gap: 0; } } [data-section="platformCta"] .pf-cta__card { display: flex; flex-direction: column; align-items: flex-start; flex: none; width: 100%; gap: 32px; padding: 64px 48px; background: var(--c-bg); border-radius: 4px; overflow: hidden; position: relative; } @media (max-width: 1199px) { [data-section="platformCta"] .pf-cta__card { padding: 48px 32px; } } @media (max-width: 809px) { [data-section="platformCta"] .pf-cta__card { gap: 24px; padding: 40px 20px; } } /* the dot pattern bleeds off the card's top-right corner at 60% opacity (no loop here, unlike the hero) */ [data-section="platformCta"] .pf-cta__dots { position: absolute; top: -80px; right: -120px; width: 720px; height: 600px; opacity: .6; overflow: hidden; pointer-events: none; z-index: 0; } [data-section="platformCta"] .pf-cta__dots .media { width: 100%; height: 100%; } [data-section="platformCta"] .pf-cta__dots img { width: 100%; height: 100%; object-fit: cover; object-position: center; } [data-section="platformCta"] .pf-cta__heading { display: flex; flex-direction: column; align-items: flex-start; flex: none; width: 100%; max-width: 480px; gap: 24px; position: relative; } [data-section="platformCta"] .pf-cta__text { display: flex; flex-direction: column; align-items: flex-start; flex: none; width: 100%; gap: 20px; position: relative; } [data-section="platformCta"] .pf-cta__title, [data-section="platformCta"] .pf-cta__desc { width: 100%; text-wrap: balance; } [data-section="platformCta"] .pf-cta__actions { display: flex; align-items: center; flex: none; width: min-content; gap: 8px; position: relative; } /* 2026-10-09 (T1 P1): the copy sat in a 480px column on the left of a 1080px card, which left the right half empty and read as a missing image. Single centred column instead; the dot pattern is centred behind it. */ [data-section="platformCta"] .pf-cta__card { align-items: center; text-align: center; } [data-section="platformCta"] .pf-cta__heading, [data-section="platformCta"] .pf-cta__text { align-items: center; } [data-section="platformCta"] .pf-cta__dots { right: auto; left: 50%; transform: translateX(-50%); } /* ===== sections/platformDecide.css ===== */ /* platformDecide section (live layer "Decide", /platform#decide). Owner: platform. Measured from research/refs/deltus/live/platform/w1440,w810,w390/sections/05-decide.* */ [data-section="platformDecide"] .pf-decide__grid { display: grid; flex: none; width: 100%; gap: 16px; justify-content: center; position: relative; grid-auto-rows: minmax(0, 1fr); grid-template-columns: repeat(3, minmax(50px, 1fr)); } @media (max-width: 1199px) { [data-section="platformDecide"] .pf-decide__grid { grid-template-columns: repeat(2, minmax(50px, 1fr)); } } @media (max-width: 809px) { [data-section="platformDecide"] .pf-decide__grid { grid-auto-rows: min-content; grid-template-columns: repeat(1, minmax(50px, 1fr)); } } [data-section="platformDecide"] .pf-decide__cell { align-self: start; justify-self: start; width: 100%; height: 100%; position: relative; } /* ===== sections/platformDetect.css ===== */ /* platformDetect section (live layer "Detect", /platform#detect). Owner: platform. Measured from research/refs/deltus/live/platform/w1440,w810,w390/sections/03-detect.* The shared frame, heading and Icon Card live in sections/platformParts.css. */ [data-section="platformDetect"] .pf-detect__grid { display: grid; flex: none; width: 100%; gap: 16px; justify-content: center; position: relative; grid-auto-rows: minmax(0, 1fr); grid-template-columns: repeat(4, minmax(50px, 1fr)); } @media (max-width: 1199px) { [data-section="platformDetect"] .pf-detect__grid { grid-template-columns: repeat(2, minmax(50px, 1fr)); } } @media (max-width: 809px) { [data-section="platformDetect"] .pf-detect__grid { grid-auto-rows: min-content; grid-template-columns: repeat(1, minmax(50px, 1fr)); } } [data-section="platformDetect"] .pf-detect__cell { align-self: start; justify-self: start; width: 100%; height: 100%; position: relative; } /* ===== sections/platformEvidence.css ===== */ /* platformEvidence section (live layer "Evidence", /platform#evidence). Owner: platform. Measured from research/refs/deltus/live/platform/w1440,w810,w390/sections/04-evidence.* */ /* ---------- two columns at desktop, stacked below ---------- Live widths at 1440: text column 484, gap 64, mockup 532 — i.e. the free space is split evenly *after* the mockup's own 48px of horizontal padding, which is what `flex: 1 0 48px` reproduces at any width. */ [data-section="platformEvidence"] .pf-evidence__row-wrap { display: flex; align-items: center; flex: none; width: 100%; gap: 64px; position: relative; } [data-section="platformEvidence"] .pf-evidence__col { display: flex; flex-direction: column; align-items: flex-start; flex: 1 0 0px; width: 1px; gap: 40px; position: relative; } @media (max-width: 1199px) { [data-section="platformEvidence"] .pf-evidence__row-wrap { flex-direction: column; align-items: flex-start; gap: 48px; } [data-section="platformEvidence"] .pf-evidence__col { flex: none; width: 100%; } } @media (max-width: 809px) { [data-section="platformEvidence"] .pf-evidence__row-wrap { gap: 32px; } } [data-section="platformEvidence"] .pf-evidence__items { display: flex; flex-direction: column; align-items: flex-start; flex: none; width: 100%; max-width: 480px; gap: 24px; position: relative; } [data-section="platformEvidence"] .pf-evidence__item { width: 100%; position: relative; } /* ---------- the "Evidence pack" mockup ---------- */ [data-section="platformEvidence"] .pf-evidence__mockup { display: flex; flex-direction: column; align-items: flex-start; flex: 1 0 48px; width: 1px; gap: 16px; padding: 24px; background: var(--c-bg); border-radius: 4px; overflow: hidden; position: relative; } @media (max-width: 1199px) { [data-section="platformEvidence"] .pf-evidence__mockup { flex: none; width: 100%; } } @media (max-width: 809px) { [data-section="platformEvidence"] .pf-evidence__mockup { padding: 16px; } } [data-section="platformEvidence"] .pf-evidence__shot { display: flex; flex-direction: column; align-items: flex-start; flex: none; width: 100%; gap: 10px; padding: 12px; background: var(--c-surface); border-radius: 4px; overflow: hidden; position: relative; } [data-section="platformEvidence"] .pf-evidence__bar { display: flex; align-items: center; flex: none; width: 100%; gap: 8px; padding: 6px 10px; background: var(--c-bg); border-radius: 4px; position: relative; } [data-section="platformEvidence"] .pf-evidence__lock { flex: none; width: 12px; height: 12px; --icon-sw: 1.6; color: var(--c-text-70); } [data-section="platformEvidence"] .pf-evidence__url { flex: 1 0 0px; width: 1px; white-space: pre-line; overflow: hidden; } [data-section="platformEvidence"] .pf-evidence__page { display: flex; flex-direction: column; align-items: flex-start; flex: none; width: 100%; gap: 12px; padding: 16px; background: var(--c-bg); border-radius: 4px; position: relative; } [data-section="platformEvidence"] .pf-evidence__page > p { width: 100%; white-space: pre-wrap; word-break: break-word; overflow-wrap: break-word; } [data-section="platformEvidence"] .pf-evidence__products { display: flex; align-items: center; flex: none; width: 100%; gap: 8px; position: relative; } [data-section="platformEvidence"] .pf-evidence__product { flex: 1 0 0px; width: 1px; height: 56px; background: var(--c-surface-2); border-radius: 4px; } [data-section="platformEvidence"] .pf-evidence__caption { width: 100%; color: var(--c-text-70); white-space: pre-wrap; word-break: break-word; overflow-wrap: break-word; } [data-section="platformEvidence"] .pf-evidence__data { display: flex; flex-direction: column; align-items: flex-start; flex: none; width: 100%; gap: 0; position: relative; } [data-section="platformEvidence"] .pf-evidence__row { display: flex; align-items: center; flex: none; width: 100%; gap: 16px; padding: 10px 0; position: relative; } [data-section="platformEvidence"] .pf-evidence__key { flex: none; width: 120px; color: var(--c-text-70); white-space: pre-wrap; word-break: break-word; overflow-wrap: break-word; } [data-section="platformEvidence"] .pf-evidence__value { flex: 1 0 0px; width: 1px; color: var(--c-white); white-space: pre-wrap; word-break: break-word; overflow-wrap: break-word; } /* ===== sections/platformFile.css ===== */ /* platformFile section (live layer "File", /platform#file). Owner: platform. Measured from research/refs/deltus/live/platform/w1440,w810,w390/sections/06-file.* One panel holding a 3x3 grid of Action cards (2x5 at tablet, 1x9 at phone). */ [data-section="platformFile"] .pf-file__panel { display: grid; flex: none; width: 100%; gap: 40px 32px; justify-content: start; position: relative; grid-auto-rows: minmax(0, 1fr); grid-template-columns: repeat(3, minmax(50px, 1fr)); padding: 40px 32px; background: var(--c-bg); border-radius: 4px; overflow: hidden; } @media (max-width: 1199px) { [data-section="platformFile"] .pf-file__panel { gap: 32px 24px; grid-template-columns: repeat(2, minmax(50px, 1fr)); padding: 32px 24px; } } @media (max-width: 809px) { [data-section="platformFile"] .pf-file__panel { gap: 24px; grid-auto-rows: min-content; grid-template-columns: repeat(1, minmax(50px, 1fr)); padding: 24px 20px; } } [data-section="platformFile"] .pf-file__cell { align-self: start; justify-self: start; width: 100%; height: 100%; position: relative; } /* ===== sections/platformHero.css ===== */ /* platformHero section (live layer "Hero", /platform#hero). Every rule scoped under [data-section="platformHero"]. Measured from research/refs/deltus/live/platform/w1440|w810|w390/sections/02-hero.*. Owner: platform. */ .section[data-section="platformHero"] { align-items: center; max-width: 920px; padding: 48px 0; gap: 32px; /* the dot pattern is always 920px wide, so below 1200px it reaches past the hero; the live page clips it at the page root. Clipping on x only keeps the 221px of pattern that bleeds below the hero into #detect. */ overflow-x: clip; overflow-y: visible; } @media (max-width: 1199px) { .section[data-section="platformHero"] { padding: 48px 24px; gap: 32px; } } @media (max-width: 809px) { .section[data-section="platformHero"] { padding: 48px 16px; gap: 32px; } } /* ---------- dot pattern ---------- Live: a 920x780 absolutely positioned image at the hero's top-left corner (it keeps that size at every breakpoint and overflows the hero on phones), looping opacity 1 ↔ .5 over 2s, mirrored, ease [.44,0,.56,1]. */ [data-section="platformHero"] .pf-hero__dots { position: absolute; top: 0; left: 0; width: 920px; height: 780px; overflow: hidden; pointer-events: none; z-index: 0; animation: pf-dots-pulse 4s var(--ease-appear) infinite; } [data-section="platformHero"] .pf-hero__dots .media { width: 100%; height: 100%; } [data-section="platformHero"] .pf-hero__dots img { width: 100%; height: 100%; object-fit: cover; object-position: center; } @keyframes pf-dots-pulse { 0%, 100% { opacity: 1; } 50% { opacity: .5; } } @media (prefers-reduced-motion: reduce) { [data-section="platformHero"] .pf-hero__dots { animation: none; } } /* ---------- header ---------- */ [data-section="platformHero"] .pf-hero__header { display: flex; flex-direction: column; align-items: center; flex: none; width: 100%; max-width: 900px; gap: 64px; position: relative; } @media (max-width: 1199px) { [data-section="platformHero"] .pf-hero__header { gap: 48px; } } @media (max-width: 809px) { [data-section="platformHero"] .pf-hero__header { gap: 40px; } } [data-section="platformHero"] .pf-hero__heading { display: flex; flex-direction: column; align-items: flex-start; flex: none; width: 100%; max-width: 800px; gap: 40px; position: relative; } [data-section="platformHero"] .pf-hero__container { display: flex; flex-direction: column; align-items: flex-start; flex: none; width: 100%; max-width: 640px; gap: 24px; position: relative; } [data-section="platformHero"] .pf-hero__text { display: flex; flex-direction: column; align-items: flex-start; flex: none; width: 100%; gap: 20px; position: relative; } [data-section="platformHero"] .pf-hero__title, [data-section="platformHero"] .pf-hero__desc { width: 100%; text-wrap: balance; } [data-section="platformHero"] .pf-hero__actions { display: flex; align-items: center; flex: none; width: min-content; gap: 8px; position: relative; } /* ---------- pipeline ---------- 5 columns at desktop, 3x2 at tablet, a single column at phone. Cards are links to the sections below. */ [data-section="platformHero"] .pf-pipeline { display: grid; flex: none; width: 100%; gap: 12px; justify-content: center; grid-auto-rows: minmax(0, 1fr); grid-template-columns: repeat(5, minmax(50px, 1fr)); position: relative; } @media (max-width: 1199px) { [data-section="platformHero"] .pf-pipeline { grid-template-columns: repeat(3, minmax(50px, 1fr)); } } @media (max-width: 809px) { [data-section="platformHero"] .pf-pipeline { gap: 8px; grid-auto-rows: min-content; grid-template-columns: repeat(1, minmax(50px, 1fr)); } } [data-section="platformHero"] .pf-stage { display: flex; flex-direction: column; align-items: flex-start; align-self: start; justify-self: start; width: 100%; height: 100%; gap: 12px; padding: 20px 16px; background: var(--c-bg); border-radius: 4px; overflow: hidden; cursor: pointer; position: relative; /* hover: background #131517 → #232326, .2s cubic-bezier(.2,0,.2,1) (Framer whileHover) */ transition: background-color .2s cubic-bezier(.2, 0, .2, 1); } [data-section="platformHero"] .pf-stage:hover { background: var(--c-surface); } [data-section="platformHero"] .pf-stage__top { display: flex; align-items: center; justify-content: space-between; flex: none; width: 100%; position: relative; } [data-section="platformHero"] .pf-stage__num { color: var(--c-text-70); white-space: pre; } [data-section="platformHero"] .pf-stage__icon { flex: none; width: 16px; height: 16px; --icon-sw: 1.6; color: var(--c-text-80); } [data-section="platformHero"] .pf-stage__text { display: flex; flex-direction: column; align-items: flex-start; flex: none; width: 100%; gap: 4px; position: relative; } [data-section="platformHero"] .pf-stage__text h3, [data-section="platformHero"] .pf-stage__text p { width: 100%; white-space: pre-wrap; word-break: break-word; overflow-wrap: break-word; } /* ===== sections/platformLedger.css ===== */ /* platformLedger section (live layer "Verify & ledger", /platform#ledger). Owner: platform. Measured from research/refs/deltus/live/platform/w1440,w810,w390/sections/07-verify-ledger.* */ /* ---------- state flow ---------- */ [data-section="platformLedger"] .pf-ledger__states { display: flex; flex-direction: column; align-items: flex-start; flex: none; width: 100%; gap: 16px; position: relative; } [data-section="platformLedger"] .pf-ledger__caption { width: 100%; color: var(--c-text-70); white-space: pre-wrap; } [data-section="platformLedger"] .pf-ledger__flow { display: flex; align-items: center; flex: none; width: 100%; gap: 16px; padding: 24px; border-radius: 4px; position: relative; } @media (max-width: 1199px) { [data-section="platformLedger"] .pf-ledger__flow { gap: 12px; padding: 20px; } } @media (max-width: 809px) { [data-section="platformLedger"] .pf-ledger__flow { flex-direction: column; align-items: flex-start; gap: 10px; padding: 20px; } } [data-section="platformLedger"] .pf-ledger__outcomes { display: flex; flex-direction: column; align-items: flex-start; flex: none; width: min-content; gap: 8px; position: relative; } [data-section="platformLedger"] .pf-ledger__arrow { display: flex; flex: none; } [data-section="platformLedger"] .pf-ledger__arrowicon { flex: none; width: 16px; height: 16px; --icon-sw: 1.6; color: var(--c-text-70); } /* on phones the flow runs downwards, so the arrows are turned a quarter-turn (live: matrix(0,1,-1,0,0,0)) */ @media (max-width: 809px) { [data-section="platformLedger"] .pf-ledger__arrowicon { transform: rotate(90deg); } } [data-section="platformLedger"] .pf-ledger__note { flex: 1 0 0px; width: 1px; color: var(--c-text-70); white-space: pre-wrap; word-break: break-word; overflow-wrap: break-word; } @media (max-width: 809px) { [data-section="platformLedger"] .pf-ledger__note { flex: none; width: 100%; } } /* ---------- the "Removal ledger" mockup ---------- */ [data-section="platformLedger"] .pf-ledger__mockup { display: flex; flex-direction: column; align-items: flex-start; flex: none; width: 100%; gap: 0; padding: 0; background: var(--c-bg); border-radius: 4px; overflow: hidden; position: relative; } [data-section="platformLedger"] .pf-ledger__head { padding: 20px 24px; } @media (max-width: 809px) { [data-section="platformLedger"] .pf-ledger__head { padding: 16px; } } [data-section="platformLedger"] .pf-ledger__headrow { display: flex; align-items: center; flex: none; width: 100%; gap: 16px; padding: 12px 24px; background: var(--c-surface); position: relative; } [data-section="platformLedger"] .pf-ledger__row { display: flex; align-items: center; flex: none; width: 100%; gap: 16px; padding: 14px 24px; position: relative; } @media (max-width: 809px) { [data-section="platformLedger"] .pf-ledger__headrow { gap: 12px; padding: 10px 16px; } [data-section="platformLedger"] .pf-ledger__row { gap: 12px; padding: 12px 16px; } } /* one-line cells, exactly as live (-webkit-line-clamp: 1 on a -webkit-box) */ [data-section="platformLedger"] .pf-ledger__cell > p { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 1; overflow: hidden; white-space: pre-line; word-break: break-word; overflow-wrap: break-word; } [data-section="platformLedger"] .pf-ledger__cell--link { flex: 1 0 0px; width: 1px; position: relative; } [data-section="platformLedger"] .pf-ledger__cell--found { flex: none; width: 170px; position: relative; } [data-section="platformLedger"] .pf-ledger__cell--status { display: flex; align-items: center; flex: none; width: 190px; position: relative; } [data-section="platformLedger"] .pf-ledger__cell--time { flex: none; width: 120px; position: relative; } [data-section="platformLedger"] .pf-ledger__headrow p, [data-section="platformLedger"] .pf-ledger__cell--found > p, [data-section="platformLedger"] .pf-ledger__cell--time > p { color: var(--c-text-70); } [data-section="platformLedger"] .pf-ledger__cell--link > p { color: var(--c-white); } /* the live page drops these two columns on phones (they are not rendered at all) */ @media (max-width: 809px) { [data-section="platformLedger"] .pf-ledger__cell--found, [data-section="platformLedger"] .pf-ledger__cell--time { display: none; } [data-section="platformLedger"] .pf-ledger__cell--status { width: 150px; } } [data-section="platformLedger"] .pf-ledger__foot { display: flex; align-items: center; flex-wrap: wrap; flex: none; width: 100%; gap: 24px; padding: 14px 24px; background: var(--c-surface); position: relative; } [data-section="platformLedger"] .pf-ledger__foot p { color: var(--c-text-70); white-space: pre; } @media (max-width: 809px) { [data-section="platformLedger"] .pf-ledger__foot { gap: 8px; padding: 12px 16px; } } /* ---------- the four summary cards ---------- */ [data-section="platformLedger"] .pf-ledger__grid { display: grid; flex: none; width: 100%; gap: 16px; justify-content: center; position: relative; grid-auto-rows: minmax(0, 1fr); grid-template-columns: repeat(4, minmax(50px, 1fr)); } @media (max-width: 1199px) { [data-section="platformLedger"] .pf-ledger__grid { grid-template-columns: repeat(2, minmax(50px, 1fr)); } } @media (max-width: 809px) { [data-section="platformLedger"] .pf-ledger__grid { grid-auto-rows: min-content; grid-template-columns: repeat(1, minmax(50px, 1fr)); } } [data-section="platformLedger"] .pf-ledger__gridcell { align-self: start; justify-self: start; width: 100%; height: 100%; position: relative; } /* ===== sections/platformMarkets.css ===== */ /* platformMarkets section (live layer "Local markets", /platform#markets). Owner: platform. Measured from research/refs/deltus/live/platform/w1440,w810,w390/sections/10-local-markets.* */ [data-section="platformMarkets"] .pf-markets__grid { display: grid; flex: none; width: 100%; gap: 16px; justify-content: center; position: relative; grid-auto-rows: minmax(0, 1fr); grid-template-columns: repeat(2, minmax(50px, 1fr)); } /* the live grid reserves one more row than it has cards at tablet and phone (a Framer authoring artifact that is part of the published layout): 2 columns x 2 rows at tablet, 1 column x 3 rows at phone. */ @media (max-width: 1199px) { [data-section="platformMarkets"] .pf-markets__grid { grid-template-rows: repeat(2, minmax(0, 1fr)); } } @media (max-width: 809px) { [data-section="platformMarkets"] .pf-markets__grid { grid-auto-rows: min-content; grid-template-columns: repeat(1, minmax(50px, 1fr)); grid-template-rows: repeat(3, min-content); } } [data-section="platformMarkets"] .pf-markets__cell { align-self: start; justify-self: start; width: 100%; height: 100%; position: relative; } /* ===== sections/platformParts.css ===== */ /* Building blocks shared by the ten /platform sections (components/platformParts.js). Scoped to [data-section^="platform"], so nothing here can reach another agent's section. Every value is measured from the live site: research/refs/deltus/live/platform/ and the recovered component sources (Icon Card dnTe1y1M6, Action card BE0Kc14HI, Status Pill NYGaXMbLv, Button P90iAy18v). Owner: platform. */ /* ---------- the section frame every /platform section shares ---------- Live: max-width 1080 (hero 920), width 100%, centred, padding 72px 0 → 72px 24px (tablet) → 72px 16px (phone), gap 64 → 48 → 32, and scroll-margin-top 40px so the in-page anchors land in the same place. */ [data-section^="platform"] { display: flex; flex-direction: column; align-items: flex-start; width: 100%; max-width: 1080px; margin: 0 auto; padding: 72px 0; gap: 64px; position: relative; scroll-margin-top: 40px; } @media (max-width: 1199px) { [data-section^="platform"] { padding: 72px 24px; gap: 48px; } } @media (max-width: 809px) { [data-section^="platform"] { padding: 72px 16px; gap: 32px; } } /* ---------- borders ---------- Framer draws every border as an inset overlay (`[data-border]::after`), so it never consumes padding or changes a box's size. Copying that technique keeps our inner widths and heights identical to the live ones. */ [data-section^="platform"] .pf-bd { position: relative; } [data-section^="platform"] .pf-bd::after { content: ""; position: absolute; inset: 0; pointer-events: none; border: var(--pf-bd-w, 1px) solid var(--c-surface-2); border-radius: inherit; } [data-section^="platform"] .pf-bd--b::after { border-width: 0 0 1px; } /* ---------- indicator / status dot colours (Framer colour tokens) ---------- */ [data-section^="platform"] .pf-dot--white { background-color: var(--c-white); } [data-section^="platform"] .pf-dot--blue { background-color: var(--c-blue); } [data-section^="platform"] .pf-dot--violet { background-color: var(--c-violet); } [data-section^="platform"] .pf-dot--pink { background-color: var(--c-pink); } [data-section^="platform"] .pf-dot--orange { background-color: var(--c-orange); } [data-section^="platform"] .pf-dot--mint { background-color: var(--c-mint); } [data-section^="platform"] .pf-dot--green { background-color: var(--c-green); } [data-section^="platform"] .pf-dot--gold { background-color: var(--c-gold); } /* ---------- tag row ---------- */ [data-section^="platform"] .pf-tagrow { display: flex; align-items: center; gap: 12px; flex: none; width: min-content; position: relative; } [data-section^="platform"] .pf-tag { display: flex; align-items: center; gap: 8px; flex: none; width: min-content; position: relative; } [data-section^="platform"] .pf-tag__dot { flex: none; width: 14px; height: 8px; border-radius: 9999px; } [data-section^="platform"] .pf-tag__label { white-space: pre; } /* ---------- section heading ---------- */ [data-section^="platform"] .pf-heading { display: flex; flex-direction: column; align-items: flex-start; gap: 24px; flex: none; width: 100%; max-width: 480px; position: relative; } [data-section^="platform"] .pf-heading__text { display: flex; flex-direction: column; align-items: flex-start; gap: 20px; flex: none; width: 100%; position: relative; } [data-section^="platform"] .pf-heading__title, [data-section^="platform"] .pf-heading__desc { width: 100%; text-wrap: balance; } /* ---------- Icon Card ---------- */ [data-section^="platform"] .pf-iconcard { display: flex; flex-direction: column; align-items: flex-start; justify-content: flex-start; gap: 24px; width: 100%; height: 100%; padding: 24px 20px; overflow: hidden; background: var(--c-bg); border-radius: 4px; position: relative; } [data-section^="platform"] .pf-iconcard__badge { display: flex; align-items: center; justify-content: center; flex: none; width: 64px; height: 64px; border-radius: 999px; overflow: hidden; position: relative; } [data-section^="platform"] .pf-iconcard__icon { width: 24px; height: 24px; flex: none; opacity: .9; --icon-sw: 1.4; color: var(--c-white); } [data-section^="platform"] .pf-iconcard__text { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; flex: none; width: 100%; position: relative; } [data-section^="platform"] .pf-iconcard__text h5, [data-section^="platform"] .pf-iconcard__text p { width: 100%; white-space: pre-wrap; word-break: break-word; overflow-wrap: break-word; } /* ---------- Action card ---------- */ [data-section^="platform"] .pf-actioncard { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; flex: none; width: 100%; position: relative; } [data-section^="platform"] .pf-actioncard__title { display: flex; align-items: center; gap: 8px; flex: none; width: 100%; position: relative; } [data-section^="platform"] .pf-actioncard__icon { flex: none; width: 16px; height: 16px; --icon-sw: 1.8; color: var(--c-text-80); } [data-section^="platform"] .pf-actioncard__title h6 { flex: 1 0 0px; width: 1px; white-space: pre-wrap; word-break: break-word; overflow-wrap: break-word; } [data-section^="platform"] .pf-actioncard p { width: 100%; white-space: pre-wrap; word-break: break-word; overflow-wrap: break-word; } /* ---------- Status Pill ---------- */ [data-section^="platform"] .pf-pill { display: inline-flex; align-items: center; justify-content: center; gap: 6px; flex: none; width: min-content; padding: 4px 10px; border-radius: 100px; background: var(--c-bg); position: relative; } [data-section^="platform"] .pf-pill__dot { flex: none; width: 6px; height: 6px; border-radius: 999px; } [data-section^="platform"] .pf-pill__label { white-space: pre; user-select: none; } /* ---------- Button ---------- Size, radius, typography and both hover states now come from base.css .btn (they match the live Button component P90iAy18v). Only the live label colour change on the secondary hover is added here: T_m9VlS9B-hover sets the label to token 1ef9e3a0 (#fff), up from token 7a4abf4f (80% white). */ [data-section^="platform"] .pf-btn { gap: 0; } [data-section^="platform"] .pf-btn .btn__label { white-space: pre; text-align: center; } [data-section^="platform"] .pf-btn.btn--secondary { transition: background-color .4s var(--spring-btn), color .4s var(--spring-btn), box-shadow .4s var(--spring-btn); } [data-section^="platform"] .pf-btn.btn--secondary:hover { color: var(--c-white); } /* ---------- mockup head ---------- */ [data-section^="platform"] .pf-mockhead { display: flex; align-items: center; justify-content: space-between; flex: none; width: 100%; position: relative; } [data-section^="platform"] .pf-mockhead__text { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; flex: none; width: min-content; } [data-section^="platform"] .pf-mockhead__text p { white-space: pre; } /* ===== sections/platformReporting.css ===== */ /* platformReporting section (live layer "Reporting & workflow", /platform#reporting). Owner: platform. Measured from research/refs/deltus/live/platform/w1440,w810,w390/sections/08-reporting-workflow.* Each Icon Card sits in its own card shell, which is what the grid sizes. */ [data-section="platformReporting"] .pf-reporting__grid { display: grid; flex: none; width: 100%; gap: 16px; justify-content: center; position: relative; grid-auto-rows: minmax(0, 1fr); grid-template-columns: repeat(3, minmax(50px, 1fr)); } @media (max-width: 1199px) { [data-section="platformReporting"] .pf-reporting__grid { grid-template-columns: repeat(2, minmax(50px, 1fr)); } } /* live reserves 6 rows at phone for 5 cards (Framer artifact kept so the section height matches) */ @media (max-width: 809px) { [data-section="platformReporting"] .pf-reporting__grid { grid-auto-rows: min-content; grid-template-columns: repeat(1, minmax(50px, 1fr)); grid-template-rows: repeat(6, min-content); } } [data-section="platformReporting"] .pf-reporting__card { display: flex; flex-direction: column; align-items: flex-start; justify-content: flex-start; gap: 0; align-self: start; justify-self: start; width: 100%; height: 100%; padding: 0; background: var(--c-bg); border-radius: 4px; overflow: hidden; position: relative; } /* ===== sections/platformStart.css ===== */ /* platformStart section (live layer "Start & fairness", /platform#start). Owner: platform. Measured from research/refs/deltus/live/platform/w1440,w810,w390/sections/09-start-fairness.* Two card shells per row; the ones that carry a button push it to the bottom of the card. */ [data-section="platformStart"] .pf-start__grid { display: grid; flex: none; width: 100%; gap: 16px; justify-content: center; position: relative; grid-auto-rows: minmax(0, 1fr); grid-template-columns: repeat(2, minmax(50px, 1fr)); } @media (max-width: 809px) { [data-section="platformStart"] .pf-start__grid { grid-auto-rows: min-content; grid-template-columns: repeat(1, minmax(50px, 1fr)); } } [data-section="platformStart"] .pf-start__card { display: flex; flex-direction: column; align-items: flex-start; justify-content: flex-start; gap: 0; align-self: start; justify-self: start; width: 100%; height: 100%; padding: 0; background: var(--c-bg); border-radius: 4px; overflow: hidden; position: relative; } [data-section="platformStart"] .pf-start__card--action { justify-content: space-between; padding: 0 0 24px; } [data-section="platformStart"] .pf-start__actions { display: flex; align-items: center; flex: none; width: 100%; gap: 8px; padding: 0 20px; position: relative; } /* ===== sections/pricing.css ===== */ /* pricing section (live layer "Pricing", id #pricing). Owner: home-b. Measured from research/refs/deltus/live/home/w1440|w810|w390 and the live stylesheet (.framer-5nlz5b section, Pricing component .framer-5l6aV, Button .framer-rvnfs). */ [data-section="pricing"] { /* Framer spring, bounce .2, duration .4 — the live Button's hover transition (see agents/home-b.md) */ --pr-spring: linear(0, 0.0532, 0.1752, 0.324, 0.4734, 0.6086, 0.7228, 0.8139, 0.8833, 0.9337, 0.9685, 0.9911, 1.0047, 1.0119, 1.0148, 1.015, 1.0136, 1.0116, 1.0093, 1.0071, 1.0051, 1.0036, 1.0023, 1.0014, 1); width: 100%; max-width: var(--content-max); margin: 0 auto; align-items: flex-start; gap: 48px; padding: 72px 0; scroll-margin-top: 40px; } /* ---------- heading ---------- */ [data-section="pricing"] .pr__heading { position: relative; display: flex; flex-direction: column; align-items: flex-start; justify-content: center; gap: 24px; width: 100%; max-width: 480px; } [data-section="pricing"] .pr__tag { display: flex; align-items: center; gap: 8px; width: min-content; } [data-section="pricing"] .pr__tag p { white-space: pre; } [data-section="pricing"] .pr__indicator { flex: none; width: 14px; height: 8px; border-radius: 9999px; background: var(--c-pink); } [data-section="pricing"] .pr__text { display: flex; flex-direction: column; align-items: flex-start; justify-content: center; gap: 20px; width: 100%; } [data-section="pricing"] .pr__text h2, [data-section="pricing"] .pr__text p { width: 100%; word-break: break-word; } /* ---------- plans block ---------- */ [data-section="pricing"] .pr__plans { position: relative; display: flex; flex-direction: column; align-items: flex-start; gap: 16px; width: 100%; } [data-section="pricing"] .pr__plans-inner { position: relative; width: 100%; background: var(--c-bg-deep); } [data-section="pricing"] .pr__cards { position: relative; display: grid; grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); grid-auto-rows: min-content; justify-content: start; gap: 16px; width: 100%; } /* ---------- plan card ---------- */ [data-section="pricing"] .pr__card { position: relative; display: flex; flex-direction: column; align-items: flex-start; place-self: start; gap: 32px; width: 100%; min-width: 340px; padding: 24px 24px 32px; border-radius: 2px; background: var(--c-bg); overflow: hidden; } [data-section="pricing"] .pr__card-content { display: flex; flex-direction: column; align-items: flex-start; gap: 20px; width: 100%; } [data-section="pricing"] .pr__card-head { display: flex; flex-direction: column; align-items: flex-start; justify-content: center; gap: 16px; width: 100%; } [data-section="pricing"] .pr__card-top { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; width: 100%; } [data-section="pricing"] .pr__name { display: flex; flex-direction: column; justify-content: center; width: 100%; height: 30px; } [data-section="pricing"] .pr__name h5 { width: 100%; word-break: break-word; } [data-section="pricing"] .pr__name--badge { flex-direction: row; justify-content: flex-start; align-items: center; gap: 8px; height: auto; } [data-section="pricing"] .pr__name--badge h5 { width: auto; white-space: pre; } [data-section="pricing"] .pr__badge { flex: none; display: flex; align-items: center; justify-content: center; width: min-content; padding: 4px 10px; /* Framer draws data-border="true" as an overlay, so the 1px stroke adds nothing to the box (live: 66.03 x 29) */ box-shadow: inset 0 0 0 1px var(--c-surface-2); border-radius: 100px; } [data-section="pricing"] .pr__badge span { white-space: pre; } [data-section="pricing"] .pr__card-top > p { width: 100%; word-break: break-word; } [data-section="pricing"] .pr__price { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; width: 100%; } [data-section="pricing"] .pr__amount { width: 100%; font: 400 32px/1.1em var(--f-display); letter-spacing: -.04em; color: var(--c-white); text-align: left; } [data-section="pricing"] .pr__amount--num { font-variant-numeric: tabular-nums; font-feature-settings: "zero" on, "tnum" on; } [data-section="pricing"] .pr__price p { width: 100%; word-break: break-word; } [data-section="pricing"] .pr__divider { flex: none; width: 100%; height: 1px; border-radius: 999px; background: var(--c-surface); } [data-section="pricing"] .pr__list { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; width: 100%; overflow: hidden; } [data-section="pricing"] .pr__item { display: flex; align-items: center; gap: 8px; width: 100%; overflow: hidden; } [data-section="pricing"] .pr__check { flex: none; width: 16px; height: 16px; } [data-section="pricing"] .pr__item p { flex: 1 0 0; width: 1px; word-break: break-word; } [data-section="pricing"] .pr__cta { position: relative; width: auto; } /* ---------- buttons ---------- Structure and colour come from the shared .btn in base.css. The live Button component (P90iAy18v) also has hover gestures, which base.css does not carry yet — reproduced here; see agents/home-b.md for the exact source. */ [data-section="pricing"] .btn { transition: background-color .4s var(--pr-spring), box-shadow .4s var(--pr-spring); } [data-section="pricing"] .btn--primary:hover { box-shadow: 0 0 0 2px rgba(255, 255, 255, .5); } [data-section="pricing"] .btn--secondary:hover { background: var(--c-surface-2); } /* ---------- pay-per-removal card ---------- */ [data-section="pricing"] .pr__removal { position: relative; display: flex; align-items: center; gap: 32px; width: 100%; padding: 24px; border-radius: 2px; background: var(--c-bg); overflow: clip; } [data-section="pricing"] .pr__removal-text { flex: 1 0 0; display: flex; align-items: center; gap: 16px; width: 1px; } [data-section="pricing"] .pr__removal-icon { flex: none; display: flex; align-items: center; justify-content: center; width: 48px; height: 48px; border: 1px solid var(--c-surface-2); border-radius: 999px; overflow: clip; } [data-section="pricing"] .pr__removal-icon svg { width: 20px; height: 20px; opacity: .9; color: var(--c-white); } [data-section="pricing"] .pr__removal-copy { flex: 1 0 0; display: flex; flex-direction: column; align-items: flex-start; gap: 6px; width: 1px; } [data-section="pricing"] .pr__removal-copy h5, [data-section="pricing"] .pr__removal-copy p { width: 100%; word-break: break-word; } [data-section="pricing"] .pr__removal-price { flex: none; display: flex; flex-direction: column; align-items: flex-start; gap: 4px; width: min-content; } [data-section="pricing"] .pr__removal-price h3, [data-section="pricing"] .pr__removal-price p { white-space: pre; } [data-section="pricing"] .pr__removal-cta { position: relative; flex: none; width: auto; } /* ---------- plan notes ---------- */ [data-section="pricing"] .pr__notes { display: flex; flex-wrap: wrap; align-items: center; gap: 24px; width: 100%; padding: 8px 0 0; } [data-section="pricing"] .pr__note { flex: none; display: flex; align-items: center; gap: 8px; width: min-content; } [data-section="pricing"] .pr__note svg { flex: none; width: 16px; height: 16px; opacity: .7; color: var(--c-white); } [data-section="pricing"] .pr__note p { white-space: pre; } /* ---------- tablet 810-1199 ---------- */ @media (max-width: 1199px) { [data-section="pricing"] { padding: 72px 24px; } /* 2026-10-09 (T1 H6): at 810px the one-line price unit squeezed the title into a ~170px column. Below 1200px the text takes the full first line; price and button share the second. */ [data-section="pricing"] .pr__removal { flex-wrap: wrap; row-gap: 20px; } [data-section="pricing"] .pr__removal-text { flex: 1 0 100%; width: 100%; } } /* ---------- phone <=809 ---------- */ @media (max-width: 809px) { [data-section="pricing"] { gap: 32px; padding: 72px 16px; } [data-section="pricing"] .pr__removal { flex-direction: column; align-content: flex-start; align-items: flex-start; gap: 20px; padding: 24px 20px; } [data-section="pricing"] .pr__removal-text { flex: none; width: 100%; } [data-section="pricing"] .pr__notes { flex-direction: column; align-content: flex-start; align-items: flex-start; gap: 10px; } } /* ===== sections/privacyPage.css ===== */ /* privacyPage — /privacy-policy, live layer "Main" #hero (page module Ivq1YZFwy.js, hash framer-FOKCF). Measured from the live site at 1440 / 810 / 390 (site/deltus/_shots/forms-legal/privacy-policy-live-w*.tree.txt): one 560px column, padding 48px 0, gap 64px; Sections gap 32px; each Section gap 16px. The page background comes from base.css (body = var(--c-bg-deep) #080a09), as live. */ [data-section="privacyPage"] { width: 100%; max-width: 560px; margin: 0 auto; padding: 48px 0; gap: 64px; scroll-margin-top: 200px; } @media (max-width: 809px) { [data-section="privacyPage"] { padding: 48px 16px; } } /* ---------- heading block ---------- */ [data-section="privacyPage"] .pp__head { display: flex; flex-direction: column; align-items: flex-start; gap: 16px; width: 100%; overflow: hidden; } [data-section="privacyPage"] .pp__tag { display: flex; align-items: center; gap: 8px; width: min-content; } [data-section="privacyPage"] .pp__dot { flex: none; width: 14px; height: 8px; border-radius: 9999px; background: var(--c-white); } [data-section="privacyPage"] .pp__tag p { white-space: pre; } [data-section="privacyPage"] h1 { width: 100%; white-space: pre-wrap; word-break: break-word; } [data-section="privacyPage"] .pp__intro { width: 100%; text-align: left; white-space: pre-wrap; word-break: break-word; } /* ---------- numbered sections ---------- */ [data-section="privacyPage"] .pp__sections { display: flex; flex-direction: column; align-items: center; gap: 32px; width: 100%; overflow: clip; } [data-section="privacyPage"] .pp__section { display: flex; flex-direction: column; align-items: center; gap: 16px; width: 100%; max-width: 560px; overflow: clip; } [data-section="privacyPage"] .pp__title { width: 100%; } [data-section="privacyPage"] .pp__title h5 { width: 100%; white-space: pre-wrap; word-break: break-word; } [data-section="privacyPage"] .pp__body { width: 100%; white-space: pre-wrap; word-break: break-word; } /* Framer's rich text: 10px between blocks (--framer-paragraph-spacing of the 14px preset) */ [data-section="privacyPage"] .pp__body > :not(:first-child) { margin-top: 10px; } [data-section="privacyPage"] .pp__body li > p { margin: 0; } [data-section="privacyPage"] .pp__body li:not(:first-child) { margin-top: 0; } [data-section="privacyPage"] .pp__body li { position: relative; display: list-item; list-style: ""; padding-inline-start: 2ch; } [data-section="privacyPage"] .pp__body ul > li::before { content: "•"; position: absolute; inset-inline-start: 0; } [data-section="privacyPage"] .pp__body ol { counter-reset: pp-item; } [data-section="privacyPage"] .pp__body ol > li { counter-increment: pp-item; } [data-section="privacyPage"] .pp__body ol > li::before { content: counter(pp-item) "."; position: absolute; inset-inline-start: 0; font-variant-numeric: tabular-nums; } /* live: every bold run sits in a span with --framer-text-color #fff, and a few whole blocks carry it too, so bold and those blocks are full white while the body preset stays at 80% */ [data-section="privacyPage"] .pp__body strong { font-weight: 700; color: var(--c-white); } [data-section="privacyPage"] .pp__body .is-white { color: var(--c-white); } [data-section="privacyPage"] .pp__body a { color: var(--c-text-80); text-decoration: underline; } [data-section="privacyPage"] .pp__body a:hover { color: var(--c-white); } /* ===== sections/proof.css ===== */ /* Proof (#proof): heading, the proof-of-removal ledger mock-up and two Feature Cards. Measured from research/refs/deltus/live/home/w1440 . w810 . w390 sections/10-proof.*. The ledger's hairlines are inset shadows: live draws them with a pseudo-element, so they must not change the measured row heights (header row 45px = 12 + 21 + 12, data rows 49px = 14 + 21 + 14). */ [data-section="proof"] .proof__content { display: flex; flex-direction: column; align-items: flex-start; justify-content: flex-start; gap: 16px; width: 100%; } /* ---------- ledger mock-up ---------- */ [data-section="proof"] .ledger { display: flex; flex-direction: column; align-items: flex-start; justify-content: flex-start; gap: 0; width: 100%; padding: 8px 24px 12px; background: var(--c-bg); border-radius: 4px; overflow: clip; } [data-section="proof"] .ledger__header { display: flex; flex-direction: row; align-items: center; justify-content: space-between; width: 100%; padding: 16px 0; } [data-section="proof"] .ledger__title { display: flex; flex-direction: row; align-items: center; gap: 10px; width: min-content; } [data-section="proof"] .ledger__icon { flex: none; width: 18px; height: 18px; } /* live text preset jx9uun = tokens.css .t-button (Host Grotesk 500 16px/110% -.04em #fff) */ [data-section="proof"] .ledger__name { white-space: pre; } [data-section="proof"] .ledger__chip { display: flex; flex-direction: row; align-items: center; justify-content: center; width: min-content; padding: 4px 10px; border-radius: 100px; box-shadow: inset 0 0 0 1px var(--c-surface-2); } [data-section="proof"] .ledger__chip p { white-space: pre; } [data-section="proof"] .ledger__row { display: flex; flex-direction: row; align-items: center; gap: 16px; width: 100%; box-shadow: inset 0 1px 0 0 var(--c-surface); } [data-section="proof"] .ledger__row--head { padding: 12px 0; } [data-section="proof"] .ledger__row--data { padding: 14px 0; } /* column flex ratios, measured: Link 2 . Type 1.3 . Reported to 1.6 . Status 1.7 . Time 1 */ [data-section="proof"] .ledger__link { flex: 2 0 0px; width: 1px; white-space: pre-wrap; } [data-section="proof"] .ledger__type { flex: 1.3 0 0px; width: 1px; white-space: pre-wrap; } [data-section="proof"] .ledger__to { flex: 1.6 0 0px; width: 1px; white-space: pre-wrap; } [data-section="proof"] .ledger__status { flex: 1.7 0 0px; width: 1px; display: flex; flex-direction: row; align-items: center; gap: 8px; } [data-section="proof"] .ledger__status--head { display: block; white-space: pre-wrap; } [data-section="proof"] .ledger__time { flex: 1 0 0px; width: 1px; white-space: pre-wrap; } [data-section="proof"] .ledger__dot { flex: none; width: 8px; height: 8px; border-radius: 999px; } [data-section="proof"] .ledger__statustext { flex: 1 0 0px; width: 1px; white-space: pre-wrap; } /* header row labels are 70% white, row links and status text are solid white */ [data-section="proof"] .ledger__row--head p { color: var(--c-text-70); } [data-section="proof"] .ledger__row--data .ledger__link, [data-section="proof"] .ledger__row--data .ledger__statustext { color: var(--c-white); } /* ---------- the two proof cards ---------- */ [data-section="proof"] .proof__cards { display: grid; width: 100%; gap: 16px; justify-content: start; grid-template-columns: repeat(2, minmax(50px, 1fr)); grid-auto-rows: minmax(0, 1fr); } @media (max-width: 809px) { /* live hides Type, Reported to and Time at the phone breakpoint (hidden-1jgxl8m in the served markup) */ [data-section="proof"] .ledger__type, [data-section="proof"] .ledger__to, [data-section="proof"] .ledger__time { display: none; } [data-section="proof"] .ledger { padding: 8px 16px; } [data-section="proof"] .ledger__header { flex-direction: column; align-items: flex-start; justify-content: flex-start; gap: 10px; } [data-section="proof"] .proof__cards { display: flex; flex-direction: column; align-items: flex-start; justify-content: flex-start; gap: 12px; } } /* ===== sections/solution-shared.css ===== */ /* Shared rules for the seven /solutions sections (owner: solutions-a). Measured from research/refs/deltus/live/sol-ecommerce + sol-fintech-saas (2026-10-05) and from the page CSS in research/refs/deltus/live-html/sol-*.html. Framer draws every "border" as an overlay pseudo-element, so a real border would add 2px to each box. Here that is an inset box-shadow, which has no layout effect either. Breakpoints: desktop 1200+ · tablet 810-1199.98 · phone 809.98 and below. */ /* ---------- section frame: the live sections are the 1080px column themselves ---------- */ [data-section^="solution"] { width: 100%; max-width: 1080px; margin: 0 auto; align-items: flex-start; gap: 64px; padding: 72px 0; scroll-margin-top: 40px; } @media (max-width: 1199.98px) { [data-section^="solution"] { gap: 48px; padding: 72px 24px; } } @media (max-width: 809.98px) { [data-section^="solution"] { gap: 32px; padding: 72px 16px; } } /* ---------- the Framer "jx9uun" h6 preset is tokens.css .t-button; these elements only add wrapping ---------- */ [data-section^="solution"] .sol-h6 { white-space: pre-wrap; word-break: break-word; } /* ---------- accent tones (each solution page picks its own; they are content, not style) ---------- */ [data-section^="solution"] .sol-t-blue { background: var(--c-blue); } [data-section^="solution"] .sol-t-violet { background: var(--c-violet); } [data-section^="solution"] .sol-t-mint { background: var(--c-mint); } [data-section^="solution"] .sol-t-pink { background: var(--c-pink); } [data-section^="solution"] .sol-t-gold { background: var(--c-gold); } [data-section^="solution"] .sol-t-lime { background: var(--c-lime); } [data-section^="solution"] .sol-t-green { background: var(--c-green); } [data-section^="solution"] .sol-t-cyan { background: var(--c-cyan); } [data-section^="solution"] .sol-t-orange { background: var(--c-orange); } [data-section^="solution"] .sol-t-white { background: var(--c-white); } [data-section^="solution"] .sol-t-muted { background: var(--c-text-70); } /* ---------- tag row + outlined badge ---------- */ [data-section^="solution"] .sol-tagrow { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; width: 100%; } [data-section^="solution"] .sol-tag { display: flex; align-items: center; gap: 8px; flex: none; } [data-section^="solution"] .sol-tag__dot { width: 14px; height: 8px; border-radius: 9999px; flex: none; } [data-section^="solution"] .sol-tag p { white-space: pre; } [data-section^="solution"] .sol-badge { display: flex; align-items: center; justify-content: center; gap: 6px; flex: none; padding: 4px 10px; border-radius: 100px; box-shadow: inset 0 0 0 1px var(--c-surface-2); } [data-section^="solution"] .sol-badge p { white-space: pre; } [data-section^="solution"] .sol-badge__dot { width: 6px; height: 6px; border-radius: 9999px; flex: none; } /* ---------- section heading block (tag + h2 + lead), 520px wide on every live page ---------- */ [data-section^="solution"] .sol-heading { display: flex; flex-direction: column; align-items: flex-start; gap: 24px; width: 100%; max-width: 520px; } [data-section^="solution"] .sol-heading__text { display: flex; flex-direction: column; align-items: flex-start; gap: 20px; width: 100%; } /* ---------- icons: Lucide at 24px, stroke 1.4, 90% opacity, exactly as live ---------- */ [data-section^="solution"] .sol-icon { width: 24px; height: 24px; aspect-ratio: 1; flex: none; opacity: .9; color: var(--c-white); } /* ---------- card grid + the shared "Icon card" / "Status card" ---------- */ [data-section^="solution"] .sol-grid { display: grid; width: 100%; gap: 16px; justify-content: center; grid-template-columns: repeat(3, minmax(50px, 1fr)); grid-template-rows: repeat(1, minmax(0, 1fr)); grid-auto-rows: minmax(0, 1fr); } [data-section^="solution"] .sol-grid[data-cols="2"] { grid-template-columns: repeat(2, minmax(50px, 1fr)); } @media (max-width: 1199.98px) { [data-section^="solution"] .sol-grid { grid-template-columns: repeat(2, minmax(50px, 1fr)); } } @media (max-width: 809.98px) { [data-section^="solution"] .sol-grid { display: flex; flex-direction: column; align-items: flex-start; justify-content: flex-start; } } [data-section^="solution"] .sol-card { display: flex; flex-direction: column; align-items: flex-start; align-self: start; gap: 24px; width: 100%; height: 100%; padding: 24px 20px; background: var(--c-bg); border-radius: 4px; overflow: clip; } @media (max-width: 809.98px) { [data-section^="solution"] .sol-card { align-self: unset; height: min-content; } } [data-section^="solution"] .sol-card__top { display: flex; flex-direction: row; align-items: center; justify-content: space-between; width: 100%; } [data-section^="solution"] .sol-card__circle { display: flex; align-items: center; justify-content: center; flex: none; width: 64px; height: 64px; border-radius: 999px; overflow: clip; box-shadow: inset 0 0 0 1px var(--c-surface-2); } [data-section^="solution"] .sol-card__text { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; width: 100%; } /* Live authors a wide last card on pages whose card count does not fill the final row (/solutions/executives: card 5 is 715px at 1440 and a full row at 810). Content sets `span: 2`. */ [data-section^="solution"] .sol-grid > [data-span="2"] { grid-column: span 2; } @media (max-width: 809.98px) { [data-section^="solution"] .sol-grid > [data-span="2"] { grid-column: auto; } } /* ---------- word-by-word hero text: one span per word, spaces left between them as live does ---------- */ [data-section^="solution"] .sol-word { display: inline-block; } /* ===== sections/solutionAddOns.css ===== */ /* "Add-ons": same heading + card grid as "What we take down", two columns wide. Only /solutions/fintech-saas and /solutions/executives have this section. */ [data-section="solutionAddOns"] .sol-grid { grid-template-columns: repeat(2, minmax(50px, 1fr)); } /* ===== sections/solutionCta.css ===== */ /* CTA: one #131517 card, 40px padding, text left (max 480px) and the buttons bottom-right. Section padding is 72px top / 48px bottom and the gap is 16px, unlike the other solution sections. */ [data-section="solutionCta"] { gap: 16px; padding: 72px 0 48px; } @media (max-width: 1199.98px) { [data-section="solutionCta"] { gap: 16px; padding: 72px 24px 48px; } } @media (max-width: 809.98px) { [data-section="solutionCta"] { gap: 16px; padding: 72px 16px 48px; } } [data-section="solutionCta"] .sol-cta__card { display: flex; flex-direction: row; align-items: flex-end; align-content: flex-end; justify-content: space-between; width: 100%; padding: 40px; background: var(--c-bg); border-radius: 4px; overflow: hidden; } [data-section="solutionCta"] .sol-cta__content { display: flex; flex-direction: column; align-items: flex-start; gap: 16px; flex: 1 0 0; width: 1px; max-width: 480px; } [data-section="solutionCta"] .sol-cta__actions { display: flex; flex-direction: row; align-items: center; gap: 8px; flex: none; } @media (max-width: 1199.98px) { [data-section="solutionCta"] .sol-cta__card { flex-direction: column; align-items: flex-start; align-content: flex-start; gap: 32px; } [data-section="solutionCta"] .sol-cta__content { flex: none; width: 100%; } } @media (max-width: 809.98px) { [data-section="solutionCta"] .sol-cta__card { padding: 20px; } } /* ===== sections/solutionFaq.css ===== */ /* FAQ: heading + two columns of accordion cards (template component "FAQ Accordion" SKzZQm08B). Section padding is 72px top / 48px bottom, unlike the other solution sections. */ [data-section="solutionFaq"] { padding: 72px 0 48px; } @media (max-width: 1199.98px) { [data-section="solutionFaq"] { padding: 72px 24px 48px; } } @media (max-width: 809.98px) { [data-section="solutionFaq"] { padding: 72px 16px 48px; } } [data-section="solutionFaq"] .sol-faq__cols { display: flex; flex-direction: row; align-items: flex-start; gap: 16px; width: 100%; } [data-section="solutionFaq"] .sol-faq__col { display: flex; flex-direction: column; align-items: center; gap: 10px; flex: 1 0 0; width: 1px; } @media (max-width: 809.98px) { [data-section="solutionFaq"] .sol-faq__cols { flex-direction: column; gap: 10px; } [data-section="solutionFaq"] .sol-faq__col { flex: none; width: 100%; } } [data-section="solutionFaq"] .sol-faq__item { display: flex; flex-direction: column; align-items: center; justify-content: flex-start; gap: 16px; width: 100%; padding: 18px 16px; background: var(--c-bg); border-radius: 4px; overflow: hidden; } [data-section="solutionFaq"] .sol-faq__head { display: flex; flex-direction: row; align-items: center; justify-content: center; gap: 10px; width: 100%; cursor: pointer; text-align: left; background: none; border: 0; padding: 0; } [data-section="solutionFaq"] .sol-faq__q { flex: 1 0 0; width: 1px; } [data-section="solutionFaq"] .sol-faq__icon { display: flex; align-items: center; justify-content: center; flex: none; width: 16px; height: 16px; aspect-ratio: 1; } [data-section="solutionFaq"] .sol-faq__dot { flex: none; width: 8px; height: 8px; border-radius: 100%; background: var(--c-surface); transition: background-color .4s var(--ease-appear); } [data-section="solutionFaq"] .sol-faq__head:hover .sol-faq__dot { background: var(--c-surface-2); } [data-section="solutionFaq"] .sol-faq__item[data-open="true"] .sol-faq__dot, [data-section="solutionFaq"] .sol-faq__item[data-open="true"] .sol-faq__head:hover .sol-faq__dot { background: var(--c-orange); } [data-section="solutionFaq"] .sol-faq__panel { width: 100%; } /* ===== sections/solutionHero.css ===== */ /* Hero of every /solutions page. Live: 1080px row, 48px gap, 48px top / 72px bottom padding, heading column flex 1 and the "Threats mockup" card flex 1 (496px + 536px at 1440). */ [data-section="solutionHero"] { flex-direction: row; align-items: center; justify-content: flex-start; gap: 48px; padding: 48px 0 72px; } @media (max-width: 1199.98px) { [data-section="solutionHero"] { flex-direction: column; align-items: flex-start; align-content: flex-start; gap: 48px; padding: 48px 24px 72px; } } @media (max-width: 809.98px) { [data-section="solutionHero"] { gap: 40px; padding: 48px 16px 72px; } } /* ---------- left column ---------- */ [data-section="solutionHero"] .sol-hero__heading { display: flex; flex-direction: column; align-items: flex-start; gap: 40px; flex: 1 0 0; width: 1px; } [data-section="solutionHero"] .sol-hero__container { display: flex; flex-direction: column; align-items: flex-start; gap: 24px; width: 100%; } [data-section="solutionHero"] .sol-hero__text { display: flex; flex-direction: column; align-items: flex-start; gap: 20px; width: 100%; } [data-section="solutionHero"] .sol-hero__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; width: 100%; } @media (max-width: 1199.98px) { [data-section="solutionHero"] .sol-hero__heading { flex: none; width: 100%; } } /* ---------- right column: the "Threats mockup" card ---------- */ [data-section="solutionHero"] .sol-panel { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; flex: 1 0 0; width: 1px; padding: 20px; background: var(--c-bg); border-radius: 4px; overflow: clip; box-shadow: inset 0 0 0 1px var(--c-surface); } @media (max-width: 1199.98px) { [data-section="solutionHero"] .sol-panel { flex: none; width: 100%; } } [data-section="solutionHero"] .sol-panel__head { display: flex; align-items: center; gap: 12px; width: 100%; padding: 0 0 8px; } [data-section="solutionHero"] .sol-panel__title { flex: 1 0 0; width: 1px; } [data-section="solutionHero"] .sol-panel__row { display: flex; align-items: center; gap: 12px; width: 100%; padding: 12px 14px; background: var(--c-surface); border-radius: 2px; } [data-section="solutionHero"] .sol-panel__circle { display: flex; align-items: center; justify-content: center; flex: none; width: 36px; height: 36px; border-radius: 999px; overflow: clip; box-shadow: inset 0 0 0 1px var(--c-surface-2); } [data-section="solutionHero"] .sol-panel__circle .sol-icon { width: 16px; height: 16px; } [data-section="solutionHero"] .sol-panel__link { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; flex: 1 0 0; width: 1px; } @media (max-width: 809.98px) { [data-section="solutionHero"] .sol-panel__row { flex-direction: column; align-items: flex-start; align-content: flex-start; gap: 8px; } [data-section="solutionHero"] .sol-panel__circle { display: none; } [data-section="solutionHero"] .sol-panel__link { flex: none; width: 100%; } } /* ===== sections/solutionHow.css ===== */ /* "How it works": heading + a 3-column grid of numbered step cards. Live keeps 3 columns at tablet. */ [data-section="solutionHow"] .sol-steps { display: grid; width: 100%; gap: 16px; justify-content: center; grid-template-columns: repeat(3, minmax(50px, 1fr)); grid-template-rows: repeat(1, minmax(0, 1fr)); grid-auto-rows: minmax(0, 1fr); } @media (max-width: 809.98px) { [data-section="solutionHow"] .sol-steps { display: flex; flex-direction: column; align-items: flex-start; justify-content: flex-start; } } [data-section="solutionHow"] .sol-card__circle p { white-space: pre; } /* ===== sections/solutionProof.css ===== */ /* "Proof": heading + a row with the ledger card (flex 1.5) and a side column (flex 1) holding the optional stat card and the status legend. Stacks below 1200px. */ [data-section="solutionProof"] .sol-proof__row { display: flex; flex-direction: row; align-items: flex-start; gap: 16px; width: 100%; } @media (max-width: 1199.98px) { [data-section="solutionProof"] .sol-proof__row { flex-direction: column; } } /* ---------- ledger ---------- */ [data-section="solutionProof"] .sol-ledger { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; flex: 1.5 0 0; width: 1px; padding: 20px; background: var(--c-bg); border-radius: 4px; overflow: clip; box-shadow: inset 0 0 0 1px var(--c-surface); } [data-section="solutionProof"] .sol-ledger__head { display: flex; align-items: center; gap: 12px; width: 100%; padding: 0 0 8px; } [data-section="solutionProof"] .sol-ledger__title { flex: 1 0 0; width: 1px; } [data-section="solutionProof"] .sol-ledger__row { display: flex; align-items: center; gap: 12px; width: 100%; padding: 12px 14px; background: var(--c-surface); border-radius: 2px; } [data-section="solutionProof"] .sol-ledger__link { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; flex: 1 0 0; width: 1px; } /* ---------- side column ---------- */ [data-section="solutionProof"] .sol-proof__side { display: flex; flex-direction: column; align-items: flex-start; gap: 16px; flex: 1 0 0; width: 1px; } [data-section="solutionProof"] .sol-stat { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; width: 100%; padding: 24px 20px; background: var(--c-bg); border-radius: 4px; } [data-section="solutionProof"] .sol-stat__number { display: flex; align-items: center; gap: 10px; width: 100%; } [data-section="solutionProof"] .sol-stat__dot { width: 8px; height: 14px; border-radius: 9999px; flex: none; } [data-section="solutionProof"] .sol-legend { display: flex; flex-direction: column; align-items: flex-start; gap: 16px; width: 100%; padding: 24px 20px; background: var(--c-bg); border-radius: 4px; } [data-section="solutionProof"] .sol-legend__item { display: flex; align-items: flex-start; gap: 10px; width: 100%; } [data-section="solutionProof"] .sol-legend__dotwrap { display: flex; flex-direction: column; align-items: center; justify-content: center; flex: none; padding: 7px 0 0; } [data-section="solutionProof"] .sol-legend__dot { width: 8px; height: 8px; border-radius: 9999px; flex: none; } [data-section="solutionProof"] .sol-legend__text { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; flex: 1 0 0; width: 1px; } @media (max-width: 1199.98px) { [data-section="solutionProof"] .sol-ledger, [data-section="solutionProof"] .sol-proof__side { flex: none; width: 100%; } } @media (max-width: 809.98px) { [data-section="solutionProof"] .sol-ledger__row { flex-direction: column; align-items: flex-start; align-content: flex-start; gap: 8px; } [data-section="solutionProof"] .sol-ledger__link { flex: none; width: 100%; } } /* ===== sections/solutionTakedown.css ===== */ /* "What we take down": heading + the shared card grid (see solution-shared.css). /solutions/more uses the same section for "Who else we protect", with the same card. */ /* ===== sections/termsPage.css ===== */ /* termsPage — /terms, live layer "Main" #hero (page module cnJ3tVc0u.js, hash framer-SHYxg). Measured from the live site at 1440 / 810 / 390 (site/deltus/_shots/forms-legal/terms-live-w*.tree.txt): one 560px column, padding 48px 0, gap 64px; Sections gap 32px; each Section gap 16px. The page background comes from base.css (body = var(--c-bg-deep) #080a09), as live. */ [data-section="termsPage"] { width: 100%; max-width: 560px; margin: 0 auto; padding: 48px 0; gap: 64px; scroll-margin-top: 200px; } @media (max-width: 809px) { [data-section="termsPage"] { padding: 48px 16px; } } /* ---------- heading block ---------- */ [data-section="termsPage"] .tp__head { display: flex; flex-direction: column; align-items: flex-start; gap: 16px; width: 100%; overflow: hidden; } [data-section="termsPage"] .tp__tag { display: flex; align-items: center; gap: 8px; width: min-content; } [data-section="termsPage"] .tp__dot { flex: none; width: 14px; height: 8px; border-radius: 9999px; background: var(--c-white); } [data-section="termsPage"] .tp__tag p { white-space: pre; } [data-section="termsPage"] h1 { width: 100%; white-space: pre-wrap; word-break: break-word; } [data-section="termsPage"] .tp__intro { width: 100%; text-align: left; white-space: pre-wrap; word-break: break-word; } /* ---------- numbered sections ---------- */ [data-section="termsPage"] .tp__sections { display: flex; flex-direction: column; align-items: center; gap: 32px; width: 100%; overflow: clip; } [data-section="termsPage"] .tp__section { display: flex; flex-direction: column; align-items: center; gap: 16px; width: 100%; max-width: 560px; overflow: clip; } [data-section="termsPage"] .tp__title { width: 100%; } [data-section="termsPage"] .tp__title h5 { width: 100%; white-space: pre-wrap; word-break: break-word; } [data-section="termsPage"] .tp__body { width: 100%; white-space: pre-wrap; word-break: break-word; } /* Framer's rich text: 10px between blocks (--framer-paragraph-spacing of the 14px preset) */ [data-section="termsPage"] .tp__body > :not(:first-child) { margin-top: 10px; } [data-section="termsPage"] .tp__body li > p { margin: 0; } [data-section="termsPage"] .tp__body li:not(:first-child) { margin-top: 0; } [data-section="termsPage"] .tp__body li { position: relative; display: list-item; list-style: ""; padding-inline-start: 2ch; } [data-section="termsPage"] .tp__body ul > li::before { content: "•"; position: absolute; inset-inline-start: 0; } [data-section="termsPage"] .tp__body ol { counter-reset: tp-item; } [data-section="termsPage"] .tp__body ol > li { counter-increment: tp-item; } [data-section="termsPage"] .tp__body ol > li::before { content: counter(tp-item) "."; position: absolute; inset-inline-start: 0; font-variant-numeric: tabular-nums; } /* live: every bold run sits in a span with --framer-text-color #fff, and a few whole blocks carry it too, so bold and those blocks are full white while the body preset stays at 80% */ [data-section="termsPage"] .tp__body strong { font-weight: 700; color: var(--c-white); } [data-section="termsPage"] .tp__body .is-white { color: var(--c-white); } [data-section="termsPage"] .tp__body a { color: var(--c-text-80); text-decoration: underline; } [data-section="termsPage"] .tp__body a:hover { color: var(--c-white); } /* ===== sections/whereWeReport.css ===== */ /* whereWeReport section (live layer "Where we report", element id #integrations). Owner: home-a. Heading + CTA + the "Logos ticker" (xDC8qSvur) of "Channel Card" (D2HoiqIds) tiles. Values measured from research/refs/deltus/live/home/w1440|w810|w390/sections/05-where-we-report.*. */ [data-section="whereWeReport"] { align-items: flex-start; width: 100%; max-width: var(--content-max); margin: 0 auto; padding: 72px 0; gap: 48px; scroll-margin-top: 40px; } @media (max-width: 1199px) { [data-section="whereWeReport"] { padding: 72px 24px; } } @media (max-width: 809px) { [data-section="whereWeReport"] { padding: 72px 16px; } } .wr__container { display: flex; flex-direction: column; align-items: flex-start; gap: 40px; width: 100%; max-width: 480px; } .wr__heading { display: flex; flex-direction: column; justify-content: center; align-items: flex-start; gap: 24px; width: 100%; } .wr__tag { display: flex; align-items: center; gap: 8px; width: min-content; } .wr__tag p { white-space: pre; } .wr__tag-dot { flex: none; width: 14px; height: 8px; border-radius: 9999px; background: var(--c-cyan); } .wr__text { display: flex; flex-direction: column; justify-content: center; align-items: flex-start; gap: 20px; width: 100%; } .wr__text h2, .wr__text p { width: 100%; } .wr__cta { flex: none; width: auto; } /* ---------- ticker ---------- Framer's Ticker: direction left, gap 12, speed 100px/s, fade 25% (so 12.5% at each end), hover 0.6x. One set of ten 168px cards plus gaps is 1800px wide, so one loop is 1800px / 18s. */ .wr-ticker { display: flex; justify-content: center; align-items: center; gap: 10px; width: 100%; overflow: clip; } .wr-ticker__viewport { display: flex; align-items: center; flex: 1 1 0; min-width: 0; height: 112px; max-width: 100%; overflow: hidden; -webkit-mask-image: linear-gradient(to right, rgba(0, 0, 0, 0) 0%, rgb(0, 0, 0) 12.5%, rgb(0, 0, 0) 87.5%, rgba(0, 0, 0, 0) 100%); mask-image: linear-gradient(to right, rgba(0, 0, 0, 0) 0%, rgb(0, 0, 0) 12.5%, rgb(0, 0, 0) 87.5%, rgba(0, 0, 0, 0) 100%); } .wr-ticker__track { display: flex; align-items: center; gap: 12px; width: 100%; height: 100%; max-width: 100%; animation: wr-ticker 18s linear infinite; will-change: transform; } @keyframes wr-ticker { from { transform: translateX(0); } to { transform: translateX(-1800px); } } @media (prefers-reduced-motion: reduce) { .wr-ticker__track { animation: none; } } .wr-item { flex: none; width: 168px; height: 112px; } .wr-card { display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 14px; width: 168px; height: 112px; padding: 0 16px; overflow: hidden; background: var(--c-bg); border-radius: 4px; } .wr-card__icon { flex: none; width: 28px; height: 28px; opacity: .9; fill: none; stroke: var(--c-white); stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; } .wr-card__label { width: 100%; text-align: center; font: 400 14px/150% var(--f-display); letter-spacing: -.02em; color: var(--c-text-80); } /* ===== sections/whoWeServe.css ===== */ /* whoWeServe section (live layer "Who we serve", id #about). Owner: home-b. Measured from research/refs/deltus/live/home/w1440|w810|w390 and the live stylesheet (.framer-k7ug20 section, .framer-9rxad1 rows, .framer-1vlmtod image, Action card .framer-rukM9). */ [data-section="whoWeServe"] { /* Framer spring, bounce .2, duration .4 — the live Button's hover transition (see agents/home-b.md) */ --wws-spring: linear(0, 0.0532, 0.1752, 0.324, 0.4734, 0.6086, 0.7228, 0.8139, 0.8833, 0.9337, 0.9685, 0.9911, 1.0047, 1.0119, 1.0148, 1.015, 1.0136, 1.0116, 1.0093, 1.0071, 1.0051, 1.0036, 1.0023, 1.0014, 1); width: 100%; max-width: var(--content-max); margin: 0 auto; align-items: flex-start; gap: 64px; padding: 72px 0; scroll-margin-top: 40px; } /* ---------- heading ---------- */ [data-section="whoWeServe"] .wws__heading { position: relative; display: flex; flex-direction: column; align-items: flex-start; justify-content: center; gap: 24px; width: 100%; max-width: 480px; } [data-section="whoWeServe"] .wws__tag { display: flex; align-items: center; gap: 8px; width: min-content; } [data-section="whoWeServe"] .wws__tag p { white-space: pre; } [data-section="whoWeServe"] .wws__indicator { flex: none; width: 14px; height: 8px; border-radius: 9999px; background: var(--c-blue); } [data-section="whoWeServe"] .wws__text { display: flex; flex-direction: column; align-items: flex-start; justify-content: center; gap: 20px; width: 100%; } [data-section="whoWeServe"] .wws__text h2, [data-section="whoWeServe"] .wws__text p { width: 100%; word-break: break-word; } /* ---------- image / text block ---------- */ [data-section="whoWeServe"] .wws__block { position: relative; display: flex; align-items: center; justify-content: center; gap: 64px; width: 100%; overflow: hidden; } [data-section="whoWeServe"] .wws__image { position: relative; flex: 1 0 0; display: flex; flex-direction: column; align-items: center; justify-content: flex-start; width: 1px; aspect-ratio: 1.30256; padding: 56px 58px 0; border-radius: 4px; overflow: clip; } [data-section="whoWeServe"] .wws__image-bg { position: absolute; inset: 0; border-radius: inherit; } [data-section="whoWeServe"] .wws__image-bg img { width: 100%; height: 100%; object-fit: cover; object-position: center; border-radius: inherit; } /* ---------- "Acme" mockup panel ---------- */ [data-section="whoWeServe"] .wws__panel { position: relative; flex: 1 0 0; display: flex; flex-direction: column; align-items: flex-start; gap: 8px; width: 100%; height: 1px; padding: 18px 16px 16px; background: #f4f4f7; border-radius: 6px 6px 0 0; overflow: clip; } [data-section="whoWeServe"] .wws__panel-head { display: flex; align-items: center; justify-content: space-between; width: 100%; padding: 0 4px 6px; } [data-section="whoWeServe"] .wws__panel-title { display: flex; align-items: center; gap: 8px; width: min-content; } [data-section="whoWeServe"] .wws__accent { flex: none; width: 3px; height: 16px; border-radius: 2px; background: var(--c-blue); } [data-section="whoWeServe"] .wws__panel-title p { font: 500 13px/1.4em var(--f-sans); letter-spacing: normal; color: #08090a; white-space: pre; } [data-section="whoWeServe"] .wws__chip { flex: none; display: flex; align-items: center; justify-content: center; width: min-content; padding: 3px 8px; border-radius: 100px; box-shadow: inset 0 0 0 1px rgba(8, 9, 10, .12); /* Framer draws this border as an overlay */ } [data-section="whoWeServe"] .wws__chip p { font: 500 11px/1.3em var(--f-sans); letter-spacing: normal; color: rgba(8, 9, 10, .6); white-space: pre; } [data-section="whoWeServe"] .wws__row { flex: none; display: flex; align-items: center; gap: 12px; width: 100%; padding: 11px 12px; background: var(--c-white); border-radius: 6px; } [data-section="whoWeServe"] .wws__row-text { flex: 1 0 0; display: flex; flex-direction: column; align-items: flex-start; gap: 3px; width: 1px; } [data-section="whoWeServe"] .wws__row-main, [data-section="whoWeServe"] .wws__row-sub { width: 100%; display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: clip; white-space: pre-line; word-break: break-word; letter-spacing: normal; } [data-section="whoWeServe"] .wws__row-main { font: 500 13px/1.35em var(--f-sans); color: #08090a; } [data-section="whoWeServe"] .wws__row-sub { font: 400 11px/1.35em var(--f-sans); color: rgba(8, 9, 10, .65); } /* 2026-10-09 (T1 §4): .55 = 4.42:1 on white, below AA */ [data-section="whoWeServe"] .wws__status { flex: none; display: flex; align-items: center; gap: 6px; width: min-content; padding: 4px 8px; background: rgba(8, 9, 10, .04); border-radius: 100px; } [data-section="whoWeServe"] .wws__status p { font: 500 11px/1.3em var(--f-sans); letter-spacing: normal; color: rgba(8, 9, 10, .75); white-space: pre; } [data-section="whoWeServe"] .wws__dot { flex: none; width: 6px; height: 6px; border-radius: 999px; } [data-section="whoWeServe"] .wws__dot--green { background: var(--c-green); } [data-section="whoWeServe"] .wws__dot--gold { background: var(--c-gold); } [data-section="whoWeServe"] .wws__dot--blue { background: var(--c-blue); } [data-section="whoWeServe"] .wws__dot--orange { background: var(--c-orange); } /* ---------- block copy ---------- */ [data-section="whoWeServe"] .wws__content { position: relative; flex: 1 0 0; display: flex; flex-direction: column; align-items: flex-start; justify-content: center; gap: 24px; width: 1px; } [data-section="whoWeServe"] .wws__content-text { display: flex; flex-direction: column; align-items: flex-start; justify-content: center; gap: 12px; width: 100%; max-width: 400px; } [data-section="whoWeServe"] .wws__content-text h3, [data-section="whoWeServe"] .wws__content-text p { width: 100%; word-break: break-word; } [data-section="whoWeServe"] .wws__buttons { display: flex; align-items: center; justify-content: flex-start; gap: 8px; width: min-content; } /* ---------- buttons ---------- Structure and colour come from the shared .btn in base.css; the live Button's hover gestures are added here. */ [data-section="whoWeServe"] .btn { transition: background-color .4s var(--wws-spring), box-shadow .4s var(--wws-spring); } [data-section="whoWeServe"] .btn--primary:hover { box-shadow: 0 0 0 2px rgba(255, 255, 255, .5); } [data-section="whoWeServe"] .btn--secondary:hover { background: var(--c-surface-2); } /* ---------- "more solutions" action cards ---------- */ [data-section="whoWeServe"] .wws__cards { position: relative; display: grid; grid-template-columns: repeat(3, minmax(50px, 1fr)); grid-auto-rows: minmax(0, 1fr); justify-content: start; gap: 16px; width: 100%; } [data-section="whoWeServe"] .wws__cell { position: relative; place-self: start; width: 100%; height: 100%; } [data-section="whoWeServe"] .wws__card { display: flex; flex-direction: column; align-items: flex-start; gap: 20px; width: 100%; height: 100%; padding: 24px 20px; border-radius: 4px; background: var(--c-bg); overflow: hidden; } [data-section="whoWeServe"] .wws__card-top { display: flex; align-items: center; justify-content: space-between; width: 100%; } [data-section="whoWeServe"] .wws__card-icon { flex: none; display: flex; align-items: center; justify-content: center; width: 48px; height: 48px; border: 1px solid var(--c-surface-2); border-radius: 999px; overflow: clip; } [data-section="whoWeServe"] .wws__card-icon svg { width: 20px; height: 20px; opacity: .9; color: var(--c-white); } [data-section="whoWeServe"] .wws__card-text { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; width: 100%; } [data-section="whoWeServe"] .wws__card-text h5, [data-section="whoWeServe"] .wws__card-text p { width: 100%; word-break: break-word; } [data-section="whoWeServe"] .wws__card-link { display: flex; align-items: center; gap: 6px; width: min-content; } [data-section="whoWeServe"] .wws__card-link p { color: var(--c-white); white-space: pre; } [data-section="whoWeServe"] .wws__card-link svg { flex: none; width: 14px; height: 14px; color: var(--c-white); } /* ---------- tablet 810-1199 ---------- */ @media (max-width: 1199px) { [data-section="whoWeServe"] { gap: 48px; padding: 72px 24px; } [data-section="whoWeServe"] .wws__image { padding: 38px 40px 0; } [data-section="whoWeServe"] .wws__panel-head { flex-direction: column; align-items: flex-start; gap: 6px; } } /* ---------- phone <=809 ---------- */ @media (max-width: 809px) { [data-section="whoWeServe"] { gap: 48px; padding: 72px 16px; } [data-section="whoWeServe"] .wws__block { flex-direction: column; gap: 24px; } [data-section="whoWeServe"] .wws__image { flex: none; width: 100%; padding: 40px 40px 0; order: 0; } [data-section="whoWeServe"] .wws__content { flex: none; width: 100%; order: 1; } [data-section="whoWeServe"] .wws__cards { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; } [data-section="whoWeServe"] .wws__cell { align-self: unset; height: auto; } }