/* =============================================================================
Understand — product landing page.
Page-specific styles only. Everything structural (tokens, buttons, cards,
navbar, footer, logo strip, reveal animations) comes from css/style.css;
this file adds the hero composition and the product-tour frame.
Vanilla CSS, system fonts, no external requests. Light and dark are both
driven by the token layer — anything theme-sensitive is written against a
token rather than a literal color.
Sections:
0. Product nav
1. Hero layout
2. Hero type + rotator
3. Hero video
4. Hero logo strip
5. Breakpoints
6. Pricing (#pricing)
7. Understand and AI (#ai)
============================================================================= */
/* -----------------------------------------------------------------------
0. Product nav
Same arrangement Onboard uses — the sitewide bar scrolls away, this one
sticks — but built on the sitewide tokens rather than a private palette,
so it stays part of the system while reading as Understand's own bar:
site blue instead of Onboard green, pill-shaped actions instead of 14px
rounded rectangles, and a mono release pill as a nod to the product.
----------------------------------------------------------------------- */
/* The sitewide navbar is sticky by default; on this page the product bar is
the one that pins, so the sitewide bar reverts to normal flow. */
.u-page .navbar { position: relative; z-index: 1000; }
.u-nav {
position: sticky;
top: 0;
z-index: 900;
background: linear-gradient(180deg, rgba(var(--card-rgb), 0.9), rgba(var(--surface-rgb), 0.82));
backdrop-filter: blur(16px) saturate(170%);
-webkit-backdrop-filter: blur(16px) saturate(170%);
border-bottom: 1px solid var(--border);
box-shadow: inset 0 1px 0 var(--navbar-highlight);
}
.u-nav-inner {
max-width: var(--container-max);
margin: 0 auto;
padding: 0.5rem 1.75rem;
display: flex;
align-items: center;
justify-content: space-between;
gap: 1.5rem;
}
.u-nav-left { display: flex; align-items: center; gap: 1.25rem; min-width: 0; }
/* The wordmark PNG bakes "by SciTools" in at 94px of its 472, in a fixed
#CCC, which lands at about 6px once this bar renders the logo at 27 --
unreadable, and no amount of scaling fixes that inside a nav. It is
dropped here rather than re-set in live type, because the sitewide bar
directly above already carries the SciTools logo. Understand_wordmark.png
is the same artwork with the byline erased; Understand_wordmark_logo.png
still has it baked in and is what the footer and the pricing panes use. */
.u-nav-brand { display: flex; align-items: center; flex-shrink: 0; }
/* 27px, not 30: the cropped artwork is shorter, and this keeps the word
"Understand" the same height on screen as it was before the crop. */
.u-nav-brand img { height: 27px; width: auto; }
@media (max-width: 860px) {
/* The brand link is 27px of artwork, under the 44px a touch target wants.
The negative margin gives the padding back to the layout, so the hit
area grows but the bar's height does not: 44 - 8 lands exactly on the
36px the menu button already sets. */
.u-nav-brand { min-height: 44px; margin-block: -4px; }
}
.u-nav-divider {
width: 1px;
height: 20px;
background: var(--border-strong);
flex-shrink: 0;
}
.u-nav-links { display: flex; align-items: center; gap: 1.5rem; }
.u-nav-links a {
position: relative;
font-size: 0.8125rem;
font-weight: 600;
color: var(--text-muted);
padding: 4px 0;
transition: color 0.15s var(--ease);
}
.u-nav-links a::after {
content: "";
position: absolute;
left: 0;
bottom: -2px;
width: 0;
height: 2px;
border-radius: var(--radius-full);
background: linear-gradient(90deg, var(--accent-1), var(--accent-2));
transition: width 0.2s var(--ease);
}
.u-nav-links a:hover { color: var(--text-primary); }
.u-nav-links a:hover::after { width: 100%; }
/* Features dropdown — sits in the link row, so its trigger is styled as one of
the links (same size, weight and hover underline) rather than as a button.
The panel borrows the split menu's surface so the two read as one family. */
.u-nav-drop { position: relative; display: flex; align-items: center; }
.u-nav-drop-trigger {
display: inline-flex;
align-items: center;
gap: 0.3rem;
position: relative;
background: none;
border: none;
padding: 4px 0;
font-family: inherit;
font-size: 0.8125rem;
font-weight: 600;
color: var(--text-muted);
cursor: pointer;
transition: color 0.15s var(--ease);
}
.u-nav-drop-trigger::after {
content: "";
position: absolute;
left: 0;
right: 14px;
bottom: -2px;
width: 0;
height: 2px;
border-radius: var(--radius-full);
background: linear-gradient(90deg, var(--accent-1), var(--accent-2));
transition: width 0.2s var(--ease);
}
.u-nav-drop-trigger:hover,
.u-nav-drop.is-open .u-nav-drop-trigger { color: var(--text-primary); }
.u-nav-drop-trigger:hover::after { width: calc(100% - 14px); }
.u-nav-drop-trigger:focus-visible { outline: 2px solid var(--accent-1); outline-offset: 3px; }
.u-nav-drop-chev {
width: 9px;
height: 9px;
flex-shrink: 0;
transition: transform 0.2s var(--ease);
}
.u-nav-drop.is-open .u-nav-drop-chev { transform: rotate(180deg); }
.u-nav-drop-panel {
position: absolute;
top: calc(100% + 0.65rem);
left: -0.75rem;
min-width: 210px;
display: flex;
flex-direction: column;
background: var(--card);
border: 1px solid var(--border-strong);
border-radius: var(--radius-lg);
box-shadow: var(--shadow-lg);
padding: 0.5rem;
opacity: 0;
visibility: hidden;
transform: translateY(-6px);
transition: opacity 0.18s var(--ease), transform 0.18s var(--ease), visibility 0.18s;
}
.u-nav-drop.is-open .u-nav-drop-panel { opacity: 1; visibility: visible; transform: none; }
.u-nav-drop-panel a {
padding: 0.5rem 0.65rem;
border-radius: var(--radius-sm);
font-size: 0.8125rem;
font-weight: 600;
color: var(--text-muted);
white-space: nowrap;
transition: background-color 0.15s var(--ease), color 0.15s var(--ease);
}
.u-nav-drop-panel a:hover { background: var(--navbar-highlight); color: var(--text-primary); }
.u-nav-drop-foot {
display: flex;
align-items: center;
justify-content: space-between;
gap: 0.75rem;
margin-top: 0.35rem;
padding-top: 0.6rem !important;
border-top: 1px solid var(--border);
border-radius: 0 !important;
color: var(--accent-1) !important;
font-weight: 700;
}
.u-nav-drop-foot:hover { background: none !important; }
.u-nav-drop-foot svg { width: 13px; height: 13px; flex-shrink: 0; transition: transform 0.15s var(--ease); }
.u-nav-drop-foot:hover svg { transform: translateX(3px); }
/* In the hamburger panel the same list is simply indented under Features. */
.u-nav-mobile-sub { display: flex; flex-direction: column; }
.u-nav-mobile .u-nav-mobile-sub a {
padding-left: 1rem;
font-size: 0.875rem;
font-weight: 500;
}
.u-nav-right { display: flex; align-items: center; gap: 0.85rem; }
/* Trial action — a pill in the site's blue, carrying a kicker over the
label so the bar names the offer and the product in one control. It was
a split button with an install-target panel until 2026-10-08; it is now
a plain link straight to the trial. */
.u-nav-get-btn {
display: flex;
flex-shrink: 0;
text-decoration: none;
align-items: center;
gap: 0.6rem;
background: rgba(var(--accent-1-rgb), 0.12);
border: 1px solid rgba(var(--accent-1-rgb), 0.35);
border-radius: var(--radius-full);
padding: 0.4rem 1rem;
cursor: pointer;
color: var(--text-primary);
transition: background-color 0.15s var(--ease), border-color 0.15s var(--ease);
}
.u-nav-get-btn:hover {
background: rgba(var(--accent-1-rgb), 0.2);
border-color: var(--accent-1);
}
.u-nav-get-btn:focus-visible { outline: 2px solid var(--accent-1); outline-offset: 2px; }
.u-nav-get-copy { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; }
.u-nav-get-kicker {
font-size: 0.5625rem;
font-weight: 800;
text-transform: uppercase;
letter-spacing: 0.12em;
color: var(--accent-2);
line-height: 1;
}
/* Brand green is a mid-tone: it carries on the dark surface but drops to
roughly 1.9:1 on the pale accent pill in light mode, which nine-pixel
uppercase can't afford. Deepen it there and leave dark alone. */
@media (prefers-color-scheme: light) {
:root:not([data-theme="dark"]) .u-nav-get-kicker { color: #047857; }
}
:root[data-theme="light"] .u-nav-get-kicker { color: #047857; }
.u-nav-get-title {
font-size: 0.75rem;
font-weight: 800;
letter-spacing: 0.02em;
line-height: 1;
}
/* Mobile section menu */
.u-nav-menu {
display: none;
background: transparent;
border: 1px solid var(--border-strong);
border-radius: var(--radius-sm);
width: 36px;
height: 36px;
align-items: center;
justify-content: center;
color: var(--text-primary);
cursor: pointer;
flex-shrink: 0;
}
.u-nav-mobile {
display: none;
flex-direction: column;
padding: 0.5rem 1.75rem 1.25rem;
border-top: 1px solid var(--border);
background: var(--surface);
}
.u-nav-mobile.is-open { display: flex; }
.u-nav-mobile a {
padding: 0.8rem 0;
font-size: 0.9375rem;
font-weight: 600;
color: var(--text-muted);
border-bottom: 1px solid var(--border);
}
.u-nav-mobile a:hover { color: var(--text-primary); }
/* Selector carries the element too: `.u-nav-mobile a` above would otherwise
out-specify a lone class and repaint the button's label muted. */
.u-nav-mobile a.u-nav-mobile-cta {
margin-top: 1rem;
border-bottom: none;
color: #fff;
justify-content: center;
}
.u-nav-mobile a.u-nav-mobile-cta:hover { color: #fff; }
/* Anchor targets clear the pinned product bar. */
.u-page [id] { scroll-margin-top: 76px; }
@media (prefers-reduced-motion: reduce) {
.u-nav-links a::after { transition: none; }
}
/* -----------------------------------------------------------------------
1. Hero layout — even 50/50 split, copy left, product right
The copy is two blocks, the headline (top) and the buttons (bottom), so
that when the hero stacks the product tour can sit between them, right
under the headline and above "Start free trial" — the order Onboard's
hero uses. Side by side, the two blocks meet in the middle of the left
column and read as one.
----------------------------------------------------------------------- */
.u-hero {
position: relative;
overflow: visible;
padding-bottom: 3rem;
}
.u-hero > .container { position: relative; }
/* The ambient blob sits behind the headline rather than in the corner. It was
placed in px from the section's top-left (-60, -300), which on a wide screen
puts it off beside the content with nothing under it. Positioned by its own
centre as a percentage instead, so it tracks the copy column at every width.
Decorative and heavily blurred, so near enough is enough. */
.u-hero .hero-glow-clip .glow {
width: min(680px, 95vw);
height: min(680px, 95vw);
left: 26%;
top: 300px;
transform: translate(-50%, -50%);
}
@media (max-width: 1023px) {
.u-hero .hero-glow-clip .glow { left: 34%; top: 190px; }
}
.u-hero-split {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
grid-template-areas:
"top video"
"bottom video";
column-gap: 3.5rem;
row-gap: 0;
align-items: center;
}
.u-hero-copy { min-width: 0; }
.u-hero-copy-top { grid-area: top; align-self: end; }
.u-hero-copy-bottom { grid-area: bottom; align-self: start; }
.u-hero-visual { grid-area: video; min-width: 0; }
.u-hero-cta {
display: flex;
flex-wrap: wrap;
gap: 0.85rem;
margin-top: 2.25rem;
}
.u-hero-note { margin-top: 1.25rem; }
.u-hero-copy .lead { margin-top: 1.5rem; }
/* -----------------------------------------------------------------------
2. Hero type + rotating question
----------------------------------------------------------------------- */
.u-hero-h1 {
font-size: clamp(2rem, 1.25rem + 2.2vw, 3rem);
line-height: 1.08;
letter-spacing: -0.02em;
}
.u-hero-static { display: block; text-wrap: balance; }
/* The rotator stacks every question in one grid cell, so the block is always
as tall as the longest question and nothing below it shifts as they cycle.
With JS off or reduced motion on, the first question stays visible. */
.u-hero-rotator {
display: grid;
margin-top: 0.12em;
}
.u-hero-q {
grid-area: 1 / 1;
opacity: 0;
transform: translateY(0.2em);
transition: opacity 0.5s var(--ease), transform 0.5s var(--ease);
background: linear-gradient(90deg, var(--accent-1), var(--accent-2));
-webkit-background-clip: text;
background-clip: text;
color: transparent;
}
.u-hero-q.is-active { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
.u-hero-q { transition: none; }
}
/* -----------------------------------------------------------------------
3. Hero video
Framed exactly like the Onboard hero (.ob-hero-panel in onboard.css): a
fixed-dark panel with a 1px slate border, 20px radius and 20px of padding,
and the clip inside it at a 12px radius. The clip (1080x1040) carries its
own header band and titles, so the panel adds nothing but that frame. It
fills its grid column; section 5 sizes the column. Fixed-dark in both
themes, like .code-panel, so it reads as the product rather than page
chrome; the video's own fill is the clip's surface color, so nothing
flashes before the poster paints. The pause control sits on that dark
footage, which is why its colors are literals rather than tokens.
----------------------------------------------------------------------- */
.u-hero-media {
position: relative;
width: 100%;
margin-inline-start: auto;
padding: 20px;
background: #0B1426;
border: 1px solid #3A496C;
border-radius: 20px;
isolation: isolate;
}
.u-hero-video {
display: block;
width: 100%;
height: auto;
aspect-ratio: 1080 / 1040;
border-radius: 12px;
background: #0B1325;
object-fit: cover;
}
/* The clip and its chapter bar share this box, so the bar is placed in the
clip's own coordinates: percentages of the 1080x1040 frame. */
.u-hero-frame { position: relative; }
/* Chapter bar. Five segments in the top right of the clip's header band,
level with its eyebrow (right edge 46/1080 in, centered 49/1040 down).
They fill as the tour plays; each is a button that jumps to its part.
The 28px buttons are a fixed hit area around a 3px bar rather than the
clip's own scale, which would leave each one ~14px wide on a phone. */
.u-hero-chapters {
position: absolute;
top: 4.71%;
right: calc(4.26% - 3px);
display: flex;
transform: translateY(-50%);
}
.u-hero-chapters[hidden] { display: none; }
.u-hero-chapter {
display: grid;
place-items: center;
width: 28px;
height: 28px;
padding: 0 3px;
border: 0;
border-radius: 6px;
background: none;
font: inherit;
cursor: pointer;
-webkit-tap-highlight-color: transparent;
}
.u-hero-chapter-bar {
position: relative;
display: block;
width: 100%;
height: 3px;
border-radius: 2px;
background: rgba(255, 255, 255, 0.16);
overflow: hidden;
transition: background-color 0.2s var(--ease), height 0.2s var(--ease);
}
.u-hero-chapter-fill {
position: absolute;
inset: 0;
background: #7DA8FA;
transform: scaleX(0);
transform-origin: left center;
}
.u-hero-chapter:hover .u-hero-chapter-bar,
.u-hero-chapter:focus-visible .u-hero-chapter-bar {
height: 5px;
background: rgba(255, 255, 255, 0.34);
}
.u-hero-chapter:focus-visible { outline: 2px solid var(--accent-1); outline-offset: 0; }
/* Hover label: sits to the left of the bar, on the eyebrow's row, and is
kept to 18px tall so it clears the clip's title even on a laptop-sized
clip. Positioned against the whole bar (the buttons are not positioned),
so every label ends at the same point. Hidden on mobile (section 5),
where the clip is too small to hold it. */
.u-hero-chapter-tip {
position: absolute;
top: 50%;
right: calc(100% + 4px);
padding: 1px 7px;
border: 1px solid rgba(255, 255, 255, 0.14);
border-radius: 6px;
background: rgba(10, 15, 28, 0.88);
color: #E6E8EB;
font-size: 0.6875rem;
font-weight: 600;
line-height: 14px;
white-space: nowrap;
transform: translateY(-50%);
opacity: 0;
pointer-events: none;
transition: opacity 0.15s var(--ease);
}
.u-hero-chapter:focus-visible .u-hero-chapter-tip { opacity: 1; }
@media (hover: hover) {
.u-hero-chapter:hover .u-hero-chapter-tip { opacity: 1; }
}
.u-hero-video-toggle {
position: absolute;
right: 30px;
bottom: 30px;
width: 32px;
height: 32px;
display: grid;
place-items: center;
padding: 0;
border: 1px solid rgba(255, 255, 255, 0.16);
border-radius: var(--radius-full);
background: rgba(10, 15, 28, 0.66);
color: #E6E8EB;
cursor: pointer;
opacity: 0.72;
transition: opacity 0.2s var(--ease), background-color 0.2s var(--ease);
}
.u-hero-video-toggle[hidden] { display: none; }
.u-hero-video-toggle svg { width: 14px; height: 14px; fill: currentColor; }
.u-hero-video-toggle .i-play,
.u-hero-media.is-paused .u-hero-video-toggle .i-pause { display: none; }
.u-hero-media.is-paused .u-hero-video-toggle .i-play { display: block; }
.u-hero-media:hover .u-hero-video-toggle,
.u-hero-media.is-paused .u-hero-video-toggle,
.u-hero-video-toggle:focus-visible { opacity: 1; }
.u-hero-video-toggle:hover { background: rgba(10, 15, 28, 0.88); }
.u-hero-video-toggle:focus-visible { outline: 2px solid var(--accent-1); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) {
.u-hero-video-toggle,
.u-hero-chapter-bar,
.u-hero-chapter-tip { transition: none; }
}
/* -----------------------------------------------------------------------
4. Hero logo strip
----------------------------------------------------------------------- */
.u-hero-strip { margin-top: 4.5rem; }
@media (prefers-reduced-motion: reduce) {
.u-view-btn, .u-problem-tab, .u-meter-fg,
.u-faq details, .u-faq summary::after { transition: none; }
}
/* -----------------------------------------------------------------------
4b. Connected system - visual concept
A second, deliberately literal rendering of the codebase -> parsed model ->
outcomes concept. Kept in its own namespace so it can be compared against
the existing #model section without changing that implementation.
----------------------------------------------------------------------- */
.u-vision {
--u-violet: #8B5CF6;
--u-violet-rgb: 139, 92, 246;
position: relative;
overflow: hidden;
background:
radial-gradient(circle at 50% 45%, rgba(var(--accent-1-rgb), 0.055), transparent 34%),
var(--surface);
}
.u-vision-heading {
max-width: 930px;
margin-left: auto;
margin-right: auto;
text-align: center;
}
.u-vision-heading .eyebrow { color: var(--accent-1); }
.u-vision-heading h2 {
max-width: 900px;
margin-left: auto;
margin-right: auto;
}
.u-vision-heading .lead {
max-width: 850px;
margin-left: auto;
margin-right: auto;
}
.u-vision-flow {
display: grid;
/* The outer columns and the two gutters are kept symmetric so the model
panel lands on the container's centre line — which is where the section
heading above it is centred. Unequal sides pushed it ~44px left, so the
card's "Understand" and the eyebrow above it didn't stack up. */
grid-template-columns: minmax(280px, 1fr) 64px minmax(380px, 1.2fr) 64px minmax(280px, 1fr);
align-items: stretch;
margin-top: 3.2rem;
min-width: 0;
}
/* Source repository card */
.u-vision-source {
align-self: center;
min-width: 0;
min-height: 430px;
padding: 1.9rem 1.85rem 1.65rem;
background: var(--card);
border: 1px solid rgba(var(--accent-1-rgb), .2);
border-radius: 18px;
box-shadow: var(--shadow-sm);
}
.u-vision-card-head { margin-bottom: 1.4rem; }
.u-vision-card-head h3 {
font-size: 1.38rem;
margin: 0 0 .12rem;
}
.u-vision-card-head p {
margin: 0;
font-size: .94rem;
color: var(--text-muted);
}
.u-vision-tree { color: var(--text-primary); }
.u-vision-tree-row {
position: relative;
display: flex;
align-items: center;
min-height: 31px;
gap: .65rem;
padding-left: .15rem;
}
.u-vision-tree-row code {
font-family: var(--font-mono);
font-size: .84rem;
color: inherit;
white-space: nowrap;
}
.u-vision-tree-row.is-root code,
.u-vision-tree-row.is-folder code { font-weight: 650; }
.u-vision-tree-row.is-more { color: var(--text-muted); }
.u-vision-tree-branch {
position: relative;
margin-left: .58rem;
padding-left: 1.22rem;
}
.u-vision-tree-branch::before {
content: "";
position: absolute;
left: .18rem;
top: 0;
bottom: 13px;
border-left: 1px solid rgba(var(--accent-1-rgb), .22);
}
.u-vision-tree-branch > .u-vision-tree-row::before {
content: "";
position: absolute;
left: -1.02rem;
top: 50%;
width: .78rem;
border-top: 1px solid rgba(var(--accent-1-rgb), .22);
}
.u-vision-folder,
.u-vision-file {
position: relative;
display: inline-block;
flex: 0 0 auto;
color: var(--accent-1);
}
.u-vision-folder {
width: 17px;
height: 12px;
border-radius: 2px;
background: currentColor;
opacity: .82;
}
.u-vision-folder::before {
content: "";
position: absolute;
left: 1px;
top: -3px;
width: 8px;
height: 4px;
border-radius: 2px 2px 0 0;
background: currentColor;
}
.u-vision-folder.is-dark { color: color-mix(in srgb, var(--accent-1) 62%, var(--text-primary)); }
.u-vision-file {
width: 14px;
height: 17px;
border: 1.5px solid currentColor;
border-radius: 2px;
opacity: .88;
}
.u-vision-file::before,
.u-vision-file::after {
content: "";
position: absolute;
left: 3px;
width: 6px;
border-top: 1.2px solid currentColor;
}
.u-vision-file::before { top: 6px; }
.u-vision-file::after { top: 10px; }
/* Input arrow */
.u-vision-arrow {
display: flex;
align-items: center;
justify-content: center;
color: color-mix(in srgb, var(--accent-1) 72%, var(--text-primary));
}
.u-vision-arrow svg { width: 100%; height: auto; }
.u-vision-arrow path {
stroke: currentColor;
stroke-width: 2;
stroke-linecap: round;
stroke-linejoin: round;
}
/* Parsed-model focal card.
Fixed-dark until 2026-10-08, which made it an island once the rest of the
section went light. Every colour in it now comes from a token defined here,
with dark as the default and a light override below -- including the SVG
gradient stops, which CSS can set because the diagram is inline. The light
stack keeps the same hue family and the same light-to-dark descent that
gives it depth; it just starts deeper, since the old top layer was almost
white and would have vanished against a white card. */
.u-vision-model {
--uv-bg:
radial-gradient(circle at 50% 52%, rgba(74, 139, 255, .12), transparent 38%),
linear-gradient(145deg, #182945 0%, #101D32 52%, #0A1527 100%);
--uv-border: rgba(152, 190, 255, .16);
--uv-shadow: 0 28px 60px -38px rgba(5, 21, 48, .8), inset 0 1px 0 rgba(255,255,255,.06);
--uv-dot: rgba(139, 181, 255, .7);
--uv-dot-opacity: .18;
--uv-title: #F4F7FE;
--uv-sub: #BDD0F3;
--uv-net: rgba(127, 206, 255, .64);
--uv-node: #8DE3FF;
--uv-edge: rgba(255, 255, 255, .48);
--uv-chip-bg: rgba(28, 48, 78, .86);
--uv-chip-fg: #EDF4FF;
--uv-chip-shadow: 0 8px 20px -12px #000;
--uv-vocab: #C8D5EC;
--uv-vocab-sep: #63789E;
--uv-halo: #72A7FF;
--uv-top-a: #EEF5FF; --uv-top-b: #A9C5F2;
--uv-m1-a: #BFD5FF; --uv-m1-b: #7397EA;
--uv-m2-a: #8FB1FF; --uv-m2-b: #596EE2;
--uv-bot-a: #827CFA; --uv-bot-b: #5D52D7;
position: relative;
min-width: 0;
min-height: 500px;
padding: 1.55rem 1.25rem 1.7rem;
overflow: hidden;
background: var(--uv-bg);
border: 1px solid var(--uv-border);
border-radius: 20px;
box-shadow: var(--uv-shadow);
}
:root[data-theme="light"] .u-vision-model {
--uv-bg:
radial-gradient(circle at 50% 52%, rgba(74, 139, 255, .10), transparent 40%),
linear-gradient(145deg, #FFFFFF 0%, #F5F9FF 52%, #E9F0FB 100%);
--uv-border: rgba(37, 61, 112, .14);
--uv-shadow: 0 28px 60px -40px rgba(31, 52, 96, .3), inset 0 1px 0 rgba(255,255,255,.9);
--uv-dot: rgba(70, 110, 180, .55);
--uv-dot-opacity: .14;
--uv-title: #101A2E;
--uv-sub: #46587C;
--uv-net: rgba(86, 134, 214, .58);
--uv-node: #3C7AD4;
--uv-edge: rgba(37, 61, 112, .22);
--uv-chip-bg: rgba(255, 255, 255, .94);
--uv-chip-fg: #1B2944;
--uv-chip-shadow: 0 8px 20px -12px rgba(31, 52, 96, .5);
--uv-vocab: #55607A;
--uv-vocab-sep: #9AA7C0;
--uv-halo: #6F9CFF;
--uv-top-a: #C7DBFF; --uv-top-b: #93B4EE;
--uv-m1-a: #A8C4FB; --uv-m1-b: #6E92E4;
--uv-m2-a: #8AACF8; --uv-m2-b: #5068DD;
--uv-bot-a: #7E78F6; --uv-bot-b: #5A4FD3;
}
.u-vision-model::before {
content: "";
position: absolute;
inset: 0;
pointer-events: none;
opacity: var(--uv-dot-opacity);
background-image: radial-gradient(circle, var(--uv-dot) 1px, transparent 1px);
background-size: 28px 28px;
mask-image: radial-gradient(circle at 50% 46%, #000, transparent 72%);
-webkit-mask-image: radial-gradient(circle at 50% 46%, #000, transparent 72%);
}
.u-vision-model-head {
position: relative;
z-index: 2;
text-align: center;
}
.u-vision-model-head h3 {
margin: 0;
color: var(--uv-title);
font-size: 1.85rem;
letter-spacing: -.025em;
}
.u-vision-model-head p {
margin: .05rem 0 0;
color: var(--uv-sub);
font-size: 1.02rem;
}
.u-vision-model-art {
position: relative;
z-index: 1;
max-width: 500px;
margin: .2rem auto -.1rem;
}
.u-vision-model-svg { width: 100%; height: auto; display: block; }
.u-vision-net path {
stroke: var(--uv-net);
stroke-width: 1.45;
stroke-dasharray: 3 7;
}
.u-vision-points circle { fill: var(--uv-node); }
/* Beats the stroke presentation attribute on the group in the markup. */
.u-vision-layers { stroke: var(--uv-edge); }
/* The stops carry their own stop-opacity in the markup; only the colour is
themed here. Addressed by gradient id and position, so leave the stop order
alone when editing the diagram. */
#uVisionHalo stop:first-child { stop-color: var(--uv-halo); }
#uVisionHalo stop:last-child { stop-color: var(--uv-halo); }
#uVisionTop stop:first-child { stop-color: var(--uv-top-a); }
#uVisionTop stop:last-child { stop-color: var(--uv-top-b); }
#uVisionMid1 stop:first-child { stop-color: var(--uv-m1-a); }
#uVisionMid1 stop:last-child { stop-color: var(--uv-m1-b); }
#uVisionMid2 stop:first-child { stop-color: var(--uv-m2-a); }
#uVisionMid2 stop:last-child { stop-color: var(--uv-m2-b); }
#uVisionBottom stop:first-child { stop-color: var(--uv-bot-a); }
#uVisionBottom stop:last-child { stop-color: var(--uv-bot-b); }
.u-vision-chip {
position: absolute;
z-index: 3;
transform: translate(-50%, -50%);
padding: .38rem .78rem;
border: 1px solid rgba(98, 151, 255, .74);
border-radius: 8px;
background: var(--uv-chip-bg);
color: var(--uv-chip-fg);
font-size: .75rem;
font-weight: 650;
line-height: 1;
white-space: nowrap;
box-shadow: var(--uv-chip-shadow);
backdrop-filter: blur(6px);
}
.u-vision-chip.is-functions { left: 14%; top: 24%; }
.u-vision-chip.is-types { left: 85%; top: 24%; border-color: rgba(176, 123, 255, .76); }
.u-vision-chip.is-calls { left: 9%; top: 49%; border-color: rgba(65, 217, 194, .7); }
.u-vision-chip.is-vars { left: 90%; top: 49%; }
.u-vision-chip.is-refs { left: 14%; top: 73%; border-color: rgba(160, 120, 255, .72); }
.u-vision-chip.is-deps { left: 86%; top: 73%; border-color: rgba(65, 217, 194, .7); }
.u-vision-vocab {
position: relative;
z-index: 2;
margin: -.25rem auto 0;
text-align: center;
color: var(--uv-vocab);
font-size: .9rem;
line-height: 1.72;
}
.u-vision-vocab span { white-space: nowrap; }
.u-vision-vocab i {
padding: 0 .38rem;
color: var(--uv-vocab-sep);
font-style: normal;
}
/* Fan-out */
.u-vision-fan {
display: flex;
align-items: stretch;
padding: 18px 0;
}
.u-vision-fan svg { width: 100%; height: 100%; min-height: 420px; }
.u-vision-fan path {
fill: none;
stroke-width: 2.2;
stroke-linecap: round;
stroke-linejoin: round;
vector-effect: non-scaling-stroke;
}
.u-vision-fan .is-explore { stroke: var(--accent-1); }
.u-vision-fan .is-measure { stroke: var(--u-violet); }
.u-vision-fan .is-automate { stroke: var(--accent-2); }
/* Outcome cards */
.u-vision-actions {
display: grid;
grid-template-rows: repeat(3, 1fr);
gap: 1rem;
min-width: 0;
padding: 11px 0;
}
.u-vision-action {
display: grid;
grid-template-columns: 66px minmax(0,1fr) 18px;
gap: 1rem;
align-items: center;
min-width: 0;
padding: 1.25rem 1.2rem;
border: 1px solid var(--border);
border-radius: 16px;
background: var(--card);
box-shadow: 0 14px 32px -28px rgba(13, 33, 68, .42);
transition: transform .18s var(--ease), box-shadow .18s var(--ease), border-color .18s var(--ease);
}
.u-vision-action:hover,
.u-vision-action:focus-visible {
transform: translateY(-2px);
box-shadow: var(--shadow-md);
}
.u-vision-action:focus-visible { outline: 2px solid var(--accent-1); outline-offset: 3px; }
.u-vision-action.is-explore {
background: linear-gradient(110deg, rgba(var(--accent-1-rgb), .08), transparent 65%), var(--card);
border-color: rgba(var(--accent-1-rgb), .26);
}
.u-vision-action.is-measure {
background: linear-gradient(110deg, rgba(var(--u-violet-rgb), .085), transparent 65%), var(--card);
border-color: rgba(var(--u-violet-rgb), .25);
}
.u-vision-action.is-automate {
background: linear-gradient(110deg, rgba(var(--accent-2-rgb), .085), transparent 65%), var(--card);
border-color: rgba(var(--accent-2-rgb), .25);
}
.u-vision-action-icon {
width: 66px;
height: 66px;
display: grid;
place-items: center;
border-radius: 17px;
}
.u-vision-action-icon svg { width: 34px; height: 34px; }
.is-explore .u-vision-action-icon { color: var(--accent-1); background: rgba(var(--accent-1-rgb), .11); }
.is-measure .u-vision-action-icon { color: var(--u-violet); background: rgba(var(--u-violet-rgb), .11); }
.is-automate .u-vision-action-icon { color: var(--accent-2); background: rgba(var(--accent-2-rgb), .11); }
.u-vision-action-copy {
min-width: 0;
display: flex;
flex-direction: column;
gap: .34rem;
}
.u-vision-action-copy strong {
color: var(--text-primary);
font-size: 1.15rem;
line-height: 1.1;
}
.u-vision-action-copy > span {
color: var(--text-primary);
font-size: .84rem;
line-height: 1.45;
}
.u-vision-action-copy i { color: var(--text-muted); font-style: normal; padding: 0 .1rem; }
/* The terms are authored as two groups split by a
. Where the card is too
narrow for that, the break is dropped and this separator takes its place, so
the run still reads as a list instead of two words colliding. */
.u-vision-sep { display: none; }
.u-vision-action-copy small {
color: var(--text-muted);
font-size: .76rem;
line-height: 1.35;
}
.u-vision-action-arrow {
color: var(--text-primary);
font-size: 2rem;
font-weight: 300;
line-height: 1;
transition: transform .18s var(--ease);
}
.u-vision-action:hover .u-vision-action-arrow { transform: translateX(3px); }
.u-vision-transition {
display: grid;
grid-template-columns: minmax(36px, 1fr) auto minmax(36px, 1fr);
align-items: center;
gap: 1.1rem;
max-width: 1050px;
margin: 3rem auto 0;
color: var(--text-muted);
}
.u-vision-transition span { height: 1px; background: linear-gradient(90deg, transparent, rgba(var(--accent-1-rgb), .42)); }
.u-vision-transition span:last-child { background: linear-gradient(90deg, rgba(var(--accent-1-rgb), .42), transparent); }
.u-vision-transition p { margin: 0; text-align: center; font-size: .95rem; }
@media (max-width: 1440px) {
.u-vision-action { grid-template-columns: 52px minmax(0,1fr) 16px; gap: .8rem; padding: 1rem; }
.u-vision-action-icon { width: 52px; height: 52px; border-radius: 14px; }
.u-vision-action-icon svg { width: 27px; height: 27px; }
/* The authored
splits the terms into two groups; at this width each
group wraps again, which reads as ragged. Let the run flow instead, with
the separator standing in for the break. */
.u-vision-action-copy > span br { display: none; }
.u-vision-sep { display: inline; }
}
@media (max-width: 1250px) {
.u-vision-flow { grid-template-columns: minmax(250px,1fr) 60px minmax(340px,1.18fr) 60px minmax(250px,1fr); }
.u-vision-source { padding-left: 1.3rem; padding-right: 1.3rem; }
.u-vision-action { grid-template-columns: 54px minmax(0,1fr) 16px; gap: .8rem; padding: 1rem; }
.u-vision-action-icon { width: 54px; height: 54px; border-radius: 14px; }
.u-vision-action-icon svg { width: 29px; height: 29px; }
}
@media (max-width: 1023px) {
.u-vision-flow {
grid-template-columns: minmax(0,1fr) 56px minmax(0,1.12fr);
grid-template-areas:
"source input model"
"fan fan fan"
"actions actions actions";
gap: 1.1rem 0;
align-items: center;
}
.u-vision-source { grid-area: source; min-height: 0; }
.u-vision-arrow { grid-area: input; }
.u-vision-model { grid-area: model; min-height: 0; }
.u-vision-fan {
grid-area: fan;
justify-self: center;
width: 54px;
height: 48px;
padding: 0;
transform: rotate(90deg);
}
.u-vision-fan svg { min-height: 0; height: 48px; }
.u-vision-fan .is-explore,
.u-vision-fan .is-automate { display: none; }
.u-vision-actions {
grid-area: actions;
grid-template-columns: repeat(3, minmax(0,1fr));
grid-template-rows: none;
gap: .8rem;
padding: 0;
}
.u-vision-action {
grid-template-columns: 46px minmax(0,1fr);
align-items: start;
padding: 1rem;
}
.u-vision-action-icon { width: 46px; height: 46px; }
.u-vision-action-arrow { display: none; }
.u-vision-action-copy small { display: none; }
.u-vision-action-copy > span br { display: none; }
.u-vision-sep { display: inline; }
}
@media (max-width: 720px) {
.u-vision-heading { text-align: left; }
.u-vision-flow {
display: flex;
flex-direction: column;
gap: 1rem;
margin-top: 2rem;
}
.u-vision-source,
.u-vision-model,
.u-vision-actions { width: 100%; }
.u-vision-source { min-height: 0; }
.u-vision-arrow {
width: 44px;
transform: rotate(90deg);
}
.u-vision-model { padding: 1.35rem .8rem 1.4rem; border-radius: 18px; }
.u-vision-model-head h3 { font-size: 1.55rem; }
.u-vision-model-art { max-width: 450px; }
.u-vision-chip { font-size: .66rem; padding: .3rem .54rem; }
.u-vision-fan {
width: 44px;
height: 44px;
padding: 0;
transform: rotate(90deg);
}
.u-vision-fan svg { height: 44px; min-height: 0; }
.u-vision-fan .is-explore,
.u-vision-fan .is-automate { display: none; }
.u-vision-actions { display: flex; flex-direction: column; gap: .75rem; padding: 0; }
.u-vision-action {
grid-template-columns: 52px minmax(0,1fr);
padding: 1rem;
}
.u-vision-action-icon { width: 52px; height: 52px; }
.u-vision-action-copy small { display: block; }
.u-vision-action-copy > span br { display: block; }
.u-vision-sep { display: none; }
.u-vision-transition { grid-template-columns: 26px minmax(0,1fr) 26px; gap: .7rem; margin-top: 2.4rem; }
}
@media (max-width: 430px) {
.u-vision-source { padding: 1.4rem 1.05rem; }
.u-vision-tree-row code { font-size: .76rem; }
.u-vision-chip.is-functions,
.u-vision-chip.is-types,
.u-vision-chip.is-refs,
.u-vision-chip.is-deps { display: none; }
.u-vision-vocab { font-size: .78rem; }
.u-vision-transition span { display: none; }
.u-vision-transition { display: block; }
}
@media (prefers-reduced-motion: reduce) {
.u-vision-action,
.u-vision-action-arrow { transition: none; }
}
/* ---------------------------------------------------------------------------
Views switcher (#views)
--------------------------------------------------------------------------- */
.u-views {
display: grid;
grid-template-columns: 250px minmax(0, 1fr);
gap: 1.5rem;
align-items: start;
}
.u-views-rail { display: flex; flex-direction: column; gap: 0.5rem; }
.u-view-btn {
text-align: left;
background: transparent;
border: 1px solid transparent;
border-radius: var(--radius-md);
padding: 0.8rem 1rem;
cursor: pointer;
color: var(--text-primary);
transition: background-color 0.18s var(--ease), border-color 0.18s var(--ease), transform 0.18s var(--ease);
}
.u-view-btn:hover { background: var(--navbar-highlight); }
.u-view-btn.is-active {
background: var(--card);
border-color: var(--border-strong);
box-shadow: var(--shadow-sm);
}
.u-view-btn-name { display: block; font-size: 0.9375rem; font-weight: 700; }
.u-view-btn-desc { display: block; font-size: 0.8125rem; color: var(--text-muted); margin-top: 0.15rem; }
.u-view-btn.is-active .u-view-btn-name { color: var(--accent-1); }
.u-views-stage {
background: var(--card);
border: 1px solid var(--border);
border-radius: var(--radius-xl);
padding: 1.75rem;
min-height: 380px;
}
.u-view { display: none; margin: 0; }
.u-view.is-active { display: block; }
/* Cap the drawing width so a diagram reads as a diagram rather than
stretching into a billboard on a wide monitor. */
.u-view svg { width: 100%; max-width: 560px; height: auto; margin: 0 auto; }
.u-view figcaption {
margin-top: 1.25rem;
padding-top: 1.25rem;
border-top: 1px solid var(--border);
font-size: 0.875rem;
color: var(--text-muted);
line-height: 1.6;
}
/* Diagram primitives — all theme-aware via tokens. */
.u-dg-edge path {
fill: none;
stroke: var(--border-strong);
stroke-width: 1.5;
stroke-linecap: round;
}
.u-dg-edge.is-cycle path { stroke: #F87171; stroke-dasharray: 4 4; }
.u-dg-node rect, .u-dg-node path {
fill: rgba(var(--accent-1-rgb), 0.1);
stroke: rgba(var(--accent-1-rgb), 0.4);
stroke-width: 1.4;
}
.u-dg-node text {
fill: var(--text-primary);
font-family: var(--font-mono);
font-size: 11px;
text-anchor: middle;
}
.u-dg-node.is-root rect, .u-dg-node.is-root path {
fill: rgba(var(--accent-1-rgb), 0.24);
stroke: var(--accent-1);
}
.u-dg-node.is-leaf rect {
fill: rgba(var(--accent-2-rgb), 0.1);
stroke: rgba(var(--accent-2-rgb), 0.4);
}
.u-dg-node.is-muted rect {
fill: var(--navbar-highlight);
stroke: var(--border-strong);
}
.u-dg-node.is-muted text { fill: var(--text-muted); }
.u-dg-node.is-bad rect, .u-dg-node.is-bad path {
fill: rgba(248, 113, 113, 0.12);
stroke: rgba(248, 113, 113, 0.55);
}
.u-dg-flag {
fill: #F87171;
font-family: var(--font-sans);
font-size: 10px;
font-weight: 700;
text-anchor: middle;
}
.u-dg-class rect {
fill: var(--surface);
stroke: var(--border-strong);
stroke-width: 1.4;
}
.u-dg-class line { stroke: var(--border-strong); stroke-width: 1.2; }
.u-dg-class .t {
fill: var(--text-primary);
font-family: var(--font-sans);
font-size: 12px;
font-weight: 700;
text-anchor: middle;
}
.u-dg-class .m {
fill: var(--text-muted);
font-family: var(--font-mono);
font-size: 10px;
}
.u-dg-tm rect { stroke: var(--surface); stroke-width: 2; }
.u-dg-tm .h1 { fill: rgba(var(--accent-2-rgb), 0.22); }
.u-dg-tm .h2 { fill: rgba(var(--accent-1-rgb), 0.2); }
.u-dg-tm .h3 { fill: rgba(246, 193, 119, 0.3); }
.u-dg-tm .h4 { fill: rgba(248, 113, 113, 0.3); }
.u-dg-tm text {
fill: var(--text-primary);
font-family: var(--font-sans);
font-size: 11px;
font-weight: 700;
}
.u-dg-tm text.v {
fill: var(--text-muted);
font-family: var(--font-mono);
font-size: 10px;
font-weight: 400;
}
/* ---------------------------------------------------------------------------
FAQ
--------------------------------------------------------------------------- */
.u-faq-grid {
display: grid;
grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
gap: 3.5rem;
align-items: start;
}
.u-faq-grid .lead { margin: 1rem 0 1.75rem; }
.u-faq { display: flex; flex-direction: column; gap: 0.6rem; }
.u-faq details {
background: var(--card);
border: 1px solid var(--border);
border-radius: var(--radius-lg);
transition: border-color 0.2s var(--ease);
}
.u-faq details[open] { border-color: var(--border-strong); }
.u-faq summary {
list-style: none;
cursor: pointer;
padding: 1.1rem 3rem 1.1rem 1.35rem;
font-size: 0.9375rem;
font-weight: 600;
position: relative;
}
.u-faq summary::-webkit-details-marker { display: none; }
.u-faq summary::after {
content: "";
position: absolute;
right: 1.35rem;
top: 50%;
width: 9px;
height: 9px;
margin-top: -6px;
border-right: 2px solid var(--text-muted);
border-bottom: 2px solid var(--text-muted);
transform: rotate(45deg);
transition: transform 0.2s var(--ease);
}
.u-faq details[open] summary::after { transform: rotate(-135deg); margin-top: -2px; }
.u-faq summary:focus-visible { outline: 2px solid var(--accent-1); outline-offset: 2px; }
.u-faq p {
padding: 0 1.35rem 1.25rem;
font-size: 0.9375rem;
margin: 0;
}
/* ---------------------------------------------------------------------------
Problem selector
--------------------------------------------------------------------------- */
.u-problems {
display: grid;
grid-template-columns: 290px minmax(0, 1fr);
gap: 2rem;
align-items: start;
}
.u-problem-tabs { display: flex; flex-direction: column; gap: 0.4rem; }
.u-problem-tab {
position: relative;
text-align: left;
background: transparent;
border: none;
border-left: 2px solid var(--border);
border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
padding: 0.85rem 1rem;
font-size: 0.9375rem;
font-weight: 600;
color: var(--text-muted);
cursor: pointer;
transition: color 0.18s var(--ease), border-color 0.18s var(--ease), background-color 0.18s var(--ease);
}
.u-problem-tab:hover { color: var(--text-primary); background: var(--navbar-highlight); }
.u-problem-tab.is-active {
color: var(--text-primary);
border-left-color: var(--accent-1);
background: var(--navbar-highlight);
}
.u-problem-panels {
background: var(--card);
border: 1px solid var(--border);
border-radius: var(--radius-xl);
padding: 2.25rem;
min-height: 320px;
}
.u-problem-panel { display: none; }
.u-problem-panel.is-active { display: block; }
.u-problem-panel h3 { margin-bottom: 0.85rem; }
.u-problem-points {
margin-top: 1.75rem;
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 0.85rem 1.75rem;
}
.u-problem-points li {
position: relative;
padding-left: 1.5rem;
font-size: 0.875rem;
color: var(--text-muted);
line-height: 1.5;
}
.u-problem-points li::before {
content: "";
position: absolute;
left: 0;
top: 0.4rem;
width: 7px;
height: 7px;
border-radius: 2px;
background: linear-gradient(135deg, var(--accent-1), var(--accent-2));
}
.u-problem-points b { color: var(--text-primary); font-weight: 600; }
/* A credibility figure that is a phrase rather than a short number
("20,000+ developers") does not fit the display size a bare number does,
and wrapping it to two lines pushes its label below the other two. One
step down in size keeps it on a single line so the three figures share a
baseline; below tablet the row is only two columns wide and wraps anyway. */
.stats-row .stat-value.is-phrase {
font-size: clamp(1.15rem, 0.95rem + 0.7vw, 1.6rem);
line-height: 1.25;
/* Occupy the same box a full-size figure would, so this item's label sits
on the same line as its neighbours' rather than ~20px higher. The clamp
mirrors .stat-value's own font-size; x1.5 is the inherited line-height. */
min-height: calc(clamp(1.5rem, 1.15rem + 1.2vw, 2.15rem) * 1.5);
display: flex;
align-items: center;
justify-content: center;
}
/* ---------------------------------------------------------------------------
Section "learn more" links + closing CTA band.
.u-section-cta is the centred outline link that closes a feature section
(graphs, CodeCheck); .u-problem-cta is the same affordance inside a single
problem panel, so each situation can hand off to its own page.
--------------------------------------------------------------------------- */
.u-section-cta {
display: flex;
justify-content: center;
margin-top: 2.75rem;
}
.u-section-cta .btn svg,
.u-problem-cta .btn svg {
width: 14px;
height: 14px;
transition: transform 0.15s var(--ease);
}
.u-section-cta .btn:hover svg,
.u-problem-cta .btn:hover svg { transform: translateX(3px); }
.u-problem-cta { margin-top: 1.75rem; }
/* Closing CTA band. The panel echoes the credibility card's shape (same
radius and border) with a soft accent wash falling from the top edge, so
the page ends on the same visual family it opened with rather than a
plain box. */
.u-final-cta-panel {
position: relative;
overflow: hidden;
text-align: center;
border: 1px solid var(--border);
border-radius: var(--radius-xl);
background:
radial-gradient(900px circle at 50% -25%, rgba(var(--accent-1-rgb), 0.18), transparent 62%),
var(--card);
padding: clamp(2.75rem, 5vw, 4.25rem) clamp(1.5rem, 4vw, 3rem);
}
.u-final-cta-panel h2 { margin-bottom: 0.9rem; }
.u-final-cta-panel p.lead { max-width: 58ch; margin: 0 auto; }
.u-final-cta-row {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 0.85rem;
margin-top: 2.1rem;
}
.u-final-cta-note {
margin-top: 1.35rem;
font-size: 0.8125rem;
color: var(--text-muted);
}
@media (max-width: 460px) {
.u-final-cta-row .btn { flex: 1 1 100%; }
}
/* ---------------------------------------------------------------------------
Compliance
--------------------------------------------------------------------------- */
.u-rule-card { text-align: center; }
/* Section head: copy left, seal right. The seal certifies the section as a
whole, which is what it always meant — inside the third card it read as a
third statistic alongside 91% and 90%. */
.u-comp-head {
display: grid;
/* A real column rather than auto: an auto-width plate hugs the right edge
and leaves a gap in the middle of the row. */
grid-template-columns: minmax(0, 1fr) minmax(320px, 420px);
align-items: center;
gap: 2.5rem;
margin-bottom: 3rem;
}
/* .section-heading carries its own 3rem bottom margin, which would add to the
grid gap and to the margin above. The wrapper owns the spacing instead.
Its 620px cap is dropped here too: in a left-aligned row that cap leaves a
void between the copy and the plate. The paragraph keeps a cap of its own
so the line length stays readable. */
.u-comp-head .section-heading { margin-bottom: 0; max-width: none; }
.u-comp-head .section-heading p { max-width: 58ch; }
.u-comp-cert {
display: flex;
align-items: center;
gap: 1.35rem;
padding: 1.6rem 1.75rem;
border: 1px solid var(--border);
border-radius: var(--radius-xl);
background: var(--card);
}
.u-comp-cert .u-seal { width: 84px; height: 84px; flex-shrink: 0; }
.u-comp-cert-copy {
font-size: 0.8125rem;
line-height: 1.55;
color: var(--text-muted);
}
.u-comp-cert-copy b {
display: block;
margin-bottom: 0.15rem;
font-size: 1rem;
font-weight: 700;
letter-spacing: -0.01em;
color: var(--text-primary);
}
@media (max-width: 1023px) {
/* Stacked, the plate would stretch the full width with its seal and two
short lines hugging the left. Let it size to its content instead. */
.u-comp-head { grid-template-columns: minmax(0, 1fr); gap: 1.75rem; }
.u-comp-cert { justify-self: start; }
}
/* The DO card's slot, sized to match the two ring meters beside it so the
three cards share one baseline. */
.u-do-badge {
display: flex;
align-items: center;
justify-content: center;
width: 84px;
height: 84px;
border-radius: 50%;
border: 2px solid rgba(var(--accent-1-rgb), 0.35);
background: rgba(var(--accent-1-rgb), 0.1);
color: var(--accent-1);
font-size: 1.0625rem;
font-weight: 800;
letter-spacing: -0.01em;
white-space: nowrap;
}
.u-meter { position: relative; width: 84px; height: 84px; margin: 0 auto 1.25rem; }
.u-meter svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.u-meter circle { fill: none; stroke-width: 7; }
.u-meter-bg { stroke: var(--border); }
.u-meter-fg {
stroke: var(--accent-1);
stroke-linecap: round;
/* r = 33 → circumference ≈ 207.3 */
stroke-dasharray: 207.3;
stroke-dashoffset: calc(207.3 - (207.3 * var(--pct) / 100));
transition: stroke-dashoffset 0.9s var(--ease);
}
.u-meter.is-accent-2 .u-meter-fg { stroke: var(--accent-2); }
.u-meter-num {
position: absolute;
inset: 0;
display: flex;
align-items: center;
justify-content: center;
font-size: 1.125rem;
font-weight: 800;
letter-spacing: -0.02em;
}
.u-seal-wrap { display: flex; justify-content: center; margin-bottom: 1.25rem; }
.u-seal { width: 84px; height: 84px; object-fit: contain; }
.u-rule-card h3 { margin-bottom: 0.5rem; }
/* ---------------------------------------------------------------------------
VS Code banner (between #model and #capabilities)
--------------------------------------------------------------------------- */
/* Full-bleed: the band runs edge to edge and only its contents are held to
the container width, so there is no rounded card sitting inside a column. */
.u-vsc-band { margin-block: 0; }
.u-vsc {
display: block;
border-top: 1px solid rgba(var(--accent-1-rgb), 0.22);
border-bottom: 1px solid rgba(var(--accent-1-rgb), 0.22);
background: rgba(var(--accent-1-rgb), 0.07);
transition: background-color 0.2s var(--ease);
}
.u-vsc:hover { background: rgba(var(--accent-1-rgb), 0.11); }
.u-vsc-inner {
display: grid;
grid-template-columns: auto minmax(0, 1fr) auto;
align-items: center;
gap: 1.25rem 1.75rem;
max-width: var(--container-max);
margin: 0 auto;
padding: 1.75rem;
}
.u-vsc:focus-visible { outline: 2px solid var(--accent-1); outline-offset: -3px; }
/* The real VS Code mark is distinctive enough to stand without a tile, and a
tinted plate behind someone else's logo reads as a badge rather than their
icon. The box stays 2.75rem so the row's alignment is unchanged. */
.u-vsc-icon {
width: 2.75rem;
height: 2.75rem;
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
}
.u-vsc-mark { width: 2.4rem; height: 2.4rem; }
.u-vsc-mark.is-light { display: none; }
:root[data-theme="light"] .u-vsc-mark.is-dark { display: none; }
:root[data-theme="light"] .u-vsc-mark.is-light { display: block; }
.u-vsc-copy { display: block; }
.u-vsc-kicker {
display: block;
font-size: 0.6875rem;
font-weight: 800;
text-transform: uppercase;
letter-spacing: 0.1em;
color: var(--accent-1);
margin-bottom: 0.3rem;
}
.u-vsc-title {
display: block;
font-size: 1.125rem;
font-weight: 700;
letter-spacing: -0.01em;
margin-bottom: 0.3rem;
}
.u-vsc-sub {
display: block;
font-size: 0.875rem;
color: var(--text-muted);
/* Capped so the line length stays readable, but wide enough that the band
does not leave a void between the copy and the action at 1440 and up. */
max-width: 82ch;
}
/* Styled as a button but inside the band's own , so it is a visual
affordance rather than a second tab stop. */
.u-vsc-cta {
display: inline-flex;
align-items: center;
gap: 0.45rem;
flex-shrink: 0;
padding: 0.7rem 1.15rem;
border-radius: var(--radius-full);
background: var(--accent-1);
color: #fff;
font-size: 0.875rem;
font-weight: 700;
white-space: nowrap;
}
.u-vsc-cta svg { width: 14px; height: 14px; transition: transform 0.15s var(--ease); }
.u-vsc:hover .u-vsc-cta svg { transform: translateX(3px); }
@media (max-width: 859px) {
.u-vsc-inner {
grid-template-columns: auto minmax(0, 1fr);
padding: 1.5rem 1.4rem;
}
/* The call to action drops to its own row under both, spanning the width
so it keeps a full-width hit area on touch. */
.u-vsc-cta { grid-column: 1 / -1; justify-content: center; }
}
@media (max-width: 479px) {
.u-vsc-inner { grid-template-columns: minmax(0, 1fr); gap: 1rem; }
}
@media (prefers-reduced-motion: reduce) {
.u-vsc, .u-vsc-cta svg { transition: none; }
}
/* The bundled-standards roster (#compliance).
A native . Closed, it reads as one more card in the section; open,
it lays the standards out in groups so the seven MISRA editions read as a
group rather than as seven separate claims. MISRA spans the full row
because it is the longest group and the one most people are counting.
Grid, not CSS columns, so the visual order is the DOM order left-to-right
and top-to-bottom at every width. */
.u-std {
margin-top: 1.5rem;
background: var(--card);
border: 1px solid var(--border);
border-radius: var(--radius-xl);
transition: border-color 0.2s var(--ease);
}
.u-std[open] { border-color: var(--border-strong); }
.u-std > summary {
list-style: none;
cursor: pointer;
position: relative;
display: block;
padding: 1.35rem 3.25rem 1.35rem 1.75rem;
}
.u-std > summary::-webkit-details-marker { display: none; }
.u-std > summary::after {
content: "";
position: absolute;
right: 1.75rem;
top: 50%;
width: 9px;
height: 9px;
margin-top: -6px;
border-right: 2px solid var(--text-muted);
border-bottom: 2px solid var(--text-muted);
transform: rotate(45deg);
transition: transform 0.2s var(--ease);
}
.u-std[open] > summary::after { transform: rotate(-135deg); margin-top: -2px; }
.u-std > summary:focus-visible { outline: 2px solid var(--accent-1); outline-offset: 2px; }
.u-std-label {
display: block;
font-size: 1.0625rem;
font-weight: 700;
letter-spacing: -0.01em;
}
.u-std-hint {
display: block;
margin-top: 0.3rem;
font-size: 0.8125rem;
color: var(--text-muted);
}
.u-std[open] .u-std-hint { display: none; }
.u-std-body {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 1.6rem 1.75rem;
align-items: start;
padding: 0.25rem 1.75rem 1.75rem;
}
.u-std-group.is-wide { grid-column: 1 / -1; }
.u-std-group h4 {
margin-bottom: 0.6rem;
font-size: 0.6875rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.08em;
color: var(--text-muted);
}
.u-std-chips {
display: flex;
flex-wrap: wrap;
gap: 0.4rem;
list-style: none;
margin: 0;
padding: 0;
}
.u-std-chips li {
padding: 0.32rem 0.7rem;
background: var(--surface);
border: 1px solid var(--border-strong);
border-radius: var(--radius-full);
font-size: 0.8125rem;
line-height: 1.35;
}
.u-std-note {
grid-column: 1 / -1;
margin: 0.4rem 0 0;
padding-top: 1.1rem;
border-top: 1px solid var(--border);
font-size: 0.8125rem;
color: var(--text-muted);
}
@media (max-width: 1023px) {
.u-std-body { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 639px) {
.u-std > summary { padding: 1.1rem 2.75rem 1.1rem 1.25rem; }
.u-std > summary::after { right: 1.25rem; }
.u-std-label { font-size: 1rem; }
.u-std-body { grid-template-columns: minmax(0, 1fr); padding: 0.25rem 1.25rem 1.25rem; }
}
@media (prefers-reduced-motion: reduce) {
.u-std, .u-std > summary::after { transition: none; }
}
.u-bughunter {
margin-top: 1.5rem;
display: grid;
grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
gap: 2.5rem;
align-items: center;
background: var(--card);
border: 1px solid var(--border);
border-radius: var(--radius-xl);
padding: 2.25rem;
}
.u-bughunter h3 { margin: 0.25rem 0 0.75rem; }
/* The panel is not a .card-hover, so the shared arrow nudge never fires
here. Hook it to the link's own hover instead. */
.u-bughunter .card-link:hover svg { transform: translateX(3px); }
.u-bug-list { display: flex; flex-direction: column; gap: 0.5rem; }
.u-bug-list li {
display: flex;
align-items: center;
gap: 0.7rem;
padding: 0.7rem 0.9rem;
background: var(--surface);
border: 1px solid var(--border);
border-radius: var(--radius-md);
font-size: 0.875rem;
}
.u-bug-list em {
margin-left: auto;
font-style: normal;
font-family: var(--font-mono);
font-size: 0.75rem;
color: var(--text-muted);
}
.u-bug-dot {
width: 8px;
height: 8px;
border-radius: 50%;
background: #F87171;
box-shadow: 0 0 0 3px rgba(248, 113, 113, 0.18);
flex-shrink: 0;
}
.u-bug-dot.is-ok { background: var(--accent-2); box-shadow: 0 0 0 3px rgba(var(--accent-2-rgb), 0.18); }
/* -----------------------------------------------------------------------
4b. The questions (#capabilities)
Five question/answer rows alternating left and right down a centre spine,
each with a small purpose-built visual. The visuals are inline SVG or plain
markup rather than images, so they stay sharp and follow the theme.
----------------------------------------------------------------------- */
.u-qa-list {
position: relative;
display: flex;
flex-direction: column;
gap: 4.5rem;
}
/* The spine — decorative only, so it goes once the rows stack. */
.u-qa-list::before {
content: "";
position: absolute;
top: 0;
bottom: 0;
left: 50%;
width: 1px;
background: linear-gradient(180deg, transparent, var(--border) 8%, var(--border) 92%, transparent);
pointer-events: none;
}
.u-qa-item {
position: relative;
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 3.5rem;
align-items: center;
}
.u-qa-item:nth-child(even) .u-qa-copy { order: 2; }
.u-qa-item:nth-child(even) .u-qa-visual { order: 1; }
.u-qa-num {
display: inline-block;
font-family: var(--font-mono);
font-size: 0.8125rem;
font-weight: 700;
letter-spacing: 0.06em;
color: var(--accent-2);
margin-bottom: 0.85rem;
}
.u-qa-copy h3 {
font-size: clamp(1.25rem, 1.1rem + 0.8vw, 1.75rem);
line-height: 1.25;
letter-spacing: -0.01em;
margin-bottom: 0.85rem;
}
.u-qa-copy p + p { margin-top: 0.85rem; }
.u-qa-out {
font-size: 0.9375rem;
padding-top: 0.95rem;
border-top: 1px solid var(--border);
margin-top: 1.25rem !important;
}
.u-qa-out strong { color: var(--text-primary); }
.u-qa-visual {
background: var(--card);
border: 1px solid var(--border);
border-radius: var(--radius-xl);
padding: 1.75rem;
box-shadow: var(--shadow-sm);
min-width: 0;
}
.u-qa-visual svg { width: 100%; height: auto; }
/* Diagram primitives — token-driven, so both themes read correctly. */
.u-edge path {
fill: none;
stroke: var(--border-strong);
stroke-width: 1.5;
stroke-linecap: round;
}
.u-edge.is-cycle path { stroke: #F87171; stroke-dasharray: 4 4; }
.u-node rect {
fill: rgba(var(--accent-1-rgb), 0.1);
stroke: rgba(var(--accent-1-rgb), 0.4);
stroke-width: 1.4;
}
.u-node text {
fill: var(--text-primary);
font-family: var(--font-mono);
font-size: 11px;
text-anchor: middle;
}
.u-node.is-root rect { fill: rgba(var(--accent-1-rgb), 0.24); stroke: var(--accent-1); }
.u-node.is-leaf rect { fill: rgba(var(--accent-2-rgb), 0.1); stroke: rgba(var(--accent-2-rgb), 0.4); }
.u-node.is-bad rect { fill: rgba(248, 113, 113, 0.12); stroke: rgba(248, 113, 113, 0.55); }
.u-flag {
fill: #F87171;
font-family: var(--font-sans);
font-size: 10px;
font-weight: 700;
text-anchor: middle;
}
/* Reference / violation list cards */
.u-xref-head,
.u-check-head {
display: flex;
align-items: center;
justify-content: space-between;
gap: 0.75rem;
flex-wrap: wrap;
padding-bottom: 0.9rem;
margin-bottom: 0.4rem;
border-bottom: 1px solid var(--border);
font-size: 0.8125rem;
color: var(--text-muted);
}
.u-xref-card ul li,
.u-check-card ul li {
display: flex;
align-items: center;
gap: 0.75rem;
padding: 0.55rem 0;
font-family: var(--font-mono);
font-size: 0.8125rem;
color: var(--text-primary);
}
.u-check-card ul li { font-family: var(--font-sans); }
.u-xref-card em,
.u-check-card em {
margin-left: auto;
font-style: normal;
font-size: 0.75rem;
color: var(--text-muted);
white-space: nowrap;
}
.u-tag {
flex-shrink: 0;
min-width: 46px;
text-align: center;
font-family: var(--font-sans);
font-size: 0.625rem;
font-weight: 700;
padding: 3px 8px;
border-radius: var(--radius-full);
border: 1px solid transparent;
}
.u-tag.is-read { background: rgba(var(--accent-1-rgb), 0.14); color: var(--accent-1); border-color: rgba(var(--accent-1-rgb), 0.3); }
.u-tag.is-decl { background: var(--navbar-highlight); color: var(--text-muted); border-color: var(--border-strong); }
/* Amber and red carry on the dark surface but wash out on the light one, so
each gets a deeper value per theme. Defaults below are the dark values;
the light overrides follow, covering both auto and forced light. */
.u-tag.is-write,
.u-tag.is-warn { background: rgba(246, 193, 119, 0.16); color: #F6C177; border-color: rgba(246, 193, 119, 0.35); }
.u-tag.is-bad { background: rgba(248, 113, 113, 0.14); color: #FCA5A5; border-color: rgba(248, 113, 113, 0.35); }
@media (prefers-color-scheme: light) {
:root:not([data-theme="dark"]) .u-tag.is-write,
:root:not([data-theme="dark"]) .u-tag.is-warn { color: #92610F; }
:root:not([data-theme="dark"]) .u-tag.is-bad { color: #B3312B; }
}
:root[data-theme="light"] .u-tag.is-write,
:root[data-theme="light"] .u-tag.is-warn { color: #92610F; }
:root[data-theme="light"] .u-tag.is-bad { color: #B3312B; }
.u-check-foot {
display: flex;
align-items: center;
gap: 0.5rem;
margin-top: 0.9rem;
padding-top: 0.9rem;
border-top: 1px solid var(--border);
font-size: 0.8125rem;
color: var(--text-muted);
}
.u-check-ok {
width: 8px;
height: 8px;
border-radius: 50%;
background: var(--accent-2);
box-shadow: 0 0 0 3px rgba(var(--accent-2-rgb), 0.18);
flex-shrink: 0;
}
/* Complexity bars */
.u-bars { display: flex; flex-direction: column; gap: 0.85rem; }
.u-bars li { display: flex; align-items: center; gap: 0.85rem; }
.u-bar-label {
flex: 0 0 82px;
font-family: var(--font-mono);
font-size: 0.8125rem;
color: var(--text-muted);
}
.u-bar {
flex: 1;
height: 8px;
border-radius: var(--radius-full);
background: var(--navbar-highlight);
overflow: hidden;
}
.u-bar i {
display: block;
height: 100%;
width: var(--w);
border-radius: inherit;
background: linear-gradient(90deg, rgba(248, 113, 113, 0.65), #F87171);
}
.u-bar.is-ok i { background: linear-gradient(90deg, rgba(var(--accent-2-rgb), 0.55), var(--accent-2)); }
.u-bars b {
flex: 0 0 28px;
text-align: right;
font-family: var(--font-mono);
font-size: 0.8125rem;
}
/* -----------------------------------------------------------------------
5. Breakpoints
Monitor (≥1440) · laptop (1024–1439) · tablet (640–1023) · mobile (<640).
Container width and section padding come from the token layer; these rules
only restructure the hero composition.
----------------------------------------------------------------------- */
/* Side by side (laptop and up) — the Onboard hero's split: two even columns
with a 1.75rem gap, the panel filling its column. The video column is also
capped by viewport height so the whole panel and its pause control stay
above the fold on a 1366x768 laptop; when that cap bites, the column itself
narrows and the copy takes the width, so no empty gutter opens up beside
the panel. The cap is the panel height budget (100vh - 310px) turned back
into a width: minus the 42px of padding and border, x1.0385 (1080/1040),
plus the 42px again. The 380px floor keeps a short window from shrinking
it to a thumbnail. */
@media (min-width: 1024px) {
/* Brand, section links and the trial action read as one centred cluster
rather than two groups pinned to opposite edges. Only at this width:
below it the links collapse into the hamburger, and centring a bare
wordmark next to a menu button would put both in the middle of an
otherwise empty bar. */
.u-nav-inner { justify-content: center; gap: 1.75rem; }
.u-hero-split {
grid-template-columns: minmax(0, 1fr) min(calc(50% - 0.875rem), max(380px, calc((100vh - 352px) * 1.0385 + 42px)));
column-gap: 1.75rem;
}
}
/* Tablet and below — stack: headline, product tour, then the buttons. The product nav
trades its inline section links for the hamburger panel at the same width
the sitewide bar gives up its own links. */
@media (max-width: 1023px) {
.u-hero-split {
grid-template-columns: 1fr;
grid-template-areas: "top" "video" "bottom";
row-gap: 2rem;
}
.u-hero-copy-bottom .u-hero-cta { margin-top: 0; }
/* Stacked, the panel would otherwise run the full column (778px on an
834 tablet, taller than most of the screen). 640px keeps it about the
size it has on a laptop, centered under the copy. */
.u-hero-media { max-width: 640px; margin-inline: auto; }
.u-hero-copy .lead { max-width: 60ch; }
.u-nav-links, .u-nav-divider, .u-nav-drop { display: none; }
.u-nav-menu { display: flex; }
/* Situation tabs turn from a left rail into a scrolling strip on top. */
/* minmax(0, 1fr): the bare 1fr here is what actually pinned the
situation selector's width -- the track could not shrink below its
content, so the tabs inside ran off a 320px screen however the tab
strip itself was sized. */
.u-problems { grid-template-columns: minmax(0, 1fr); }
.u-problem-tabs {
flex-direction: row;
flex-wrap: wrap; /* same reason as the views rail above */
gap: 0.4rem;
padding-bottom: 0.4rem;
}
.u-problem-tab {
flex: 0 1 auto;
border-left: none;
border-bottom: 2px solid var(--border);
border-radius: var(--radius-sm) var(--radius-sm) 0 0;
font-size: 0.875rem;
}
.u-problem-tab.is-active { border-left-color: transparent; border-bottom-color: var(--accent-1); }
.u-problem-panels { min-height: 0; padding: 1.75rem; }
.u-bughunter { grid-template-columns: 1fr; gap: 2rem; padding: 1.75rem; }
.u-faq-grid { grid-template-columns: 1fr; gap: 2.5rem; }
/* Views rail turns into a horizontal strip of buttons above the stage. */
.u-views { grid-template-columns: 1fr; }
.u-views-rail {
flex-direction: row;
/* Wrap rather than scroll. As a 165px-wide scrolling strip the six
buttons measured 1030px against a 778px box at tablet, so the last
one was cut off mid-word with nothing to show it could be scrolled.
Wrapping keeps every option visible at every width. */
flex-wrap: wrap;
gap: 0.5rem;
padding-bottom: 0.4rem;
}
.u-view-btn { flex: 0 1 auto; }
.u-view-btn-desc { display: none; }
/* Questions stack; the spine has nothing left to join, so it goes. */
.u-qa-list::before { display: none; }
.u-qa-list { gap: 3.5rem; }
.u-qa-item { grid-template-columns: 1fr; gap: 1.75rem; }
.u-qa-item:nth-child(even) .u-qa-copy,
.u-qa-item:nth-child(even) .u-qa-visual { order: 0; }
}
@media (max-width: 720px) {
.u-hero { padding-bottom: 1.5rem; }
.u-hero-cta .btn { flex: 1 1 100%; }
.u-hero-strip { margin-top: 3rem; }
.u-nav-inner { padding: 0.5rem 1.25rem; }
.u-nav-mobile { padding: 0.5rem 1.25rem 1.25rem; }
/* A phone bar fits the wordmark and one control. The trial action folds
into the panel below, where it becomes the full-width trial button. */
.u-nav-get-btn { display: none; }
.u-views-stage { padding: 1.25rem; min-height: 0; }
.u-problem-points { grid-template-columns: 1fr; }
.u-qa-visual { padding: 1.25rem; }
.u-bar-label { flex-basis: 68px; }
}
/* Mobile — the column is too narrow to reserve space for the longest
question without leaving a visible hole under the short ones, so show
only the active question and let the block size to it. The hero is short
enough here that the reflow reads as motion rather than as a jump. */
@media (max-width: 520px) {
/* Finding and location stop fitting on one line; the location drops
beneath, aligned to the text rather than to the severity dot. */
.u-bug-list li { flex-wrap: wrap; }
.u-bug-list em { margin-left: 0; width: 100%; padding-left: 1.4rem; }
}
/* Mobile — the panel runs the full column; a lighter frame gives the clip
back some of the width the 20px padding would take on a 334px screen. */
@media (max-width: 639px) {
.u-hero-media { padding: 12px; border-radius: 16px; }
.u-hero-video { border-radius: 9px; }
.u-hero-video-toggle { right: 20px; bottom: 20px; }
.u-hero-chapter-tip { display: none; }
}
@media (max-width: 620px) {
.u-hero-rotator { display: block; }
.u-hero-q { display: none; }
.u-hero-q.is-active { display: block; }
}
/* ---------------------------------------------------------------------------
Light-mode legibility and a tablet grid fix, kept at the end of the file so
they win over the rules they correct.
--------------------------------------------------------------------------- */
/* Both brand accents are mid-tones tuned for the dark surface. On the pale
light surface the green eyebrow measures about 1.7:1 and the blue one about
3.3:1 at 12px uppercase, which is well under the 4.5:1 that size needs.
Deepen both in light mode only; the dark theme is untouched. */
@media (prefers-color-scheme: light) {
:root:not([data-theme="dark"]) .u-page .eyebrow,
:root:not([data-theme="dark"]) .u-page .u-qa-num { color: #047857; }
:root:not([data-theme="dark"]) .u-page .u-vision-heading .eyebrow { color: #1D4ED8; }
}
:root[data-theme="light"] .u-page .eyebrow,
:root[data-theme="light"] .u-page .u-qa-num { color: #047857; }
:root[data-theme="light"] .u-page .u-vision-heading .eyebrow { color: #1D4ED8; }
/* Same story for the blue accent at small sizes in light mode: the active
view-button label and the "read" reference tag both land around 3.7:1. */
@media (prefers-color-scheme: light) {
:root:not([data-theme="dark"]) .u-page .u-view-btn.is-active .u-view-btn-name,
:root:not([data-theme="dark"]) .u-page .u-tag.is-read { color: #1D4ED8; }
}
:root[data-theme="light"] .u-page .u-view-btn.is-active .u-view-btn-name,
:root[data-theme="light"] .u-page .u-tag.is-read { color: #1D4ED8; }
/* Between 621 and 900px the sitewide .grid-3 drops to two columns, leaving the
third CodeCheck card alone on its row. It used to span both columns, which
read fine when it was the odd one out (a certification seal). Now all three
are the same kind of card -- badge, title, a line of copy, a link -- so a
double-width third breaks the set. It keeps one column's width and centres
on its own row instead. Below 621px the grid is a single column, so neither
rule applies there. */
@media (max-width: 900px) and (min-width: 621px) {
.u-compliance .grid-3 > :last-child {
grid-column: 1 / -1;
width: calc(50% - 0.75rem); /* one column, minus half the 1.5rem gap */
justify-self: center;
}
}
/* On a phone the wrapped rails came out ragged — 3 + 2 + 1 for the views and
1 + 2 + 1 + 1 for the situations. A fixed grid tidies both: two even
columns for the short diagram names, one full-width row per situation,
since those labels are sentences rather than words. */
@media (max-width: 620px) {
.u-views-rail {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.u-problem-tabs {
display: grid;
/* minmax(0, 1fr), not 1fr: a bare 1fr is minmax(auto, 1fr), so the track
could not shrink below the longest tab label's min-content width and
the strip ran 3px off a 320px screen. Same trap as .p-form-grid and
.p-doc. */
grid-template-columns: minmax(0, 1fr);
}
}
/* -----------------------------------------------------------------------
6. Pricing (#pricing) — copy left, quote form right
The pricing page builds the same thing out of css/pages.css, which this
page does not load. Rather than pull a second stylesheet down for one
section, the handful of layout rules it needs are restated here under
u-price-*; everything else (.field, .input, .textarea, .form-status,
.btn) already comes from style.css, so the controls are the same ones.
----------------------------------------------------------------------- */
.u-price-row {
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr);
gap: clamp(1.75rem, 4vw, 4rem);
align-items: start;
}
.u-price-copy h2 { margin: 0.35rem 0 1rem; }
.u-price-copy .lead { margin-bottom: 1.1rem; }
.u-price-points { list-style: none; margin: 1.25rem 0 0; padding: 0; display: grid; gap: 0.6rem; }
.u-price-points li {
position: relative;
padding-left: 1.5rem;
font-size: 0.9375rem;
color: var(--text-muted);
}
.u-price-points li::before {
content: "";
position: absolute; left: 0; top: 0.3em;
width: 0.95rem; height: 0.95rem;
background: var(--accent-1);
-webkit-mask: var(--u-price-tick) center / contain no-repeat;
mask: var(--u-price-tick) center / contain no-repeat;
}
:root {
--u-price-tick: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3.5 8.4l3 3 6-6.8' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}
/* The alternative route out of the section, between the two notes, so it
reads as the answer to "rather talk?" rather than a competing CTA. The
icon is sized explicitly: style.css has no .btn svg rule, so an unsized
inline SVG stretches to fill its line. */
.u-price-note { margin-top: 1rem; font-size: 0.8125rem; color: var(--text-muted); }
.u-price-alt { margin: 0.6rem 0 0.9rem; }
.u-price-alt .btn svg { width: 16px; height: 16px; flex-shrink: 0; }
.u-price-panel {
border: 1px solid var(--border);
border-radius: var(--radius-xl);
background: var(--card);
padding: clamp(1.75rem, 3vw, 2.5rem);
min-width: 0;
}
.u-price-form { display: grid; gap: 0; }
.u-price-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 1.25rem; }
.u-price-actions { margin-top: 0.75rem; }
/* Required and optional fields are split into labelled groups. A fieldset
carries an intrinsic min-width that would stop the grid inside it from
shrinking, hence min-width: 0. The legend is display:block rather than
floated: the rows below it are grid containers, and a grid container
establishes its own formatting context, so it is placed beside a float
instead of under it — which pushes every input off-screen. */
.u-price-group { border: 0; margin: 0; padding: 0; min-width: 0; }
.u-price-group + .u-price-group {
margin-top: 1.1rem;
padding-top: 1.1rem;
border-top: 1px solid var(--border);
}
.u-price-legend {
display: block;
width: 100%;
padding: 0;
margin: 0 0 0.75rem;
font-size: 0.6875rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.08em;
color: var(--text-muted);
}
/* Once it has gone through, only the confirmation stays. */
.u-price-form.is-sent > :not(.form-status) { display: none; }
.u-price-form.is-sent > .form-status { margin-top: 0; }
@media (max-width: 1023px) {
.u-price-row { grid-template-columns: minmax(0, 1fr); }
}
/* minmax(0,…), not 1fr: a bare 1fr floors the track at the widest item's
min-content width, and the country select's longest option is wider than
a 320px screen. .field and the select need min-width: 0 for the same
reason; both are set in style.css. */
@media (max-width: 639px) {
.u-price-grid { grid-template-columns: minmax(0, 1fr); }
}
/* -----------------------------------------------------------------------
7. Understand and AI (#ai) — four questions, each answered twice
A ledger rather than a feature list: the left column is the question a
developer actually has, and the two cells beside it are the same answer
from a general assistant and from Understand's own offline AI. The
general cell is deliberately the quieter of the two.
Below 860px the three columns become a stack per question and the
column headers are dropped, so each cell prints its own label from
data-label instead -- otherwise the stacked view loses which side it
is reading.
----------------------------------------------------------------------- */
.u-ai .section-heading { margin-bottom: clamp(2rem, 4vw, 3rem); }
.u-ai .section-heading .lead { max-width: 62ch; }
/* Two sentences, two lines: left to wrap, the second one drops its last
word onto a line of its own at most desktop widths. */
.u-ai .section-heading h2 .u-ai-line { display: block; }
.u-ai-ledger {
border: 1px solid var(--border);
border-radius: var(--radius-xl);
background: var(--card);
overflow: hidden;
}
.u-ai-head,
.u-ai-row {
display: grid;
grid-template-columns: minmax(0, 0.9fr) minmax(0, 1fr) minmax(0, 1fr);
gap: clamp(1rem, 2vw, 2rem);
padding: clamp(1.1rem, 2vw, 1.6rem) clamp(1.1rem, 2.2vw, 2rem);
}
.u-ai-head {
padding-block: 0.9rem;
border-bottom: 1px solid var(--border);
background: rgba(var(--surface-rgb), 0.5);
}
.u-ai-head span {
font-size: 0.6875rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.08em;
color: var(--text-muted);
}
.u-ai-col.is-und { color: var(--accent-1); }
.u-ai-row + .u-ai-row { border-top: 1px solid var(--border); }
.u-ai-q {
margin: 0;
font-size: 1rem;
line-height: 1.4;
color: var(--text-primary);
align-self: start;
}
.u-ai-cell { min-width: 0; }
.u-ai-cell p { margin: 0; font-size: 0.9rem; line-height: 1.55; color: var(--text-muted); }
.u-ai-cell.is-und p { color: var(--text-primary); }
.u-ai-tag {
display: inline-block;
margin-bottom: 0.45rem;
padding: 0.18rem 0.5rem;
border-radius: var(--radius-full);
font-family: var(--font-mono);
font-size: 0.6875rem;
letter-spacing: 0.02em;
border: 1px solid var(--border-strong);
color: var(--text-muted);
}
.u-ai-cell.is-und .u-ai-tag {
border-color: rgba(var(--accent-1-rgb), 0.4);
background: rgba(var(--accent-1-rgb), 0.1);
color: var(--accent-1);
}
.u-ai-close {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: space-between;
gap: 1.25rem;
margin-top: clamp(1.5rem, 3vw, 2.25rem);
}
.u-ai-close p { margin: 0; font-size: 1.0625rem; color: var(--text-muted); }
.u-ai-close strong { color: var(--text-primary); }
.u-ai-close-cta { display: flex; flex-wrap: wrap; gap: 0.75rem; }
.u-ai-close-cta .btn svg { width: 16px; height: 16px; flex-shrink: 0; }
/* On a narrow screen the three columns become a stack per question: the
question, then the two answers as labelled blocks. The column headers
carry no content once stacked, so they are dropped and each cell shows
its own label instead. */
@media (max-width: 860px) {
.u-ai-head { display: none; }
.u-ai-row { grid-template-columns: minmax(0, 1fr); gap: 0.9rem; }
.u-ai-cell { padding-left: 0.9rem; border-left: 2px solid var(--border-strong); }
.u-ai-cell.is-und { border-left-color: var(--accent-1); }
.u-ai-cell::before {
content: attr(data-label);
display: block;
margin-bottom: 0.3rem;
font-size: 0.6875rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.08em;
color: var(--text-muted);
}
.u-ai-cell.is-und::before { color: var(--accent-1); }
}
/* ---------------------------------------------------------------------------
Touch target sizes (added 2026-10-09)
On a 320px screen the audit found 503 non-inline links and buttons under
40px tall. These are the shared ones. 44px is the usual floor; where an
element's painted size is deliberate (the logo, the social circles) the
rule grows the hit area rather than the artwork, except where the artwork
IS the hit area and growing it is harmless.
Inline text links are left alone on purpose — the target-size guidance
exempts a link inside a run of text, and padding them out would break the
line spacing of the paragraphs they sit in.
--------------------------------------------------------------------------- */
@media (max-width: 860px) {
.u-nav-menu { min-height: 44px; min-width: 44px; }
.u-hero-chapter { min-height: 44px; }
.u-hero-video-toggle { min-height: 44px; min-width: 44px; }
}