/* ───────────────────────────────────────────────────────────────────────── DotRadar — getdotradar.com Palette sampled directly out of the logo artwork: #2f8fdb the "Radar" blue #0b1e3d the "Dot" near-black #3070f0 the mark's bright blue #70e0f0 the mark's cyan highlight Blue carries every accent; black and white carry everything else. ───────────────────────────────────────────────────────────────────────── */ :root { --void: #0b1e3d; --void-2: #112a52; --navy: #0b1e3d; --paper: #ffffff; --paper-2: #f2f6fb; --surface: #ffffff; --line: #dbe4ef; --line-soft: #eaf0f7; --ink: #0b1e3d; --ink-2: #44556e; --ink-3: #62718a; /* Blue is the one accent. "signal" keeps its name so every existing rule still resolves, but it now means brand blue rather than green. */ --signal: #2f8fdb; --signal-lift: #4aa3ea; --signal-text: #1c6fb0; --accent: #3070f0; --accent-lift: #70b6f5; --warn: #b45309; --on-dark: #eef4fb; --on-dark-2: #a9bdd6; --on-dark-3: #8399b6; --dark-line: rgba(169,189,214,.22); /* Button fill: solved so WHITE label text clears AA (4.57:1). The lighter brand blue is only 3.46 against white and fails as a filled control. */ --emph: #287abc; --emph-ink: #ffffff; --emph-hover:#1c6fb0; --display: Archivo, "Helvetica Neue", Arial, sans-serif; --body: Archivo, "Helvetica Neue", Arial, sans-serif; --mono: "Martian Mono", ui-monospace, "SF Mono", Menlo, monospace; --frame: 1160px; --r: 3px; /* was 12px — rounded cards everywhere read as template */ } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --paper: #071528; --paper-2: #0b1e3d; --surface: #0f2547; --line: #1e3a63; --line-soft: #172f54; --ink: #eef4fb; --ink-2: #b3c6dd; --ink-3: #8ea4c0; --signal: #4aa3ea; --signal-text: #70b6f5; --accent: #70b6f5; --emph: #4aa3ea; --emph-ink: #04182f; /* dark label on a light blue fill: 7.4:1 */ --emph-hover:#70b6f5; --warn: #f0a94b; } } :root[data-theme="dark"] { --paper: #071528; --paper-2: #0b1e3d; --surface: #0f2547; --line: #1e3a63; --line-soft: #172f54; --ink: #eef4fb; --ink-2: #b3c6dd; --ink-3: #8ea4c0; --signal: #4aa3ea; --signal-text: #70b6f5; --accent: #70b6f5; --emph: #4aa3ea; --emph-ink: #04182f; /* dark label on a light blue fill: 7.4:1 */ --emph-hover:#70b6f5; --warn: #f0a94b; } html { scroll-behavior: smooth; } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } } section[id], header[id] { scroll-margin-top: 80px; } .skip { position: absolute; left: 12px; top: -60px; z-index: 100; background: var(--emph); color: var(--emph-ink); font-weight: 600; font-size: 14px; padding: 10px 16px; border-radius: 8px; text-decoration: none; transition: top .15s ease; } .skip:focus { top: 12px; } *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; } body { margin: 0; background: var(--paper); color: var(--ink); font-family: var(--body); font-size: 17px; line-height: 1.6; -webkit-font-smoothing: antialiased; } h1, h2, h3, h4 { font-family: var(--display); font-weight: 700; text-wrap: balance; margin: 0; letter-spacing: -0.02em; } /* The width axis, used only on the two display levels. Archivo at wdth 125 reads engineered rather than default, and it is the single biggest reason this page no longer looks like every other B2B page shipped this year. h3/h4 sit at 112 so the step down is a change of width as well as of size. */ h1, h2 { font-variation-settings: "wdth" 125; font-weight: 800; letter-spacing: -0.012em; } h3, h4 { font-variation-settings: "wdth" 112; } p { margin: 0; } a { color: inherit; } img, svg { max-width: 100%; } :focus-visible { outline: 2px solid var(--accent-lift); outline-offset: 3px; border-radius: 4px; } @media (prefers-reduced-motion: reduce) { * { animation: none !important; transition: none !important; } } .frame { width: 100%; max-width: var(--frame); margin-inline: auto; padding-inline: 24px; } .prose { max-width: 62ch; } .eyebrow { font-family: var(--mono); font-size: 11.5px; font-weight: 600; letter-spacing: .04em; letter-spacing: .16em; text-transform: uppercase; color: var(--ink-3); margin: 0 0 14px; } .dark .eyebrow { color: var(--on-dark-3); } .num { font-family: var(--mono); font-variant-numeric: tabular-nums; } /* ── nav ───────────────────────────────────────────────────────────────── */ .nav { position: sticky; top: 0; z-index: 50; background: rgba(11,30,61,.88); backdrop-filter: blur(12px); border-bottom: 1px solid var(--dark-line); } .nav-in { display: flex; align-items: center; gap: 28px; height: 66px; position: relative; } /* The real wordmark. It carries the brand better than type ever would, so it replaces the old text-plus-dot lockup everywhere it appeared. */ .brand { display: inline-flex; align-items: center; text-decoration: none; flex: none; } .brand img { height: 30px; width: auto; display: block; } .brand-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--signal-lift); box-shadow: 0 0 0 3px rgba(47,143,219,.20); flex: none; } @media (max-width: 620px) { .brand img { height: 25px; } } .nav-links { display: flex; align-items: center; gap: 26px; margin-left: auto; font-size: 15px; } /* Pricing is a plain sitting beside two elements. Those carry the dropdown caret and its own padding, so the three items were on different baselines and Pricing read as misaligned. Same box on all three. */ .nav-links > a, .nav-links .dd > summary { display: inline-flex; align-items: center; gap: 6px; padding: 4px 0; line-height: 1.2; color: var(--on-dark-2); text-decoration: none; } .nav-links > a:hover { color: #fff; } .nav-links a:hover { color: var(--on-dark); } .nav-cta { display: flex; gap: 10px; align-items: center; } /* ⚠️ Below 860px the whole nav was display:none, so on a phone — most of the traffic — the only route to Features, Resources or Pricing was to scroll the entire page to the footer. The links now collapse into a menu instead of disappearing. Checkbox toggle so it works with no JavaScript. */ .burger { display: none; } @media (max-width: 860px) { .nav-cta { margin-left: auto; } .burger { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 9px; cursor: pointer; border: 1px solid rgba(169,189,214,.3); flex: none; order: 3; } .burger span, .burger span::before, .burger span::after { content: ""; display: block; width: 17px; height: 2px; border-radius: 2px; background: var(--on-dark); position: relative; } .burger span::before { position: absolute; top: -5px; } .burger span::after { position: absolute; top: 5px; } #navtoggle:checked ~ .burger span { background: transparent; } #navtoggle:checked ~ .burger span::before { top: 0; transform: rotate(45deg); } #navtoggle:checked ~ .burger span::after { top: 0; transform: rotate(-45deg); } .nav-links { display: none; position: absolute; top: 66px; left: 0; right: 0; flex-direction: column; align-items: stretch; gap: 0; background: var(--void-2); border-bottom: 1px solid var(--dark-line); padding: 10px 16px 18px; max-height: calc(100vh - 66px); overflow-y: auto; box-shadow: 0 20px 50px rgba(0,0,0,.45); } #navtoggle:checked ~ .nav-links { display: flex; } .nav-links > a, .nav-links .dd > summary { padding: 13px 2px; font-size: 16px; font-weight: 600; color: var(--on-dark); } .nav-links .dd { border-bottom: 1px solid var(--dark-line); } .nav-links > a { border-bottom: 1px solid var(--dark-line); } .nav-links > a:last-child { border-bottom: 0; } } /* At phone width the brand plus two buttons no longer fit and the primary CTA was clipping off the right edge. Sign-in lives in the footer too, so the nav keeps the one action that matters. */ @media (max-width: 620px) { .nav-in { gap: 12px; } .nav-cta .btn-ghost-dark { display: none; } .nav-cta .btn { padding: 9px 15px; font-size: 14px; } .brand { font-size: 17px; } } /* Narrowest phones (320px): brand + CTA + burger measured 304px inside a 272px frame, so the burger hung 9px off the right edge. Everything tightens. */ @media (max-width: 380px) { .nav-in { gap: 10px; } .brand img { height: 22px; } .nav-cta .btn { padding: 8px 11px; font-size: 13px; } .burger { width: 36px; height: 36px; } } /* ── nav dropdowns ─────────────────────────────────────────────────────────
rather than a hover menu: hover menus are unusable on a phone and invisible to a keyboard. This opens on click/Enter, works on touch, and the only JS is closing it on Escape or an outside click. */ .dd { position: relative; } .dd > summary { list-style: none; cursor: pointer; color: var(--on-dark-2); font-size: 15px; display: inline-flex; align-items: center; gap: 6px; padding: 4px 0; } .dd > summary::-webkit-details-marker { display: none; } .dd > summary::after { content: ""; width: 5px; height: 5px; border-right: 1.6px solid currentColor; border-bottom: 1.6px solid currentColor; transform: rotate(45deg) translate(-1px,-1px); transition: transform .15s ease; flex: none; } .dd[open] > summary::after { transform: rotate(-135deg) translate(-2px,-2px); } .dd > summary:hover, .dd[open] > summary { color: #fff; } .dd-menu { position: absolute; top: calc(100% + 14px); left: -14px; z-index: 60; min-width: 330px; max-width: 380px; background: var(--void-2); border: 1px solid var(--dark-line); border-radius: 13px; padding: 9px; box-shadow: 0 20px 50px rgba(0,0,0,.45); display: flex; flex-direction: column; gap: 1px; } .dd-menu a { display: block; padding: 10px 12px; border-radius: 8px; text-decoration: none; color: var(--on-dark); font-size: 14.5px; font-weight: 600; line-height: 1.35; } .dd-menu a span.pdf-tag { display: inline; } .dd-menu a span { display: block; font-weight: 400; font-size: 13px; color: var(--on-dark-2); margin-top: 2px; } .dd-menu a:hover { background: rgba(255,255,255,.06); } .dd-menu a:hover span { color: var(--on-dark); } .dd-h { font-family: var(--mono); font-size: 10px; letter-spacing: .14em; text-transform: uppercase; color: var(--on-dark-3); padding: 10px 12px 6px; } .dd-menu hr { border: 0; border-top: 1px solid var(--dark-line); margin: 6px 8px; } /* The chip belongs beside the TITLE. As an ::after on the whole it landed under the description, because the description is a block. */ .pdf-tag { font-family: var(--mono); font-size: 9.5px; letter-spacing: .1em; font-weight: 600; color: var(--signal-lift); border: 1px solid rgba(74,163,234,.4); border-radius: 4px; padding: 1px 5px; margin-left: 8px; vertical-align: 1px; white-space: nowrap; } @media (max-width: 980px) { .dd-menu { position: static; min-width: 0; box-shadow: none; margin-top: 8px; } } .btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; font-family: var(--body); font-weight: 600; font-size: 15px; padding: 11px 20px; border-radius: 9px; text-decoration: none; border: 1px solid transparent; cursor: pointer; white-space: nowrap; transition: transform .12s ease, background .12s ease, border-color .12s ease; } .btn:active { transform: translateY(1px); } .btn-primary { background: var(--emph); color: var(--emph-ink); } .btn-primary:hover { background: var(--emph-hover); } .btn-ghost-dark { border-color: rgba(159,179,201,.34); color: var(--on-dark); } .btn-ghost-dark:hover { border-color: var(--on-dark-2); } .btn-solid { background: var(--emph); color: var(--emph-ink); } .btn-solid:hover { background: var(--emph-hover); } .btn-ghost { border-color: var(--line); color: var(--ink); background: var(--surface); } .btn-ghost:hover { border-color: var(--ink-3); } .btn-lg { padding: 14px 26px; font-size: 16px; } /* ── dark sections ─────────────────────────────────────────────────────── */ .dark { background: var(--void); color: var(--on-dark); } .dark h1, .dark h2, .dark h3 { color: #fff; } .dark p { color: var(--on-dark-2); } /* ── hero ──────────────────────────────────────────────────────────────── */ .hero { position: relative; overflow: hidden; padding: 84px 0 150px; } /* the extra depth is the backsplash's band */ /* ── hero backsplash ────────────────────────────────────────────────────── A road running at a radar target, with a truck on it. Drawn in vector so it is sharp at any resolution and costs ~9KB rather than an image request. Everything sits BEHIND the copy; the copy is lifted with z-index rather than the drawing being faded to nothing, so it stays visible without competing. */ .backsplash { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 0; pointer-events: none; } /* ── motion ─────────────────────────────────────────────────────────────── The lane markings are one group scaled about the vanishing point. The dashes sit on a geometric series (ratio 0.8), so scaling by exactly 1.25 lands every dash on its neighbour's start — the loop is seamless with no jump, and the dashes grow and accelerate as they come at you, which is what perspective does. All decorative: it stops under prefers-reduced-motion. */ .lanes { transform-box: view-box; transform-origin: 1130px 830px; animation: lane-roll 1.45s linear infinite; } @keyframes lane-roll { from { transform: scale(1); } to { transform: scale(1.25); } } .sweep { transform-box: view-box; transform-origin: 1130px 830px; animation: sweep-turn 4.8s linear infinite; } @keyframes sweep-turn { from { transform: rotate(0deg); } to { transform: rotate(360deg); } } .ping { animation: ping 4.8s ease-in-out infinite; animation-delay: var(--d, 0s); } @keyframes ping { 0%,72% { opacity:.5; } 78% { opacity:1; } 100% { opacity:.5; } } .target { animation: target-pulse 2.9s ease-in-out infinite; } @keyframes target-pulse { 0%,100% { opacity:.75; } 50% { opacity:1; } } @media (prefers-reduced-motion: reduce) { .lanes, .sweep, .ping, .target { animation: none !important; } } .hero .frame { position: relative; z-index: 2; } /* Real footage drops in here. The treatment is what keeps it from reading as stock: desaturate, drop the brightness, then lay the brand navy over it, so the clip becomes DEPTH behind the type instead of a picture fighting it. Type contrast is not negotiable — the scrim is what guarantees it. */ /* Desaturated but not crushed — the footage has to be VISIBLE or there is no point carrying 1.2MB for it. A slight blue tint pulls the golden-hour warmth toward the brand navy so it reads as one image rather than a photo pasted on. */ .hero-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 0; filter: grayscale(.82) contrast(1.04) brightness(.92) sepia(.10) hue-rotate(175deg); } /* The scrim is graded ACROSS the page: heaviest under the headline, lightest on the right where nothing but the panel sits. Text contrast is measured on the rendered pixels, not assumed — see the check in the deploy notes. */ /* ⚠️ The kicker is the one line that sits over the BRIGHTEST part of the frame — the sky above the ridge — and at --on-dark-3 it measured 2.81:1 against it, well under the 4.5 it needs at 11.5px. Over footage it gets a lighter tone. Measured on rendered pixels with the glyphs hidden, not estimated. */ .hero.has-video .h1-desc { color: #dbe8f7; } .hero-scrim { position: absolute; inset: 0; z-index: 1; pointer-events: none; background: linear-gradient(100deg, rgba(11,30,61,.95) 0%, rgba(11,30,61,.92) 30%, rgba(11,30,61,.66) 52%, rgba(11,30,61,.24) 78%, rgba(11,30,61,.18) 100%), linear-gradient(to bottom, rgba(11,30,61,.62) 0%, rgba(11,30,61,.06) 30%, rgba(11,30,61,.32) 100%); } .hero.has-video .backsplash .lanes, .hero.has-video .backsplash .truckgrp { display: none; } .hero.has-video .backsplash { z-index: 1; } /* ⚠️ MOBILE IS NOT A SMALLER DESKTOP HERE, AND MOST OF THE TRAFFIC IS MOBILE. The hero on a phone is 390x1890 — an aspect of 0.21. Stretching a 16:9 drone shot across that with object-fit:cover crops it to a vertical sliver of hillside: you lose the road, the trucks, and the entire reason for the clip. So on a phone the footage is a BAND at the top, 340px of real 1.08-aspect frame behind the eyebrow and headline, masked so it dissolves into the navy rather than stopping at a hard edge. It is its own encode — a 780x720 centre crop that keeps the road on its diagonal — at 281KB rather than 1.2MB. The drawn road and truck stay below it, so the idea continues down the page. */ @media (max-width: 1000px) { .hero-video { height: 340px; bottom: auto; object-position: center center; -webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 58%, transparent 100%); mask-image: linear-gradient(to bottom, #000 0%, #000 58%, transparent 100%); filter: grayscale(.82) contrast(1.04) brightness(.86) sepia(.10) hue-rotate(175deg); } .hero-scrim { background: linear-gradient(to bottom, rgba(11,30,61,.52) 0%, rgba(11,30,61,.62) 30%, rgba(11,30,61,.92) 62%, var(--void) 100%); } .hero.has-video .backsplash .lanes, .hero.has-video .backsplash .truckgrp { display: unset; } .hero.has-video .backsplash { z-index: 2; } } /* Anyone who asked for less motion gets the still frame and the drawn scene. */ @media (prefers-reduced-motion: reduce) { .hero-video { display: none; } .hero.has-video .backsplash .lanes, .hero.has-video .backsplash .truckgrp { display: unset; } .hero.has-video .backsplash { z-index: 0; } } .hero::before { content: ""; position: absolute; inset: 0; background: radial-gradient(700px 420px at 78% 18%, rgba(47,143,219,.16), transparent 62%), radial-gradient(620px 400px at 8% 88%, rgba(48,112,240,.26), transparent 66%); pointer-events: none; } .hero-grid { position: relative; display: grid; gap: 56px; grid-template-columns: minmax(0,1fr) minmax(0,520px); align-items: center; } @media (max-width: 1000px) { .hero-grid { grid-template-columns: 1fr; gap: 44px; } } .chrome-hero { max-width: 560px; } .hero h1 { font-size: clamp(52px, 7.4vw, 92px); line-height: .95; color: #fff; letter-spacing: -.035em; } /* The descriptor lives inside the h1 so the heading carries real search intent, but is set as a small eyebrow so the slogan still dominates visually. */ .h1-desc { display: block; order: -1; font-family: var(--mono); font-size: 11.5px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--on-dark-3); margin-bottom: 18px; line-height: 1.5; } .hero h1 { display: flex; flex-direction: column; } h1 em { font-style: normal; color: inherit; } /* was the accent second line */ .hero-lead { margin-top: 20px; font-family: var(--display); font-weight: 600; font-size: clamp(19px, 2vw, 24px); line-height: 1.28; color: #fff; max-width: 22ch; letter-spacing: -.015em; } /* Two named things, scannable. The old single paragraph made a cold reader parse two product definitions and a delivery mechanism before anything landed. */ .hero-two { list-style: none; margin: 26px 0 0; padding: 0; display: block; max-width: 54ch; } .hero-two li { display: grid; grid-template-columns: auto 1fr; gap: 12px; align-items: baseline; } .hero-two { border-top: 2px solid rgba(255,255,255,.45); } .hero-two li { padding: 13px 0; border-bottom: 1px solid var(--dark-line); } .hero-two b { font-family: var(--display); font-variation-settings: "wdth" 112; font-weight: 800; font-size: 16px; color: #fff; white-space: nowrap; } .hero-two span { color: var(--on-dark-2); font-size: 16.5px; line-height: 1.5; } @media (max-width: 620px) { .hero-two li { grid-template-columns: 1fr; gap: 5px; } .hero-two span { font-size: 16px; } } .hero-sub { margin-top: 16px; font-size: clamp(17px, 1.5vw, 19.5px); color: var(--on-dark-2); max-width: 56ch; } .hero-cta { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 32px; } .hero-note { margin-top: 18px; font-size: 14px; color: var(--on-dark-3); } .rn-note { margin-top: 18px; padding: 13px 15px; border-radius: 10px; border: 1px solid rgba(47,143,219,.32); background: rgba(47,143,219,.07); font-size: 14.5px; line-height: 1.55; color: var(--ink-2); } .rn-note b { color: var(--ink); font-weight: 650; } /* ── the dock: a faithful rendering of the product surface ─────────────── */ .dock-wrap { position: relative; } .dock-label { font-family: var(--mono); font-size: 10.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--on-dark-3); margin-bottom: 10px; display: flex; align-items: center; gap: 8px; } .dock { background: #fff; border-radius: 14px; overflow: hidden; box-shadow: 0 24px 70px rgba(0,0,0,.45), 0 2px 8px rgba(0,0,0,.3); color: #0f2338; font-size: 13.5px; line-height: 1.5; } .dock-top { background: var(--navy); color: #fff; padding: 13px 16px; display: flex; align-items: center; gap: 10px; } .dock-top .brand-dot { width: 9px; height: 9px; box-shadow: 0 0 0 3px rgba(47,143,219,.22); } .dock-top strong { font-family: var(--display); font-size: 14px; letter-spacing: -.01em; } .dock-top .pill { margin-left: auto; font-family: var(--mono); font-size: 10px; letter-spacing: .1em; text-transform: uppercase; color: #cfe6f8; border: 1px solid rgba(47,143,219,.45); padding: 3px 8px; border-radius: 20px; } .dock-body { padding: 16px; display: flex; flex-direction: column; gap: 15px; background: #fff; } .dock-co { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; } .dock-co .mock-co { font-family: var(--display); font-weight: 700; font-size: 15.5px; letter-spacing: -.01em; color: #0f2338; } .dock-co .meta { font-family: var(--mono); font-size: 11px; color: #616e81; } .dock-sec-t { font-family: var(--mono); font-size: 10px; letter-spacing: .13em; text-transform: uppercase; color: #616e81; display: flex; align-items: center; gap: 8px; } .dock-sec-t::after { content: ""; flex: 1; height: 1px; background: #e9eef5; } .row { display: flex; gap: 10px; align-items: flex-start; } .avatar { width: 30px; height: 30px; border-radius: 50%; flex: none; background: linear-gradient(150deg, #cfe0f2, #a9c4e0); font-family: var(--display); font-size: 11px; font-weight: 700; color: #24486d; display: flex; align-items: center; justify-content: center; } .row-main { min-width: 0; } .row-name { font-weight: 600; color: #0f2338; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; } .deg { font-family: var(--mono); font-size: 9.5px; font-weight: 600; letter-spacing: .06em; padding: 1px 5px; border-radius: 4px; background: #eef2f8; color: #46586f; } .deg-2 { background: #e7f0ff; color: #1d4ed8; } .row-sub { color: #3d4d61; font-size: 12.5px; } .row-via { font-family: var(--mono); font-size: 11.5px; color: var(--signal-text); margin-top: 3px; } .sig { border-left: 3px solid var(--signal); background: #eff6fd; padding: 9px 12px; border-radius: 0 8px 8px 0; } .sig-t { font-weight: 600; color: #12507f; font-size: 13px; } .sig-w { color: #46586f; font-size: 12.5px; margin-top: 2px; } .sig.amber { border-left-color: #d97706; background: #fdf6ec; } .sig.amber .sig-t { color: #92400e; } .dock-foot { border-top: 1px solid #e9eef5; padding: 11px 16px; background: #fbfcfe; font-family: var(--mono); font-size: 10.5px; color: #616e81; display: flex; justify-content: space-between; gap: 10px; } .illus { margin-top: 12px; font-size: 12px; color: var(--on-dark-3); } /* ── generic section ───────────────────────────────────────────────────── */ section { padding: 92px 0; } .sec-head { max-width: 66ch; margin-bottom: 48px; } .sec-head h2 { font-size: clamp(28px, 3.4vw, 40px); line-height: 1.12; } .sec-head p { margin-top: 16px; font-size: 18px; color: var(--ink-2); } .dark .sec-head p { color: var(--on-dark-2); } /* ── problem ───────────────────────────────────────────────────────────── */ .prob { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: var(--r); overflow: hidden; } @media (max-width: 820px) { .prob { grid-template-columns: 1fr; } } .prob > div { background: var(--surface); padding: 28px 26px; } .prob h3 { font-size: 17px; margin-bottom: 8px; } .prob p { color: var(--ink-2); font-size: 15px; } /* ── layers ────────────────────────────────────────────────────────────── */ .layers { display: grid; gap: 20px; grid-template-columns: repeat(3, 1fr); } @media (max-width: 960px) { .layers { grid-template-columns: 1fr; } } .layer { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); padding: 30px 28px; display: flex; flex-direction: column; gap: 12px; } .layer .n { font-family: var(--mono); font-size: 11px; letter-spacing: .14em; color: var(--ink-3); text-transform: uppercase; } .layer h3 { font-size: 20px; } .layer p { color: var(--ink-2); font-size: 15.5px; } .layer .stat { margin-top: auto; padding-top: 16px; border-top: 1px solid var(--line-soft); } .layer .stat b { font-family: var(--mono); font-size: 24px; font-weight: 600; color: var(--ink); font-variant-numeric: tabular-nums; display: block; } .layer .stat span { font-size: 13px; color: var(--ink-3); } .layer.hl { border-color: var(--signal); box-shadow: 0 0 0 1px var(--signal); } /* ── the fusion line ───────────────────────────────────────────────────── */ .fuse { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; align-items: start; } @media (max-width: 900px) { .fuse { grid-template-columns: 1fr; gap: 28px; } } .fuse-card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); padding: 26px; } .fuse-card h4 { font-size: 15px; margin-bottom: 14px; } .fuse-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; } .fuse-list li { display: flex; gap: 10px; font-size: 15px; color: var(--ink-2); align-items: flex-start; } .tick { color: var(--signal-text); font-weight: 700; flex: none; } .cross { color: var(--ink-3); flex: none; } /* ── product surfaces (RadarIQ / RadarNetwork) ───────────────────────────── Built in CSS rather than pasted as raster screenshots: stays crisp at any density, re-themes with the page, and can be corrected when the product changes instead of going quietly out of date the way a PNG does. */ .prod { display: grid; gap: 54px; grid-template-columns: minmax(0,420px) minmax(0,1fr); align-items: center; } .prod.flip { grid-template-columns: minmax(0,1fr) minmax(0,420px); } .prod.flip .prod-copy { order: 2; } @media (max-width: 1020px) { .prod, .prod.flip { grid-template-columns: 1fr; gap: 34px; } .prod.flip .prod-copy { order: 0; } } .prod-copy h2 { font-size: clamp(27px, 3.2vw, 37px); line-height: 1.12; } .prod-copy .lede { margin-top: 16px; font-size: 17.5px; color: var(--ink-2); } .dark .prod-copy .lede { color: var(--on-dark-2); } .prod-pts { list-style: none; margin: 26px 0 0; padding: 0; display: flex; flex-direction: column; gap: 14px; } .prod-pts li { display: flex; gap: 11px; font-size: 15.5px; color: var(--ink-2); align-items: flex-start; } .dark .prod-pts li { color: var(--on-dark-2); } .prod-pts b { color: var(--ink); font-weight: 600; } .dark .prod-pts b { color: #fff; } /* app chrome */ .chrome { border-radius: 14px; overflow: hidden; box-shadow: 0 26px 70px rgba(11,30,61,.20), 0 2px 10px rgba(11,30,61,.10); border: 1px solid var(--line); background: var(--surface); } /* ⚠️ Every .dark .riq-* rule below repaints this mock's text for a dark ground, but .chrome's own background stayed var(--surface) — white in the light theme. The result was white text on a white panel: several lines simply invisible. The panel has to become dark too, not just its contents. */ .hero .chrome, .dark .chrome { background: rgba(255,255,255,.045); box-shadow: 0 30px 80px rgba(0,0,0,.5); border-color: rgba(159,179,201,.14); } .hero .riq-warn, .dark .chrome .riq-warn { color: var(--on-dark-2); } .chrome-bar { display: flex; align-items: center; gap: 7px; padding: 10px 14px; background: var(--paper-2); border-bottom: 1px solid var(--line); } .hero .chrome-bar, .dark .chrome-bar { background: rgba(255,255,255,.04); border-bottom-color: rgba(159,179,201,.14); } .chrome-bar i { display: none; } /* the traffic-light dots: retired */ .chrome-bar .where { margin-left: 0; font-family: var(--mono); font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3); } .hero .chrome-bar .where, .dark .chrome-bar .where { color: var(--on-dark-3); } /* RadarIQ conversation */ .riq { padding: 20px; display: flex; flex-direction: column; gap: 16px; } .riq-rep { align-self: flex-end; max-width: 86%; background: var(--paper-2); border: 1px solid var(--line); border-radius: 12px 12px 3px 12px; padding: 12px 15px; font-size: 14.5px; color: var(--ink); } .hero .riq-rep, .dark .riq-rep { background: rgba(255,255,255,.07); border-color: rgba(159,179,201,.16); color: var(--on-dark); } .riq-iq { display: flex; gap: 11px; align-items: flex-start; } .riq-av { width: 26px; height: 26px; border-radius: 50%; flex: none; background: rgba(47,143,219,.18); border: 1px solid var(--signal); display: flex; align-items: center; justify-content: center; } .riq-av span { display: block; width: 8px; height: 8px; border-radius: 50%; background: var(--signal); } .riq-msg { font-size: 14.5px; color: var(--ink-2); min-width: 0; display: flex; flex-direction: column; gap: 11px; } .hero .riq-msg, .dark .riq-msg { color: var(--on-dark-2); } .riq-msg strong { color: var(--ink); font-weight: 600; } .hero .riq-msg strong, .dark .riq-msg strong { color: #fff; } .riq-name { font-family: var(--mono); font-size: 10px; letter-spacing: .13em; text-transform: uppercase; color: var(--signal-text); margin-bottom: 5px; } /* the inline slice, drawn as data rather than described */ .slice { border: 1px solid var(--line); border-radius: 10px; padding: 14px; background: var(--paper); } .hero .slice, .dark .slice { background: rgba(255,255,255,.03); border-color: rgba(159,179,201,.16); } .slice-h { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin-bottom: 12px; } .slice-h .t { font-family: var(--mono); font-size: 10px; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-3); } .hero .slice-h .t, .dark .slice-h .t { color: var(--on-dark-3); } .slice-h .n { font-family: var(--mono); font-size: 19px; font-weight: 600; color: var(--ink); font-variant-numeric: tabular-nums; } .hero .slice-h .n, .dark .slice-h .n { color: #fff; } .bars { display: flex; flex-direction: column; gap: 7px; } .bar { display: grid; grid-template-columns: 30px 1fr 42px; align-items: center; gap: 10px; } .bar .s { font-family: var(--mono); font-size: 11px; color: var(--ink-3); } .hero .bar .s, .dark .bar .s { color: var(--on-dark-3); } /* These are spans inside a grid cell: without display:block an inline element ignores width and height entirely and the bars render as nothing. */ .bar .track { display: block; height: 7px; border-radius: 4px; background: var(--line-soft); overflow: hidden; } .hero .bar .track, .dark .bar .track { background: rgba(159,179,201,.14); } .bar .fill { display: block; height: 100%; border-radius: 4px; background: var(--signal); } .bar .v { font-family: var(--mono); font-size: 11.5px; color: var(--ink-2); text-align: right; font-variant-numeric: tabular-nums; } .hero .bar .v, .dark .bar .v { color: var(--on-dark-2); } .riq-warn { border-left: 3px solid var(--warn); padding: 2px 0 2px 12px; font-size: 14px; } .riq-chips { display: flex; flex-wrap: wrap; gap: 7px; } .chip { font-size: 12.5px; border: 1px solid var(--line); border-radius: 20px; padding: 5px 12px; color: var(--ink-2); background: var(--surface); } .hero .chip, .dark .chip { border-color: rgba(159,179,201,.24); color: var(--on-dark-2); background: transparent; } .chip.on { border-color: var(--signal); color: var(--signal-text); } /* RadarNetwork paths */ .rnw { padding: 18px; display: flex; flex-direction: column; gap: 14px; } .rnw-target { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; padding-bottom: 13px; border-bottom: 1px solid var(--line); } .dark .rnw-target { border-bottom-color: rgba(159,179,201,.16); } .rnw-target .mock-co { font-family: var(--display); font-weight: 700; font-size: 16px; letter-spacing: -.01em; } .dark .rnw-target .mock-co { color: #fff; } .rnw-target .meta { font-family: var(--mono); font-size: 11px; color: var(--ink-3); } .path { display: grid; grid-template-columns: auto 1fr; gap: 12px; align-items: start; } .hop { display: flex; align-items: center; gap: 4px; padding-top: 3px; } .hop .p { width: 26px; height: 26px; border-radius: 50%; background: linear-gradient(150deg,#cfe0f2,#a9c4e0); color: #24486d; font-family: var(--display); font-size: 10px; font-weight: 700; display: flex; align-items: center; justify-content: center; } .hop .p.you { background: var(--emph); color: var(--emph-ink); } .hop .p.tgt { background: rgba(47,143,219,.16); color: var(--signal); border: 1px solid var(--signal); } .hop .l { display: block; width: 14px; height: 2px; background: var(--line); } .dark .hop .l { background: rgba(159,179,201,.3); } .path-b { min-width: 0; } .path-b .who { font-weight: 600; font-size: 14.5px; color: var(--ink); } .dark .path-b .who { color: #fff; } .path-b .role { font-size: 13px; color: var(--ink-2); } .dark .path-b .role { color: var(--on-dark-2); } .path-b .thru { font-family: var(--mono); font-size: 11.5px; color: var(--signal-text); margin-top: 3px; } .rnw-foot { font-family: var(--mono); font-size: 10.5px; color: var(--ink-3); border-top: 1px solid var(--line); padding-top: 12px; } .dark .rnw-foot { color: var(--on-dark-3); border-top-color: rgba(159,179,201,.16); } /* ── RadarIQ: the co-pilot gets its own section ──────────────────────────── It was one of four tabs, framed as a query tool. The thing that actually makes it hard to copy is that it LEARNS — so the section leads with the compounding, and the conversation shows it remembering. */ .iq-hero { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: 52px; align-items: center; } @media (max-width: 1020px) { .iq-hero { grid-template-columns: 1fr; gap: 34px; } } /* RadarNetwork mirrors the layout — mock left, copy right. When it stacks on a phone the copy has to come FIRST: a screenshot with no explanation above it is the same "what is this?" problem in a different shape. */ @media (max-width: 1020px) { #radarnetwork .iq-hero > div:first-child { order: 2; } #radarnetwork .iq-hero > div:last-child { order: 1; } } .iq-badge { display: inline-flex; align-items: center; gap: 9px; font-family: var(--mono); font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--signal-lift); border: 1px solid rgba(74,163,234,.42); padding: 6px 13px; border-radius: 999px; margin-bottom: 20px; } .iq-badge i { width: 7px; height: 7px; border-radius: 50%; background: var(--signal-lift); display: block; } .iq-hero h2 { font-size: clamp(30px, 4vw, 46px); line-height: 1.06; color: #fff; } .iq-hero .lede { margin-top: 18px; font-size: clamp(16.5px, 1.7vw, 19px); color: var(--on-dark-2); } .iq-pts { list-style: none; margin: 28px 0 0; padding: 0; display: block; border-top: 2px solid currentColor; } .iq-pts li { display: block; padding: 15px 0; border-bottom: 1px solid var(--line); } .hero .iq-pts li, .dark .iq-pts li { border-bottom-color: var(--dark-line); } .iq-pts .n { display: none; } /* 01 / 02 / 03: these facts are not a sequence */ .iq-pts b { color: #fff; font-weight: 600; display: block; margin-bottom: 3px; font-size: 16px; } .iq-pts span.d { color: var(--on-dark-2); font-size: 15px; } /* the learning panel — persona weights that build themselves */ .learn { margin-top: 22px; border: 1px solid var(--dark-line); border-radius: 14px; background: rgba(255,255,255,.04); padding: 22px; } .learn-h { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 16px; } .learn-h .t { font-family: var(--mono); font-size: 10.5px; letter-spacing: .13em; text-transform: uppercase; color: var(--on-dark-3); } .learn-h .s { font-family: var(--mono); font-size: 11px; color: var(--signal-lift); } .pbar { display: grid; grid-template-columns: 96px 1fr 40px; align-items: center; gap: 12px; margin-bottom: 9px; } .pbar .nm { font-size: 13.5px; color: var(--on-dark-2); } .pbar .tr { display: block; height: 8px; border-radius: 5px; background: rgba(169,189,214,.16); overflow: hidden; } .pbar .fl { display: block; height: 100%; border-radius: 5px; background: var(--signal-lift); } .pbar .fl.dim { background: rgba(74,163,234,.4); } .pbar .pc { font-family: var(--mono); font-size: 12px; color: var(--on-dark-2); text-align: right; font-variant-numeric: tabular-nums; } .learn-note { margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--dark-line); font-size: 13.5px; color: var(--on-dark-2); } @media (max-width: 480px) { .pbar { grid-template-columns: 78px 1fr 36px; gap: 9px; } .pbar .nm { font-size: 12.5px; } } /* ── product tour tabs ───────────────────────────────────────────────────── The features are the reason anyone buys, so they get one prominent block high on the page rather than being spread down it. Tabs are radio inputs: no JavaScript, works with keyboard and back button, and cannot break. */ .tour { margin-top: 8px; } .tour input { position: absolute; opacity: 0; pointer-events: none; } .tabs { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 26px; border-bottom: 1px solid var(--line); padding-bottom: 0; } .tabs label { font-family: var(--body); font-size: 15px; font-weight: 600; cursor: pointer; padding: 11px 18px; color: var(--ink-2); border-radius: 9px 9px 0 0; border: 1px solid transparent; border-bottom: none; margin-bottom: -1px; white-space: nowrap; transition: color .12s ease, background .12s ease; } .tabs label:hover { color: var(--ink); background: var(--paper-2); } .tour input:focus-visible + label { outline: 2px solid var(--accent-lift); outline-offset: 2px; } .panel { display: none; } #t3:checked ~ .tabs label[for="t3"], #t4:checked ~ .tabs label[for="t4"] { color: var(--signal-text); background: var(--surface); border-color: var(--line); border-bottom-color: var(--surface); } #t3:checked ~ .panels #p3, #t4:checked ~ .panels #p4 { display: block; } @media (max-width: 640px) { .tabs { border-bottom: 0; gap: 6px; } .tabs label { font-size: 14px; padding: 9px 14px; border-radius: 999px; border: 1px solid var(--line); margin-bottom: 0; } } .panel-grid { display: grid; grid-template-columns: minmax(0,360px) minmax(0,1fr); gap: 40px; align-items: start; } @media (max-width: 980px) { .panel-grid { grid-template-columns: 1fr; gap: 26px; } } .panel-copy h3 { font-size: clamp(23px, 2.6vw, 30px); line-height: 1.14; margin-bottom: 12px; } .panel-copy p { color: var(--ink-2); font-size: 16px; } .panel-copy ul { list-style: none; margin: 20px 0 0; padding: 0; display: flex; flex-direction: column; gap: 11px; } .panel-copy li { display: flex; gap: 10px; font-size: 15px; color: var(--ink-2); align-items: flex-start; } .shot-note { margin-top: 12px; font-size: 12.5px; color: var(--ink-3); } /* ── tie-together ──────────────────────────────────────────────────────── */ .tie { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; } @media (max-width: 900px) { .tie { grid-template-columns: 1fr; } } .tie-c { position: relative; padding: 0 30px; border-left: 2px solid var(--dark-line); } .tie-c:first-child { padding-left: 0; border-left: 0; } @media (max-width: 900px) { .tie-c { padding: 0 0 30px 26px; border-left: 2px solid var(--dark-line); } .tie-c:first-child { padding-left: 26px; border-left: 2px solid var(--dark-line); } } .tie-k { font-family: var(--mono); font-size: 10.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--signal-lift); } .tie-c h3 { font-size: 19px; margin: 9px 0 8px; color: #fff; } .tie-c p { font-size: 15px; color: var(--on-dark-2); } /* ── day / sequence ────────────────────────────────────────────────────── */ .steps { display: flex; flex-direction: column; gap: 0; border-left: 2px solid var(--line); } .step { padding: 0 0 34px 30px; position: relative; } .step:last-child { padding-bottom: 0; } .step::before { content: ""; position: absolute; left: -7px; top: 6px; width: 12px; height: 12px; border-radius: 50%; background: var(--paper); border: 2px solid var(--ink-3); } .step.live::before { background: var(--signal); border-color: var(--signal); box-shadow: 0 0 0 4px rgba(47,143,219,.18); } .step .k { font-family: var(--mono); font-size: 11px; letter-spacing: .13em; text-transform: uppercase; color: var(--ink-3); } .step h3 { font-size: 18px; margin: 4px 0 6px; } .step p { color: var(--ink-2); font-size: 15.5px; max-width: 60ch; } /* ── leadership metrics ────────────────────────────────────────────────── */ .metrics { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; } /* The RadarHQ mock sits inside a narrow panel column, so it needs its own breakpoints rather than an inline override that no media query can beat. */ .metrics-mini { gap: 12px; } @media (max-width: 1100px) { .metrics-mini { grid-template-columns: repeat(3, 1fr); } } @media (max-width: 620px) { .metrics-mini { grid-template-columns: 1fr; } } .metrics-mini .metric { padding: 14px 16px; } .metrics-mini .val { font-size: 24px !important; } @media (max-width: 900px) { .metrics { grid-template-columns: 1fr 1fr; } } @media (max-width: 560px) { .metrics { grid-template-columns: 1fr; } } .metric { border: 1px solid var(--dark-line); border-radius: var(--r); padding: 22px; background: rgba(255,255,255,.03); } .metric .lab { font-family: var(--mono); font-size: 10.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--on-dark-3); } .metric-light { background: var(--paper-2); border-color: var(--line); } .metric-light .lab { color: var(--ink-3); } .metric-light .val { color: var(--ink); } .metric-light .val .d { color: var(--signal-text); } .metric .val { font-family: var(--display); font-size: 30px; font-weight: 700; color: #fff; margin-top: 8px; font-variant-numeric: tabular-nums; } .metric .val .d { font-family: var(--mono); font-size: 13px; font-weight: 500; color: var(--signal-lift); margin-left: 8px; } .metric .sub { font-size: 13.5px; color: var(--on-dark-2); margin-top: 6px; } .callout { margin-top: 30px; border-left: 3px solid var(--signal-lift); padding: 4px 0 4px 20px; font-size: 17px; color: var(--on-dark); max-width: 70ch; } /* ── scale strip ───────────────────────────────────────────────────────── */ .scale { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: var(--r); overflow: hidden; } @media (max-width: 820px) { .scale { grid-template-columns: 1fr 1fr; } } .scale > div { background: var(--surface); padding: 26px 22px; } .scale b { font-family: var(--display); font-weight: 700; font-size: 25px; color: var(--ink); display: block; font-variant-numeric: tabular-nums; letter-spacing: -.02em; } .scale span { font-size: 13.5px; color: var(--ink-2); display: block; margin-top: 5px; } /* the eight personas, named so a visitor sees themselves in the first glance */ .personas { font-family: var(--mono); font-size: 12.5px; letter-spacing: .04em; color: var(--ink-3); margin: 0 0 22px; line-height: 1.9; } /* ── pricing ───────────────────────────────────────────────────────────── */ .plans { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; } @media (max-width: 860px) { .plans { grid-template-columns: 1fr; } } .plan { border: 1px solid var(--line); background: var(--surface); border-radius: 14px; padding: 32px; display: flex; flex-direction: column; } .plan.feature { border-color: var(--emph); box-shadow: 0 0 0 1px var(--emph); } .plan .who { font-family: var(--mono); font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-3); } .plan h3 { font-size: 23px; margin: 10px 0 6px; } .plan .price { font-family: var(--display); font-size: 38px; font-weight: 700; letter-spacing: -.03em; margin: 14px 0 2px; font-variant-numeric: tabular-nums; } .plan .price small { font-family: var(--body); font-size: 15px; font-weight: 400; color: var(--ink-3); letter-spacing: 0; } .plan p { color: var(--ink-2); font-size: 15px; } .plan ul { list-style: none; margin: 20px 0 26px; padding: 0; display: flex; flex-direction: column; gap: 9px; } .plan li { display: flex; gap: 9px; font-size: 15px; color: var(--ink-2); } .plan .btn { margin-top: auto; } /* ── demo request form ───────────────────────────────────────────────────── Posts to Netlify Forms: no backend, submissions land in the site dashboard. The data-netlify attributes plus the hidden form-name input are what make that work on a Drop deploy — remove either and the POST 404s. */ .form-grid { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,460px); gap: 56px; align-items: start; } @media (max-width: 1000px) { .form-grid { grid-template-columns: 1fr; gap: 36px; } } .form-copy h2 { font-size: clamp(28px, 3.4vw, 40px); line-height: 1.12; } .form-copy .lede { margin-top: 16px; font-size: 17.5px; color: var(--on-dark-2); } .form-what { list-style: none; margin: 28px 0 0; padding: 0; display: flex; flex-direction: column; gap: 13px; } .form-what li { display: flex; gap: 11px; font-size: 15.5px; color: var(--on-dark-2); align-items: flex-start; } .form-alt { margin-top: 30px; padding-top: 24px; border-top: 1px solid var(--dark-line); font-size: 15px; color: var(--on-dark-2); } .form-alt a { color: var(--signal-lift); text-decoration: none; font-weight: 600; } .form-alt a:hover { text-decoration: underline; } .card-form { background: var(--surface); border: 1px solid var(--line); border-radius: 14px; padding: 30px; } .dark .card-form { background: rgba(255,255,255,.04); border-color: rgba(159,179,201,.16); } .fields { display: flex; flex-direction: column; gap: 17px; } .field { display: flex; flex-direction: column; gap: 6px; } .field label { font-size: 13.5px; font-weight: 600; color: var(--on-dark); } .field .opt { font-weight: 400; color: var(--on-dark-3); } .field input, .field select, .field textarea { font-family: var(--body); font-size: 15px; color: var(--on-dark); background: rgba(7,21,40,.55); border: 1px solid rgba(159,179,201,.28); border-radius: 9px; padding: 11px 13px; width: 100%; transition: border-color .12s ease, box-shadow .12s ease; } .field textarea { resize: vertical; min-height: 84px; } .field select { appearance: none; cursor: pointer; background-image: linear-gradient(45deg, transparent 50%, var(--on-dark-3) 50%), linear-gradient(135deg, var(--on-dark-3) 50%, transparent 50%); background-position: calc(100% - 19px) 50%, calc(100% - 14px) 50%; background-size: 5px 5px, 5px 5px; background-repeat: no-repeat; padding-right: 36px; } .field input::placeholder, .field textarea::placeholder { color: var(--on-dark-3); } .field input:focus, .field select:focus, .field textarea:focus { outline: none; border-color: var(--signal-lift); box-shadow: 0 0 0 3px rgba(47,143,219,.20); } .field select option { background: #0b2138; color: var(--on-dark); } .form-hp { position: absolute; left: -9999px; } .form-sub { margin-top: 22px; } .form-sub .btn { width: 100%; } .form-fine { margin-top: 13px; font-size: 12.5px; color: var(--on-dark-2); text-align: center; } /* ── thank-you ─────────────────────────────────────────────────────────── */ .thanks-wrap { min-height: 72vh; display: flex; align-items: center; } .thanks h1 { font-size: clamp(32px, 4.4vw, 50px); line-height: 1.08; color: #fff; } .thanks p { margin-top: 18px; font-size: 18px; color: var(--on-dark-2); max-width: 54ch; } /* ── pricing: one plan ───────────────────────────────────────────────────── Team tiering is a growth-stage problem. One price, stated plainly, is a stronger position than a comparison table with one column filled in. */ .plan-solo { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: 44px; background: var(--surface); border: 1px solid var(--line); box-shadow: 0 0 0 1px var(--signal); border-radius: 16px; padding: 40px; } @media (max-width: 860px) { .plan-solo { grid-template-columns: 1fr; gap: 28px; padding: 30px; } } .plan-main .price { font-family: var(--display); font-size: clamp(46px, 5.4vw, 62px); font-weight: 700; letter-spacing: -.04em; line-height: 1; font-variant-numeric: tabular-nums; color: var(--ink); } .plan-main .price small { font-family: var(--body); font-size: 16px; font-weight: 400; color: var(--ink-3); letter-spacing: 0; } .plan-lede { margin-top: 16px; font-size: 16.5px; color: var(--ink-2); max-width: 34ch; } .plan-cta { display: flex; flex-wrap: wrap; gap: 11px; margin-top: 26px; } .plan-feats { list-style: none; margin: 0; padding: 0; display: grid; gap: 11px; align-content: start; } .plan-feats li { display: flex; gap: 10px; font-size: 15.5px; color: var(--ink-2); align-items: flex-start; } /* ── faq ───────────────────────────────────────────────────────────────── */ .faq { display: grid; grid-template-columns: repeat(2, 1fr); gap: 30px 44px; } @media (max-width: 860px) { .faq { grid-template-columns: 1fr; } } .faq h3 { font-size: 16.5px; margin-bottom: 7px; } .faq p { color: var(--ink-2); font-size: 15px; } /* ── close + footer ────────────────────────────────────────────────────── */ .close { text-align: left; } .close h2 { font-size: clamp(30px, 3.8vw, 44px); line-height: 1.1; max-width: 20ch; } .close p { margin-top: 18px; font-size: 18px; max-width: 58ch; } .close .hero-cta { margin-top: 30px; } footer { background: var(--void-2); color: var(--on-dark-3); padding: 40px 0 34px; border-top: 1px solid var(--dark-line); font-size: 14px; } /* A descriptive link block into the deeper dotradar.io content. It gives crawlers a route from this domain into the pages that answer informational queries, rather than leaving the two domains to compete on brand terms. */ .foot-seo { display: grid; grid-template-columns: repeat(4, 1fr); gap: 26px 34px; margin-top: 30px; padding-top: 26px; border-top: 1px solid var(--dark-line); } @media (max-width: 900px) { .foot-seo { grid-template-columns: 1fr 1fr; } } @media (max-width: 500px) { .foot-seo { grid-template-columns: 1fr; } } .foot-seo div { display: flex; flex-direction: column; gap: 8px; } .foot-h { font-family: var(--mono); font-size: 10.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--on-dark-3); margin-bottom: 3px; } .foot-seo a { color: var(--on-dark-2); text-decoration: none; font-size: 14px; } .foot-seo a:hover { color: #fff; text-decoration: underline; } .foot-in { display: flex; flex-wrap: wrap; gap: 18px 32px; align-items: center; } footer a { color: var(--on-dark-2); text-decoration: none; } footer a:hover { color: var(--on-dark); } .foot-links { margin-left: auto; display: flex; flex-wrap: wrap; gap: 22px; } /* ══════════════════════════════════════════════════════════════════════════ CONTENT PAGES — /learn/ /for/ /compare/ /blog/ Ported from dotradar.io, where each of the 29 pages carried its own separate inline stylesheet. One shared sheet now: consistent, cacheable across the whole library, and a single place to change the reading experience. ══════════════════════════════════════════════════════════════════════════ */ .doc { max-width: 760px; margin: 0 auto; padding: 54px 30px 92px; } .doc-wide { max-width: 1060px; } .crumb { font-family: var(--mono); font-size: 10px; font-weight: 500; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-3); margin-bottom: 22px; } .crumb a { color: var(--signal-text); text-decoration: none; } .crumb a:hover { text-decoration: underline; } .doc h1 { font-size: clamp(32px, 5vw, 50px); line-height: 1.03; margin: 0 0 18px; } .doc h2 { font-size: clamp(22px, 2.7vw, 29px); line-height: 1.15; margin: 46px 0 14px; } .doc h3 { font-size: 18px; margin: 32px 0 10px; } .doc p, .doc li { font-size: 17px; line-height: 1.68; color: var(--ink-2); } .doc p { margin: 0 0 17px; } .doc > p:first-of-type { font-size: 19px; line-height: 1.6; color: var(--ink); } .doc strong { color: var(--ink); font-weight: 700; } .doc a { color: var(--signal-text); text-decoration: underline; text-underline-offset: 2px; } .doc a:hover { color: var(--ink); } .doc ul, .doc ol { margin: 0 0 20px; padding-left: 22px; } .doc li { margin-bottom: 9px; } .doc li::marker { color: var(--ink-3); } .doc ol { counter-reset: n; list-style: none; padding-left: 0; } .doc ol > li { counter-increment: n; padding-left: 40px; position: relative; } .doc ol > li::before { content: counter(n); position: absolute; left: 0; top: 1px; font-family: var(--mono); font-size: 11px; font-weight: 500; color: var(--signal-text); border: 1px solid var(--line); padding: 2px 7px; line-height: 1.5; } .doc table { width: 100%; border-collapse: collapse; margin: 0 0 22px; font-size: 15px; display: block; overflow-x: auto; } .doc th, .doc td { text-align: left; padding: 11px 13px; border-bottom: 1px solid var(--line); } .doc th { font-family: var(--mono); font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3); font-weight: 500; border-bottom: 2px solid var(--ink); white-space: nowrap; } .doc blockquote { margin: 0 0 22px; padding: 2px 0 2px 20px; border-left: 3px solid var(--signal); color: var(--ink-2); } /* The callout carried a rounded card on the old pages; here it is a ruled panel, consistent with the rule stacks the rest of the site uses. */ .doc .callout, .doc .note, .doc .cta-box { background: var(--paper-2); border: 1px solid var(--line); border-left: 3px solid var(--signal); border-radius: 2px; padding: 17px 19px; margin: 0 0 24px; font-size: 16px; line-height: 1.6; color: var(--ink-2); } .doc .callout strong, .doc .note strong { color: var(--ink); } .doc-cta { margin-top: 52px; padding-top: 30px; border-top: 2px solid var(--ink); } .doc-cta h2 { margin-top: 0; } .doc-cta .row { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 18px; } .doc-index { display: grid; gap: 0; margin-top: 26px; border-top: 2px solid var(--ink); } .doc-index a { display: block; padding: 17px 0; border-bottom: 1px solid var(--line); text-decoration: none; color: inherit; } .doc-index a:hover { background: var(--paper-2); } .doc-index b { display: block; font-size: 17px; font-weight: 700; font-variation-settings: "wdth" 108; color: var(--ink); margin-bottom: 3px; } .doc-index span { display: block; font-size: 14.5px; color: var(--ink-2); line-height: 1.5; } @media (max-width: 620px) { .doc { padding: 34px 20px 64px; } .doc p, .doc li { font-size: 16px; } .doc > p:first-of-type { font-size: 17.5px; } } /* ═══════════════════════════════════════════════════════════════════════════ MIGRATED-PAGE COMPONENTS The 29 pages ported from dotradar.io each carried their own