/* =========================================================
Greydient Labs
1. Tokens 5. Stages / mock shell
2. Reset + type 6. ProofVue surface
3. Header 7. Trove surface
4. Hero + facts 8. Sections + footer 9. Responsive
========================================================= */
/* ---------- 1. Tokens ---------- */
:root{
--void:#08080A;
--panel:#0E0E11;
--panel-2:#121216;
--line:#202026;
--line-2:#2C2C34;
--cream:#ECEAE4;
--muted:#94948F;
--dim:#80808A;
--faint:#7A7A84;
--brand:linear-gradient(96deg,#F4F2ED,#C4C1B9 44%,#84848E);
--sans:"Archivo","Helvetica Neue",Helvetica,Arial,sans-serif;
--mono:"JetBrains Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
--serif:"Newsreader",Georgia,"Times New Roman",serif;
--wrap:1200px;
--gut:32px;
--rhythm:64px;
--ease:cubic-bezier(.2,.7,.2,1);
/* Mock scale, overridden at breakpoints. Raised once the shots stopped being
boxed: they can spill past the content column now, so they no longer have
to be shrunk to fit inside it. */
--s:.86;
/* matte ceramic grain */
--grain:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='170' height='170'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.82' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='170' height='170' filter='url(%23g)'/%3E%3C/svg%3E");
}
/* =========================================================
1b. Light variant (A/B)
Same content, same layout, inverted surface. The variant is
chosen once per visitor by the inline script in each
and stamped on . Only tokens change here:
anything that reads a token follows automatically.
The device mockups keep their dark hexes on purpose. They
depict dark applications, so inverting them would misrepresent
the products rather than restyle the page.
========================================================= */
:root[data-variant="light"]{
color-scheme:light;
--void:#F1F1EF; /* page */
--panel:#FFFFFF; /* raised cards */
--panel-2:#F7F7F5;
--line:#E2E2DD;
--line-2:#D2D2CC;
--cream:#141412; /* primary text */
--muted:#5C5C57;
--dim:#6B6B66;
/* 4.67:1 on the light page. #76766F measured 4.04 and failed AA on the small
mono notes, which are the only place this token carries real text. */
--faint:#6C6C66;
--brand:linear-gradient(96deg,#16161A,#3C3C3E 44%,#75757E);
}
/* Literals that were written against a dark page and cannot follow a token.
Everything token-driven inverts on its own; this is the remainder. */
:root[data-variant="light"] .head{
background:rgba(241,241,239,.64);
border-bottom-color:rgba(0,0,0,.08);
}
:root[data-variant="light"] .head.is-stuck{
background:rgba(241,241,239,.82);
border-bottom-color:rgba(0,0,0,.11);
}
:root[data-variant="light"] .head::after{
background:linear-gradient(90deg,transparent,rgba(20,20,18,.16),transparent);
}
/* The solid button takes its fill from --cream, which is now near-black, so
its label has to flip with it. */
:root[data-variant="light"] .btn--solid{color:#F4F4F2}
:root[data-variant="light"] .btn--solid:hover{background:#000}
:root[data-variant="light"] .nav a:hover,
:root[data-variant="light"] .nav-trigger:hover,
:root[data-variant="light"] .nav-menu.is-open .nav-trigger{background:rgba(20,20,18,.06)}
:root[data-variant="light"] .nav-card:hover{background:rgba(20,20,18,.05)}
/* The hero dot field and the section glow are light-on-dark by construction. */
:root[data-variant="light"] .hero-grid{
background-image:radial-gradient(circle at 1px 1px,rgba(20,20,18,.16) 1px,transparent 0);
}
/* Form fields carried a hardcoded near-black fill while their text follows
--cream, so in the light variant they rendered black on black: measured
1.00:1, completely unreadable. */
/* background-COLOR, not the background shorthand. The shorthand resets
background-image, and the select's dropdown arrow is a background-image:
two gradients drawn as a triangle. Using it here erased the arrow. */
:root[data-variant="light"] .field-i,
:root[data-variant="light"] select.field-i option{background-color:#FFFFFF}
:root[data-variant="light"] .field-i:hover{border-color:#B9B9B2}
:root[data-variant="light"] .field-i:focus{background-color:#FFFFFF;border-color:var(--cream)}
:root[data-variant="light"] .field-i[aria-invalid="true"]{border-color:#8A2B2B}
/* Both of these are hidden until opened, so they render dark-on-dark in the
light variant and a contrast pass over the page as loaded never sees them.
The companies dropdown and the mobile nav drawer. */
:root[data-variant="light"] .nav-panel{
background:rgba(255,255,255,.95);
box-shadow:0 24px 60px rgba(18,18,22,.16),0 2px 10px rgba(18,18,22,.08);
}
:root[data-variant="light"] .nav-card-mark{background:#F3F3F1}
/* The ProofVue mark is two overlapping checks: a grey one behind and a white
one in front. On a light page the front check disappears and the logo reads
as half of itself. Matched on the viewBox so every instance on every page is
covered by one pair of rules; CSS beats the inline stroke attribute. */
:root[data-variant="light"] svg[viewBox="0 0 96 72"] path:first-of-type{stroke:#A8A8A3}
:root[data-variant="light"] svg[viewBox="0 0 96 72"] path:last-of-type{stroke:#141412}
@media (max-width:860px){
:root[data-variant="light"] .nav{background:rgba(241,241,239,.98)}
}
/* The error rose reads on a dark page and drops to 2.33:1 on a light one. */
:root[data-variant="light"] .form-status[data-state="err"]{color:#8C2F2F}
/* The product shot's shadow was tuned against a near-black page. At .8 it
reads as a smudge on light grey, so it is lightened and spread instead. */
:root[data-variant="light"] .mock,
:root[data-variant="light"] .mock--tv{
filter:drop-shadow(0 34px 60px rgba(18,18,22,.26)) drop-shadow(0 6px 14px rgba(18,18,22,.10));
}
/* ---------- 2. Reset + type ---------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
margin:0;
background:var(--void);
color:var(--cream);
font-family:var(--sans);
font-size:16px;
line-height:1.6;
font-synthesis-weight:none;
-webkit-font-smoothing:antialiased;
overflow-x:hidden;
}
img,svg{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
h1,h2,h3,h4,p,dl,dd,ol,ul{margin:0}
ul{padding:0;list-style:none}
button{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer}
:where(a,button,[tabindex]):focus-visible{
outline:2px solid var(--cream);
outline-offset:3px;
border-radius:3px;
}
.wrap{width:100%;max-width:var(--wrap);margin-inline:auto;padding-inline:var(--gut)}
.skip{
position:absolute;left:-9999px;top:0;z-index:99;
background:var(--cream);color:var(--void);
padding:12px 18px;font-family:var(--mono);font-size:12px;
}
.skip:focus{left:12px;top:12px}
/* The tagline is the dominant element on the page, so it is sized like one.
The old 78px cap read as a large paragraph rather than a statement. The
vw term carries most of the range; the cap only stops it running away on a
very wide monitor. Wrapping is judged by measuring all six variants rather
than by picking a number, and text-wrap:balance keeps the two lines even. */
.h1{
font-size:clamp(40px,10.4vw,148px);
line-height:1.02;
letter-spacing:-.035em;
font-weight:600;
font-variation-settings:"wdth" 91,"wght" 600;
margin:0;
text-wrap:balance;
}
.h1 em{
font-style:normal;
background:var(--brand);
-webkit-background-clip:text;
background-clip:text;
color:transparent;
}
.h2{
font-size:clamp(28px,3.6vw,46px);
line-height:1.06;
letter-spacing:-.03em;
font-weight:600;
font-variation-settings:"wdth" 91,"wght" 600;
color:var(--cream);
text-wrap:balance;
}
/* ---------- 3. Header ---------- */
.head{
--navh:58px;
position:sticky;top:0;z-index:60;
background:rgba(9,9,12,.55);
backdrop-filter:saturate(180%) blur(20px);
-webkit-backdrop-filter:saturate(180%) blur(20px);
border-bottom:1px solid rgba(255,255,255,.045);
transition:background .35s var(--ease),border-color .35s var(--ease);
}
.head::after{
content:"";position:absolute;left:0;right:0;bottom:-1px;height:1px;
background:linear-gradient(90deg,transparent,rgba(236,234,228,.14),transparent);
opacity:0;transition:opacity .35s var(--ease);
}
.head.is-stuck{--navh:50px;background:rgba(9,9,12,.74);border-bottom-color:rgba(255,255,255,.07)}
.head.is-stuck::after{opacity:1}
.head-in{
display:flex;align-items:center;gap:24px;
height:var(--navh);transition:height .35s var(--ease);
}
.mark{display:inline-flex;align-items:center;gap:0;flex:0 0 auto}
.mark-name{
font-size:13.5px;font-weight:600;letter-spacing:-.015em;
font-variation-settings:"wdth" 93,"wght" 600;
color:var(--cream);
}
.nav{display:flex;gap:4px;margin-left:auto}
.nav a{
position:relative;
font-family:var(--mono);font-size:11.5px;letter-spacing:-.01em;
color:var(--muted);padding:7px 12px;border-radius:8px;
transition:color .2s var(--ease),background .2s var(--ease);
}
.nav a:hover{color:var(--cream);background:rgba(236,234,228,.055)}
.nav a.is-on{color:var(--cream)}
.nav a.is-on::after{
content:"";position:absolute;left:12px;right:12px;bottom:2px;height:1px;
background:var(--cream);opacity:.5;
}
.head-end{display:flex;align-items:center;gap:10px;margin-left:6px}
.btn{
display:inline-flex;align-items:center;justify-content:center;
font-family:var(--mono);font-size:12.5px;letter-spacing:.01em;
height:38px;padding:0 18px;border-radius:6px;
border:1px solid transparent;
transition:background .2s var(--ease),border-color .2s var(--ease),color .2s var(--ease),transform .2s var(--ease);
white-space:nowrap;
}
.btn--solid{background:var(--cream);color:#0A0A0C}
.btn--solid:hover{background:#fff}
.btn--solid{height:46px;padding:0 24px;font-size:13px}
.menu{display:none;width:32px;height:32px;border:1px solid var(--line-2);border-radius:999px;align-items:center;justify-content:center;flex-direction:column;gap:4px}
.menu span{display:block;width:14px;height:1px;background:var(--cream);transition:transform .25s var(--ease),opacity .25s var(--ease)}
.menu[aria-expanded="true"] span:first-child{transform:translateY(2.5px) rotate(45deg)}
.menu[aria-expanded="true"] span:last-child{transform:translateY(-2.5px) rotate(-45deg)}
/* ---------- 4. Hero + facts ---------- */
.hero{position:relative;overflow:hidden;padding:64px 0 16px}
.hero-grid{
position:absolute;inset:-1px 0 0;
background-image:radial-gradient(circle at 1px 1px,rgba(236,234,228,.20) 1px,transparent 0);
background-size:27px 27px;
-webkit-mask-image:radial-gradient(ellipse 76% 64% at 50% 30%,#000 0%,rgba(0,0,0,.5) 44%,transparent 78%);
mask-image:radial-gradient(ellipse 76% 64% at 50% 30%,#000 0%,rgba(0,0,0,.5) 44%,transparent 78%);
pointer-events:none;
}
.hero-grid{animation:gridDrift 26s linear infinite}
.hero-in{position:relative;z-index:1}
.h1{margin-top:0;max-width:15ch}
.facts{border-block:1px solid var(--line);background:var(--panel)}
.facts-row{display:grid;grid-template-columns:repeat(4,1fr)}
.fact{padding:30px 28px 32px;border-left:1px solid var(--line)}
.fact:first-child{border-left:0;padding-left:0}
.fact dt{
font-family:var(--mono);font-size:10.5px;letter-spacing:.16em;
text-transform:uppercase;color:var(--dim);
}
.fact dd{
margin-top:12px;font-size:19px;letter-spacing:-.02em;color:var(--cream);
font-variation-settings:"wdth" 94,"wght" 500;
font-variant-numeric:tabular-nums;
}
/* ---------- 5. Sections, stages, mock shell ---------- */
.sec{padding:var(--rhythm) 0 0}
.sec--last{padding-bottom:var(--rhythm)}
.stage{
position:relative;
margin-top:38px;
display:grid;grid-template-columns:.86fr 1.14fr;align-items:center;
/* No panel, no border, no clip. The product shot is tilted and 900px wide,
so a card cropped it at its own edge; unboxed it reads as pasted onto the
page, carried by the drop shadow it already has.
The shot now spills past the 1200px content column, which pushed the page
to 1363px wide at a 1280px viewport and gave it a horizontal scrollbar.
`overflow-x:clip` here contains that: unlike `hidden` it creates no scroll
container, so the sticky header still sticks, and the clip lands at the
full-width section edge rather than at the column edge, which is past the
shot at every width measured. */
isolation:isolate;
}
.sec:has(> .wrap > .stage){overflow-x:clip}
.stage-copy{position:relative;z-index:2;padding:46px 44px 46px 56px;max-width:640px}
.lockup{display:flex;align-items:center;gap:12px;margin-top:14px}
.lockup-mark{width:34px;height:26px;flex:0 0 auto}
.lockup-mark--tv{width:27px;height:27px}
.lockup-name{
font-size:27px;letter-spacing:-.03em;font-weight:600;
font-variation-settings:"wdth" 94,"wght" 600;color:var(--cream);
}
.stage-lede{margin-top:18px;color:var(--muted);font-size:15.5px;line-height:1.62}
.stage-lede + .stage-lede{margin-top:13px}
.spec{margin-top:26px;border-top:1px solid var(--line)}
.spec-row{
display:flex;justify-content:space-between;gap:20px;
padding:11px 0;border-bottom:1px solid var(--line);
font-family:var(--mono);font-size:11.5px;letter-spacing:.02em;
}
.spec-row dt{color:var(--dim);text-transform:uppercase;letter-spacing:.13em;font-size:10.5px}
.spec-row dd{color:var(--cream);font-variant-numeric:tabular-nums}
.stage-art{
position:relative;z-index:1;
perspective:1900px;
display:flex;align-items:center;justify-content:center;
min-height:0;padding:48px 0;
}
.stage--a .float{margin-left:9%}
.stage--b .float{margin-right:9%}
.float{
transform-style:preserve-3d;
animation:bob 11s ease-in-out infinite;
will-change:transform;
}
@keyframes bob{0%,100%{transform:translateY(-9px)}50%{transform:translateY(9px)}}
/* These panels are dark in BOTH site variants: their fills are literal, not
tokens. Any rule inside them that reached for a theme token broke in the
light variant, where --cream resolves to near-black. The selected typeface
name measured 1.00:1 against its own row and the schools figure 1.07:1.
Re-declaring the tokens here with their exact dark-variant values keeps
every descendant rule working as written and leaves dark untouched. */
.mock,.pv,.tv,.surface,.rd,.edu{
/* True black canvas, founder request 2026-09-11. Scoped to the product mockup
wrappers only: the marketing :root above keeps #08080A. The layers below stay
differentiated so cards, borders and focus rings still read against it. */
--void:#000000;
--panel:#0E0E11;
--panel-2:#121216;
--line:#202026;
--line-2:#2C2C34;
--cream:#ECEAE4;
--muted:#94948F;
--dim:#80808A;
--faint:#7A7A84;
}
.mock{
position:relative;
width:900px;flex:0 0 900px;
transform-origin:50% 50%;
transform:var(--t);
transition:transform .8s var(--ease);
/* Two tight layers rather than one 80px blur at .8, which on a near-black
page spread into a smudge instead of lifting the shot off it. */
filter:drop-shadow(0 26px 44px rgba(0,0,0,.55)) drop-shadow(0 5px 12px rgba(0,0,0,.45));
}
/* The diagonal white sheen is gone. At rgba(255,255,255,.085) over a true black
canvas it rendered charcoal, so the computed background read #000000 while the
visible surface did not. The Trove mock had already disabled it for this exact
reason; removing it for both is what makes the canvas actually read jet black. */
/* ---------- third company ---------- */
.third{
margin-top:20px;
border:1px dashed var(--line-2);
border-radius:22px;
padding:30px 40px;
display:flex;align-items:center;gap:34px;flex-wrap:wrap;
}
.third-blanks{display:flex;align-items:center;gap:9px;flex:0 0 auto}
.blank{display:block;height:22px;border-radius:5px;background:var(--line-2)}
.blank--a{width:24px}
.blank--b{width:106px}
.third-copy{color:var(--muted);font-size:16px;max-width:48ch}
.third-tag{
margin-left:auto;font-family:var(--mono);font-size:10.5px;
letter-spacing:.2em;text-transform:uppercase;color:var(--dim);
}
/* ---------- 8a. Columns / prose / cards ---------- */
.cols{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));margin-top:32px;border-top:1px solid var(--line)}
.col{padding:24px 24px 6px;border-left:1px solid var(--line)}
.col:first-child{border-left:0}
.col-h{
font-size:21px;letter-spacing:-.025em;font-weight:600;
font-variation-settings:"wdth" 92,"wght" 600;color:var(--cream);
}
.col-p{margin-top:14px;color:var(--muted);font-size:15.5px;line-height:1.66}
.col-list{margin-top:22px;border-top:1px solid var(--line)}
.col-list li{
padding:9px 0;border-bottom:1px solid var(--line);
font-family:var(--mono);font-size:11.5px;color:var(--dim);
}
.prose{margin-top:20px;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px;max-width:960px}
.prose p{color:var(--muted);font-size:16.5px;line-height:1.68}
.cards{display:grid;grid-template-columns:repeat(2,1fr);gap:20px;margin-top:48px}
.card{border:1px solid var(--line);border-radius:18px;background:var(--panel);padding:34px 32px 30px}
.card-h{font-size:19px;letter-spacing:-.02em;font-weight:600;font-variation-settings:"wdth" 92,"wght" 600}
.card-p{margin-top:14px;color:var(--muted);font-size:15.5px;line-height:1.65}
.card-link{
display:inline-block;margin-top:24px;
font-family:var(--mono);font-size:13px;color:var(--cream);
border-bottom:1px solid var(--line-2);padding-bottom:3px;
transition:border-color .2s var(--ease);
}
.card-link:hover{border-bottom-color:var(--cream)}
/* ---------- 8b. Footer ---------- */
.foot{border-top:1px solid var(--line);background:var(--panel)}
.foot-in{display:flex;align-items:center;gap:28px;flex-wrap:wrap;padding-block:34px}
.foot-nav{display:flex;gap:24px;margin-left:auto}
/* WCAG 2.2 target size: these sit in a nav, not inline in a sentence, so the
24px minimum applies and 19px did not meet it. */
.foot-nav a{font-family:var(--mono);font-size:12px;color:var(--dim);
transition:color .2s var(--ease);display:inline-flex;align-items:center;min-height:24px}
.foot-nav a:hover{color:var(--cream)}
.foot-c{font-family:var(--mono);font-size:11.5px;color:var(--dim);margin-left:auto}
/* =========================================================
6. ProofVue surface: graphite and white only.
Status is carried by fill vs outline vs dashed. No hue.
========================================================= */
.mock--pv{
border-radius:12px;
border:1px solid #24242A;
background:#000000;
overflow:hidden;
}
.pv{
display:grid;
grid-template-columns:168px minmax(0,1fr) 196px;
height:562px;
font-family:var(--sans);
font-size:12px;line-height:1.45;color:#F2F2F1;
font-variant-numeric:tabular-nums;
letter-spacing:-.005em;
}
.pv b,.pv i,.pv em,.pv kbd{font-style:normal;font-weight:inherit}
/* sidebar */
.pv-side{
border-right:1px solid #1C1C21;background:#000000;
display:flex;flex-direction:column;padding:14px 12px 12px;
}
.pv-brand{display:flex;align-items:center;gap:8px;padding:2px 4px 16px}
.pv-brand svg{width:22px;height:17px}
.pv-brand b{font-size:13.5px;font-weight:600;letter-spacing:-.03em}
.pv-nav{display:flex;flex-direction:column;gap:1px}
.pv-item{
display:flex;align-items:center;justify-content:space-between;
height:26px;padding:0 9px;border-radius:6px;color:#8E8E95;font-size:11.5px;
}
.pv-item em{font-family:var(--mono);font-size:10px;color:#5A5A62}
.pv-item.is-on{background:#1B1B20;color:#F2F2F1;box-shadow:inset 0 0 0 1px #26262C}
.pv-item.is-on em{color:#C9C9CB}
.pv-rule{display:block;height:1px;background:#1C1C21;margin:10px 9px}
.pv-org{
margin-top:auto;display:flex;align-items:center;gap:8px;
border-top:1px solid #1C1C21;padding-top:11px;
}
.pv-orgdot{
width:22px;height:22px;border-radius:6px;background:#26262C;
display:grid;place-items:center;font-size:10.5px;color:#D6D6D4;font-weight:600;
}
.pv-orgtxt{display:flex;flex-direction:column;line-height:1.25}
.pv-orgtxt b{font-size:11px;font-weight:600}
.pv-orgtxt i{font-family:var(--mono);font-size:9px;color:#5A5A62}
/* main */
.pv-main{display:flex;flex-direction:column;min-width:0}
.pv-top{
display:flex;align-items:center;gap:12px;
height:46px;padding:0 16px;border-bottom:1px solid #1C1C21;
}
.pv-crumb{display:flex;align-items:center;gap:7px;font-size:11.5px;flex:0 0 auto}
.pv-crumb i{color:#71717A}
.pv-crumb span{color:#3E3E45}
.pv-crumb b{font-weight:500;color:#F2F2F1}
.pv-search{
margin-left:14px;flex:1 1 auto;min-width:0;
display:flex;align-items:center;gap:8px;
height:26px;padding:0 8px 0 10px;border-radius:7px;
border:1px solid #212127;background:#111114;
}
.pv-search i{flex:1;color:#5A5A62;font-size:11px;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
.pv-search kbd{
font-family:var(--mono);font-size:9px;color:#7C7C84;
border:1px solid #26262C;border-radius:4px;padding:1px 4px;
}
.pv-people{display:flex;flex:0 0 auto}
.pv-av{
width:21px;height:21px;border-radius:999px;margin-left:-6px;
background:#2A2A31;border:1.5px solid #0B0B0D;
display:grid;place-items:center;
font-family:var(--mono);font-size:8px;color:#C6C6C8;
}
.pv-av:first-child{margin-left:0}
.pv-av--more{background:#141418;color:#7C7C84}
.pv-cta{
flex:0 0 auto;height:26px;padding:0 12px;border-radius:7px;
background:#EDEDEA;color:#0B0B0D;font-size:11px;font-weight:600;
display:grid;place-items:center;
}
.pv-bar{display:flex;align-items:center;gap:8px;padding:11px 16px;border-bottom:1px solid #1C1C21}
.pv-seg{
display:flex;gap:2px;padding:2px;border-radius:8px;
border:1px solid #212127;background:#101013;flex:0 0 auto;
}
.pv-seg b,.pv-seg i{
padding:3px 10px;border-radius:6px;font-size:10.5px;color:#7C7C84;
}
.pv-seg b{background:#26262C;color:#F2F2F1;font-weight:500}
/* nowrap is load-bearing: the chip is a fixed 22px grid cell, so a label that
wraps to two lines spills straight through the pill's own border. */
.pv-chip{
height:22px;padding:0 9px;border-radius:999px;border:1px solid #26262C;
display:grid;place-items:center;white-space:nowrap;
font-family:var(--mono);font-size:9.5px;color:#8E8E95;
}
.pv-chip--dash{border-style:dashed;color:#64646B}
.pv-tally{margin-left:auto;white-space:nowrap;font-family:var(--mono);font-size:9.5px;color:#5A5A62}
.pv-kpis{display:grid;grid-template-columns:repeat(4,1fr);border-bottom:1px solid #1C1C21}
.pv-kpi{padding:13px 16px;border-left:1px solid #1C1C21;display:flex;flex-direction:column;gap:3px}
.pv-kpi:first-child{border-left:0}
.pv-kpi i{font-family:var(--mono);font-size:9px;letter-spacing:.11em;text-transform:uppercase;color:#5A5A62}
.pv-kpi b{font-size:21px;font-weight:600;letter-spacing:-.035em;line-height:1.1}
.pv-kpi em{font-family:var(--mono);font-size:9px;color:#4C4C54}
/* table */
.pv-table{flex:1;min-height:0;overflow:hidden}
/* Every track except the supplier name is a fixed width, and the supplier is
minmax(0,1fr) rather than a bare fr. A bare `fr` floors at min-content, so a
long cell widened its own column in its own row only: seven rows resolved
FIVE different templates and nothing lined up down the table. Widths are
measured from the content, not guessed: source 89 ("Customs manifest"),
reviewer 64 ("M. Halvorsen"), widest state pill 70. 502px usable at 8px
gaps leaves the supplier 104px, which it already ellipsised into. */
.pv-tr{
display:grid;
grid-template-columns:minmax(0,1fr) 92px 40px 84px 68px 74px;
align-items:center;gap:8px;
padding:0 16px;height:52px;border-bottom:1px solid #16161A;
}
.pv-tr--h{
height:28px;border-bottom:1px solid #1C1C21;background:#0E0E11;
font-family:var(--mono);font-size:9px;letter-spacing:.12em;
text-transform:uppercase;color:#4C4C54;
}
.pv-tr .c-item{display:flex;flex-direction:column;gap:2px;min-width:0}
.pv-tr .c-item b{font-size:12px;font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pv-tr .c-item i{font-family:var(--mono);font-size:9px;color:#55555D}
.pv-tr .c-src,.pv-tr .c-rev{
font-size:11px;color:#8E8E95;
white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.pv-tr .c-conf{display:flex;align-items:center;gap:8px}
.pv-tr .c-ck,.pv-tr .c-state{justify-self:start}
.pv-tr .c-conf em{font-family:var(--mono);font-size:10px;color:#B4B4B6}
.meter{display:block;width:54px;height:4px;border-radius:2px;background:#232329;overflow:hidden}
.meter>span{display:block;height:100%;background:#E4E4E1;border-radius:2px}
/* the double check, drawn per row at different tonal weights */
/* The verification mark is ProofVue's own logo, not a shape drawn in CSS.
These used to be two rotated border corners, which at 13x7 read as angular
hooks rather than checks and matched no mark the company actually uses.
Two states, as briefed: the grey check alone once a claim is verified, and
the full two-check logo once it is fully verified. Nothing is verified in
the "no match" row, so it carries no check at all; the State column already
says so. Paths, stroke and colours are the logo's own, unaltered, and both
states share a viewBox so the grey check sits in the same place and the
white one simply appears beside it. */
.ck{
display:block;width:20px;height:15px;
background-repeat:no-repeat;background-position:left center;background-size:contain;
}
.ck--full{background-image:url("data:image/svg+xml,")}
.ck--half,.ck--low{background-image:url("data:image/svg+xml,")}
.ck--none{background-image:none}
.st{
display:inline-grid;place-items:center;height:20px;padding:0 9px;border-radius:999px;
font-family:var(--mono);font-size:9.5px;letter-spacing:.01em;white-space:nowrap;
}
.st--fill{background:#EDEDEA;color:#0B0B0D}
.st--line{border:1px solid #3A3A42;color:#C4C4C6}
.st--dash{border:1px dashed #33333A;color:#6E6E76}
/* rail */
.pv-rail{border-left:1px solid #1C1C21;background:#000000;padding:14px 14px 12px;display:flex;flex-direction:column}
.pv-railhead{
display:flex;justify-content:space-between;align-items:baseline;
font-family:var(--mono);font-size:9px;letter-spacing:.12em;
text-transform:uppercase;color:#5A5A62;padding-bottom:12px;
}
.pv-railhead span{color:#3E3E45;letter-spacing:.04em}
.pv-trail{margin:0;padding:0;list-style:none}
.pv-trail li{position:relative;padding:0 0 15px 16px;border-left:1px dotted #2E2E36;margin-left:3px}
.pv-trail li:last-child{border-left-color:transparent;padding-bottom:6px}
.pv-trail li::before{
content:"";position:absolute;left:-3.5px;top:4px;
width:6px;height:6px;border-radius:999px;background:#0D0D10;
box-shadow:inset 0 0 0 1.5px #6E6E76;
}
.pv-trail li:first-child::before{background:#EDEDEA;box-shadow:none}
.pv-trail b{display:block;font-size:10.5px;font-weight:500;color:#DEDEDC;line-height:1.3}
.pv-trail i{display:block;font-family:var(--mono);font-size:9px;color:#4C4C54;margin-top:2px}
.pv-verdict{
margin-top:auto;border:1px solid #26262C;border-radius:9px;padding:11px 12px;
display:flex;flex-direction:column;gap:3px;background:#111114;
}
.pv-verdict i{font-family:var(--mono);font-size:8.5px;letter-spacing:.12em;text-transform:uppercase;color:#4C4C54}
.pv-verdict b{font-size:12.5px;font-weight:600;letter-spacing:-.02em}
.pv-verdict em{font-family:var(--mono);font-size:9px;color:#5A5A62}
/* =========================================================
7. Trove surface: dark ceramic shell against warm paper
========================================================= */
.mock--tv{width:900px;flex:0 0 900px;filter:drop-shadow(0 26px 44px rgba(0,0,0,.55)) drop-shadow(0 5px 12px rgba(0,0,0,.45))}
.tv{
position:relative;width:900px;height:604px;
font-family:var(--sans);font-size:12px;line-height:1.45;
font-variant-numeric:tabular-nums;letter-spacing:-.005em;
}
/* ---- library panel (behind) ---- */
/* Height fills .tv (604) rather than stopping at 522. At 522 the card's
bottom border ran straight behind the phone at 79% of the phone's height,
which is the "line through the reading text" that three earlier passes
chased inside the phone and never found: it was never in the phone. A 1px
#26262B hairline on a #000 card against a #08080A page is bright and hard,
and the eye carries it across the phone from both sides. Any overlap of
this edge redraws that line, so the phone must stay inside the card. */
.tv-lib{
position:absolute;right:0;top:0;width:822px;height:604px;
display:grid;grid-template-columns:150px minmax(0,1fr) 174px;
background:#000;color:#F2F2F3;
border:1px solid #26262B;border-radius:13px;overflow:hidden;
}
/* The grain is off the library canvas. At opacity .07 it lifted a true black
ground to about rgb(6,6,6): no pixel in the canvas rendered pure black, while
ProofVue's did, so the two products did not match. Grain stays on the book
covers and the highlight card, which are artwork rather than canvas. */
/* No sheen over the dark shell. A diagonal light sweep across near-black reads
as a smudge rather than as light, which is the opposite of satin. */
.tv b,.tv i,.tv em,.tv kbd{font-style:normal;font-weight:inherit}
.tv-side{
border-right:1px solid #26262B;background:#000000;
padding:13px 11px 11px;display:flex;flex-direction:column;
}
.tv-brand{display:flex;align-items:center;gap:8px;padding:2px 4px 15px}
.tv-brand svg{width:17px;height:17px}
.tv-brand b{font-size:13px;font-weight:600;letter-spacing:-.03em}
.tv-nav{display:flex;flex-direction:column;gap:1px}
.tv-item{
display:flex;align-items:center;justify-content:space-between;
height:25px;padding:0 9px;border-radius:6px;color:#A1A1AA;font-size:11px;
}
.tv-item em{font-family:var(--mono);font-size:9.5px;color:#767680}
.tv-item.is-on{background:#1B1B20;color:#F2F2F3;box-shadow:inset 0 0 0 1px #26262B}
.tv-item.is-on em{color:#EDEDEF}
.tv-rule{display:block;height:1px;background:#26262B;margin:9px 9px}
.tv-plan{
margin-top:auto;border-top:1px solid #26262B;padding-top:10px;
display:flex;flex-direction:column;gap:2px;
}
.tv-plan b{font-size:10.5px;font-weight:600;color:#F2F2F3}
.tv-plan i{font-family:var(--mono);font-size:8.5px;color:#767680}
.tv-main{display:flex;flex-direction:column;min-width:0;padding:0 16px}
.tv-top{display:flex;align-items:center;gap:12px;height:48px;border-bottom:1px solid #26262B}
.tv-title{display:flex;flex-direction:column;line-height:1.2}
.tv-title i{font-family:var(--mono);font-size:8.5px;letter-spacing:.14em;text-transform:uppercase;color:#767680}
.tv-title b{font-size:15px;font-weight:600;letter-spacing:-.03em;margin-top:3px}
.tv-search{
margin-left:auto;display:flex;align-items:center;gap:8px;
width:184px;height:25px;padding:0 7px 0 10px;border-radius:7px;
border:1px solid #26262B;background:#16161A;
}
.tv-search i{flex:1;font-size:10.5px;color:#767680}
.tv-search kbd{font-family:var(--mono);font-size:8.5px;color:#A1A1AA;border:1px solid #303036;border-radius:4px;padding:1px 4px}
.tv-chips{display:flex;gap:6px;padding:12px 0 14px}
.tv-chip{
height:21px;padding:0 10px;border-radius:999px;border:1px solid #26262B;
display:grid;place-items:center;font-family:var(--mono);font-size:9px;color:#767680;
}
.tv-chip.is-on{background:#1B1B20;border-color:#303036;color:#F2F2F3}
.tv-shelf{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}
.tv-book{display:flex;flex-direction:column;gap:7px;min-width:0}
.tv-cover{
position:relative;aspect-ratio:2/3;border-radius:4px;
border:1px solid rgba(201,169,97,.28);
padding:11px 10px;display:flex;flex-direction:column;justify-content:space-between;
overflow:hidden;
}
.tv-cover::after{content:"";position:absolute;inset:0;background-image:var(--grain);opacity:.09;pointer-events:none}
.tv-cover--1{background:#1B1B20}
.tv-cover--2{background:#16161A}
.tv-cover--3{background:#1F1F24}
.tv-cover--4{background:#141418}
.tv-cover--5{background:#16232B}
.tv-cover--6{background:#1B1A1E}
.tv-cover--7{background:#2A2F3A}
.tv-cover--8{background:#1A1815}
.tv-ct{
font-family:var(--serif);font-size:14px;line-height:1.16;
letter-spacing:-.01em;color:#F2F2F3;
}
.tv-ca{font-family:var(--mono);font-size:7.5px;letter-spacing:.08em;text-transform:uppercase;color:#767680}
.tv-bar{display:block;height:3px;border-radius:2px;background:#26262B;overflow:hidden}
.tv-bar>span{display:block;height:100%;background:#EDEDEF;border-radius:2px}
.tv-meta{font-family:var(--mono);font-size:8px;color:#767680;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tv-stats{
display:grid;grid-template-columns:repeat(4,1fr);
margin-top:auto;border-top:1px solid #26262B;
}
.tv-stat{padding:13px 12px 14px;border-left:1px solid #26262B;display:flex;flex-direction:column;gap:3px}
.tv-stat:first-child{border-left:0;padding-left:0}
.tv-stat i{font-family:var(--mono);font-size:8.5px;letter-spacing:.12em;text-transform:uppercase;color:#767680}
.tv-stat b{font-size:15px;font-weight:600;letter-spacing:-.03em}
.tv-rail{border-left:1px solid #26262B;background:#000000;padding:13px 12px;display:flex;flex-direction:column;gap:9px}
.tv-kick{font-family:var(--mono);font-size:8.5px;letter-spacing:.13em;text-transform:uppercase;color:#767680}
.tv-hl{
position:relative;background:#FAF5E9;border-radius:7px;padding:11px 11px 10px 15px;overflow:hidden;
}
.tv-hl::after{content:"";position:absolute;inset:0;background-image:var(--grain);opacity:.05;mix-blend-mode:multiply;pointer-events:none}
.tv-hl-spine{position:absolute;left:0;top:0;bottom:0;width:3px;background:#FF2E63}
.tv-hl-q{font-family:var(--serif);font-size:11.5px;line-height:1.4;color:#161310}
.tv-hl-src{font-family:var(--mono);font-size:8px;color:#6B6459;margin-top:8px}
.tv-due{
border:1px solid #26262B;border-radius:7px;background:#16161A;
padding:9px 10px;display:flex;flex-direction:column;gap:2px;
}
.tv-due b{font-size:11px;font-weight:600}
.tv-due i{font-family:var(--mono);font-size:8.5px;color:#767680}
.tv-due--flat{background:transparent;border-style:dashed}
/* ---- the reader on an iPhone, angled toward the dashboard ---- */
/* bottom:24 keeps the whole phone inside .tv-lib, which now ends at 604.
It used to be 2, hanging the phone 80px past the card's bottom border. */
.tv-phone{
position:absolute;right:38px;bottom:24px;z-index:4;
width:188px;height:384px;padding:5px;
border-radius:30px;
/* Measured, not guessed: a horizontal slice across the left edge read
page 2 -> 48..56 -> bezel 25..33 -> screen 15. That 48..56 band is this
gradient's own light stop flaring against a near-black page. Toning it
down helped the bezel, but it was NOT the horizontal line through the
reading text: that was .tv-lib's bottom border. The stops keep their shape so
the bezel still turns, but the brightest point now lands near the bezel
body instead of far above it. */
background:linear-gradient(152deg,#3A3A42 0%,#242429 24%,#141418 56%,#22222A 84%,#31313A 100%);
/* No uniform inset rim. A 1px ring of rgba(255,255,255,.13) on all four
sides measured 68-83 luminance against a shadow at 1, which is a hard
bright hairline rather than a metal edge, and it was the line that kept
showing. The bezel gradient already carries the edge; a soft outer glow
seats it against the page instead. */
box-shadow:
0 24px 40px rgba(0,0,0,.55),
0 6px 14px rgba(0,0,0,.4),
0 0 0 1px rgba(0,0,0,.5);
transform:rotateY(-19deg) rotate(4deg);
}
.tv-side-btn{position:absolute;left:-2px;width:2px;border-radius:2px;background:#43434b}
.tv-side-btn--vol{top:96px;height:24px}
.tv-side-btn--vol2{top:128px;height:24px}
.tv-side-btn--pwr{left:auto;right:-2px;top:112px;height:36px}
/* An opaque fill of its own. The only solid color inside the screen used to
come from the three .tv-mode layers, and those are opacity-animated, so
mid-crossfade every layer was part transparent at once and the phone
turned into a window onto the dashboard behind it.
Radius is 25, not 26: the bezel is 30 with 5px of padding, and the extra
pixel left a hairline of bezel showing at each corner. */
.tv-screen{position:relative;width:100%;height:100%;border-radius:25px;overflow:hidden;background:#000000}
.tv-island{
position:absolute;top:7px;left:50%;transform:translateX(-50%);z-index:8;
width:50px;height:13px;border-radius:999px;background:#0b0b0c;
}
.tv-home{
position:absolute;bottom:5px;left:50%;transform:translateX(-50%);z-index:8;
width:60px;height:3px;border-radius:999px;background:rgba(255,255,255,.35);
}
/* three reading themes, cross-faded on a loop */
/* Near a cut rather than a dissolve. The old 6% window held the cream paper
theme half-faded over the dark one for 1.08s, and cream over near-black
is a dirty yellow-brown: that was the undertone, not the highlight. */
@keyframes modeCycle{0%,32%{opacity:1}33.4%,98.6%{opacity:0}100%{opacity:1}}
.tv-mode{
position:absolute;inset:0;z-index:2;
display:flex;flex-direction:column;
padding:26px 14px 0;
animation:modeCycle 18s ease-in-out infinite;
}
/* No sheen over the screen: it read as a glossy stock photo and softened the type. */
.tv-mode--paper{background:#FAF5E9;color:#161310;animation-delay:0s}
/* Flat fills, deliberately. I had given these a gradient for depth, but both
ended their travel early (62% and 68%) and then held flat, which leaves a
hard junction partway down the screen. On a near-black fill that junction
banded and read as a line straight through the reading text. A phone
showing a reader is a flat panel anyway; the depth belongs to the bezel and
the shadow, which carry it. */
.tv-mode--term{background:#050508;color:#F4F4F2;animation-delay:-12s}
.tv-mode--dark{background:#15151B;color:#DEDCD6;animation-delay:-6s}
.tv-mode .tv-run{font-size:6.5px;letter-spacing:.16em;opacity:.62}
.tv-mode .tv-ch{font-size:13px;margin:5px 0 8px;color:inherit}
.tv-mode p{font-family:var(--serif);font-size:8.6px;line-height:1.62;color:inherit;
margin-bottom:7px;text-align:justify;hyphens:auto}
.tv-mode .tv-cont{opacity:.62}
.tv-mode--term .tv-ch,.tv-mode--term p{font-family:var(--mono);letter-spacing:-.02em}
.tv-mode--term .tv-ch{font-size:11px}
.tv-mode--term p{font-size:7.6px;line-height:1.66;text-align:left}
/* Solid, saturated color rather than a wash: the muddy alpha was what made
this read like a 2011 e-reader. Each mark is swept in left to right, in step
with its own theme, so the loop shows the act of highlighting. */
.tv-mode .tv-mark{
/* No base color under the sweep. `.tv-mark` further down sets a 30% pink
background-color, and because the sweep animates background-SIZE, that
color sat under every mark at full width the whole time: the swept image
only ever rode on top of a permanent muddy maroon. Clearing it is what
makes the highlight read as an action rather than a stain. */
background-color:transparent;
background-repeat:no-repeat;background-position:0 50%;
background-size:100% 100%;border-radius:1px;
animation:markSweep 18s cubic-bezier(.2,.9,.25,1) infinite;
}
@keyframes markSweep{
0%,5% {background-size:0% 100%}
10%,93% {background-size:100% 100%}
100% {background-size:0% 100%}
}
/* The paper theme keeps the page's own dark ink. The sweep animates
background-SIZE, so the colour cannot follow it: setting the light text
colour up front left the words at 1.01:1 on the cream page and they
vanished until the pink caught up. Dark ink measures 5.1:1 on the pink and
is readable the whole way through. The dark themes keep the light colour,
where the text is legible before the sweep either way. */
.tv-mode--paper .tv-mark{background-image:linear-gradient(#FF2E63,#FF2E63);color:#161310;animation-delay:0s}
.tv-mode--term .tv-mark{background-image:linear-gradient(#FF2E63,#FF2E63);color:#FFF3F6;animation-delay:-12s}
.tv-mode--dark .tv-mark{background-image:linear-gradient(#FF2E63,#FF2E63);color:#FFF3F6;animation-delay:-6s}
.tv-mode .tv-foot{
margin-top:auto;display:flex;align-items:center;gap:7px;
padding:6px 2px 16px;background:transparent;border-top:0;
}
.tv-mode .tv-pct,.tv-mode .tv-left{font-family:var(--mono);font-size:6.5px;white-space:nowrap;color:inherit;opacity:.8}
.tv-mode .tv-fbar{flex:1;height:2px;border-radius:2px;overflow:hidden;background:currentColor;opacity:.22}
.tv-mode .tv-fbar .fill{background:currentColor}
.tv-run{
font-family:var(--mono);font-size:8px;letter-spacing:.14em;
text-transform:uppercase;color:#6B6459;
}
.tv-ch{
font-family:var(--serif);font-size:16px;font-weight:400;letter-spacing:-.01em;
margin:7px 0 10px;color:#161310;
}
.tv-page p{
font-family:var(--serif);font-size:10.5px;line-height:1.6;color:#161310;
margin-bottom:8px;text-align:justify;hyphens:auto;
}
.tv-mark{background:rgba(255,46,99,.30);color:#161310;box-decoration-break:clone;-webkit-box-decoration-break:clone;padding:1px 0}
.tv-cont{color:#3A342C}
.tv-margin{
position:absolute;right:10px;top:124px;width:44px;
font-family:var(--mono);font-size:7.5px;line-height:1.5;color:#6B6459;
border-left:1px solid rgba(22,19,16,.2);padding-left:6px;
}
.tv-foot{
position:relative;z-index:6;
display:flex;align-items:center;gap:8px;flex:0 0 auto;
height:auto;padding:7px 16px 17px;
background:#F1E7D3;border-top:1px solid rgba(22,19,16,.12);
}
.tv-pct{font-family:var(--mono);font-size:8.5px;color:#161310;white-space:nowrap}
.tv-fbar{flex:1;height:3px;border-radius:2px;background:rgba(22,19,16,.14);overflow:hidden}
.tv-fbar>span{display:block;height:100%;background:#161310;border-radius:2px}
.tv-left{font-family:var(--mono);font-size:8.5px;color:#6B6459;white-space:nowrap}
/* =========================================================
9. Stage geometry, motion, responsive
========================================================= */
.stage-art{
position:relative;width:100%;
/* Sized to the mock plus breathing room rather than to a round number.
min-height:620px used to sit above these and beat every value below,
which is why the panel floated in ~200px of nothing at every width. */
height:600px;padding:0;
/* Visible, not hidden: this box is what was cropping the tilted product shot
at its own edge. The shot is positioned absolutely inside it, so the height
still reserves the right amount of layout space; it just no longer cuts. */
display:block;overflow:visible;
}
.float{
position:absolute;inset:0;margin:0;
display:flex;align-items:center;justify-content:center;
}
/* The shot spills outward, away from the copy. It used to lean inward by
44px, which was harmless while it was small and clipped; at the larger
scale that ran it over the spec values in the copy column. */
.mock{--tx:64px;--t:translateX(var(--tx)) rotateY(-21deg) rotateX(7deg) rotateZ(1.2deg) scale(calc(1.02 * var(--s)))}
.stage--b .mock{--tx:-64px;--t:translateX(var(--tx)) rotateY(21deg) rotateX(7deg) rotateZ(-1.2deg) scale(calc(1.02 * var(--s)))}
.stage:hover .mock,.stage:focus-within .mock{transform:translateX(var(--tx)) scale(var(--s))}
@media (prefers-reduced-motion:reduce){
.float{animation:none}
.mock{transition:none}
.stage:hover .mock,.stage:focus-within .mock{transform:var(--t)}
.btn,.nav a,.card-link,.menu span{transition:none}
html{scroll-behavior:auto}
}
/* ---- 1180 and down ---- */
@media (max-width:1180px){
:root{--s:.70;--rhythm:56px;--gut:26px}
.stage-copy{padding:40px 40px 26px}
.stage-art{height:520px}
}
/* ---- 1080 and down: single column, panels flat and centered ---- */
@media (max-width:1080px){
:root{--s:.78}
.stage,.stage--b{grid-template-columns:1fr}
.stage--b .stage-copy{order:1}
.stage--b .stage-art{order:2}
.stage-copy{padding:36px 32px 20px;max-width:none}
.stage-art{height:560px;perspective:none}
.float{animation:none}
.mock,.stage--b .mock{--tx:0px;--t:scale(var(--s));transform:var(--t)}
.stage:hover .mock,.stage:focus-within .mock{transform:var(--t)}
/* Trove collapses to the library panel only */
.mock--tv,.tv{width:822px;flex-basis:822px;height:522px}
.tv-lib{position:relative;right:auto;top:auto;width:100%;height:100%}
.tv-phone{display:none}
}
/* ---- 860 and down: nav folds, grids stack ---- */
@media (max-width:860px){
:root{--rhythm:48px}
.menu{display:flex}
.head-end{margin-left:auto}
.nav{
display:none;position:absolute;top:var(--navh);left:0;right:0;
flex-direction:column;gap:0;margin:0;padding:6px var(--gut) 16px;
background:rgba(8,8,10,.97);
backdrop-filter:saturate(140%) blur(14px);
-webkit-backdrop-filter:saturate(140%) blur(14px);
border-bottom:1px solid var(--line);
}
.nav.is-open{display:flex}
.nav a{padding:13px 2px;border-bottom:1px solid var(--line);font-size:13.5px}
.nav a:last-child{border-bottom:0}
.facts-row{grid-template-columns:repeat(2,1fr)}
.fact{padding:24px 22px 26px}
.fact:nth-child(odd){border-left:0;padding-left:0}
.fact:nth-child(n+3){border-top:1px solid var(--line)}
.cols{grid-template-columns:1fr}
.col{padding:24px 0 4px;border-left:0;border-top:1px solid var(--line)}
.col:first-child{border-top:0}
.prose{grid-template-columns:1fr;gap:20px}
.cards{grid-template-columns:1fr}
.third{padding:30px 26px;gap:22px}
.third-tag{margin-left:0;width:100%}
.foot-in{gap:18px}
.foot-nav,.foot-c{margin-left:0}
.foot-nav{width:100%;flex-wrap:wrap;gap:18px;order:3}
.foot-c{order:4}
}
/* ---- 720 and down ----
Stop presenting the mock as a scaled-down photograph of a desktop and let it
be the interface at 1:1. Its own type is 9 to 13.5px, which is already a
phone's scale, so shrinking it to 45% and then 30% was the whole reason it
read as a postage stamp floating in dead space. At full size in a fluid
column, with the sidebar and rail shed, it reads as the real product. */
@media (max-width:720px){
:root{--s:1;--gut:20px}
.hero{padding:76px 0 68px}
.stage-copy{padding:30px 22px 16px}
/* the art column sizes to the mock instead of reserving a fixed slab */
.stage-art{height:auto;min-height:0;overflow:visible;padding:0 18px 26px}
.float{position:static;inset:auto;display:block;margin:0}
.stage--a .float,.stage--b .float{margin:0}
.mock,.mock--pv,.mock--tv,.tv{
width:100%;flex:0 0 auto;flex-basis:auto;max-width:none;
height:auto;
transform:none;
filter:drop-shadow(0 16px 30px rgba(0,0,0,.55));
}
.stage:hover .mock,.stage:focus-within .mock{transform:none}
.pv,.tv{height:auto}
.pv{grid-template-columns:minmax(0,1fr)}
.pv-side,.pv-rail{display:none}
/* Toolbar furniture that only earns its place on a wide screen. Left in, it
runs off the right edge and reads as the panel being cut off. */
.pv-search,.pv-people{display:none}
.pv-top{gap:10px}
.pv-crumb{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pv-cta{flex:0 0 auto}
.pv-bar{flex-wrap:nowrap;overflow:hidden;gap:7px}
.pv-chip,.pv-tally{white-space:nowrap;flex:0 0 auto}
.pv-seg{flex:0 0 auto}
.pv-chip:nth-of-type(n+2),.pv-tally{display:none}
.pv-tr{grid-template-columns:minmax(0,1fr) 84px 74px;gap:8px}
.pv-tr .c-src,.pv-tr .c-ck,.pv-tr .c-rev{display:none}
.pv-kpis{grid-template-columns:repeat(2,1fr)}
.pv-kpi:nth-child(3),.pv-kpi:nth-child(4){border-top:1px solid #1C1C21}
.pv-kpi:nth-child(odd){border-left:0}
/* The reader is the point of Trove, and a phone is the right place to show a
phone. It hovers over the dashboard on desktop; here it sits under it, at
the size that already reads well on the Trove page. */
.tv{display:flex;flex-direction:column;align-items:center;gap:20px}
.tv-lib{width:100%;height:auto}
.tv-phone{
display:block;position:static;right:auto;bottom:auto;
width:212px;height:436px;flex:0 0 auto;
transform:rotate(-1.5deg);
box-shadow:0 26px 46px rgba(0,0,0,.7),0 6px 16px rgba(0,0,0,.5),
inset 0 0 0 1px rgba(255,255,255,.1);
}
.tv-lib{grid-template-columns:minmax(0,1fr)}
.tv-side,.tv-rail{display:none}
.tv-shelf{grid-template-columns:repeat(3,1fr)}
.tv-book:nth-child(n+4){display:none} /* the second shelf row is desktop only */
/* Chips must not break inside their own pill, and four stats do not fit a
phone: two rows of two reads better than four wrapped columns. */
.tv-chips{flex-wrap:nowrap;overflow:hidden}
.tv-chip{white-space:nowrap;flex:0 0 auto}
.tv-chip:nth-child(n+5){display:none} /* the row ends cleanly, never mid-word */
.tv-ca{font-size:9px} /* cover byline: 7.5px is below the floor */
.tv-stats{grid-template-columns:repeat(2,1fr)}
.tv-stat{padding:12px 12px 13px}
.tv-stat:nth-child(odd){border-left:0;padding-left:0}
.tv-stat:nth-child(n+3){border-top:1px solid #26262B}
.tv-stat b{white-space:nowrap}
}
@media (max-width:480px){
.stage-art{padding:0 14px 22px}
.tv-shelf{grid-template-columns:repeat(2,1fr)}
.tv-book:nth-child(n+3){display:none}
.third{border-radius:16px}
.facts-row{grid-template-columns:1fr}
.fact{border-left:0;padding:20px 0 22px;border-top:1px solid var(--line)}
.fact:first-child{border-top:0}
}
html{scroll-behavior:smooth}
.head{scroll-margin-top:0}
[id]{scroll-margin-top:74px}
/* =========================================================
10. Contact: intake form
========================================================= */
.contact{
display:grid;grid-template-columns:.82fr 1.18fr;gap:48px;
margin-top:36px;align-items:start;
}
.contact-copy{display:flex;flex-direction:column;border-top:1px solid var(--line)}
.contact-block{padding:22px 0;border-bottom:1px solid var(--line)}
.contact-h{
font-size:19px;letter-spacing:-.02em;font-weight:600;
font-variation-settings:"wdth" 92,"wght" 600;color:var(--cream);
}
.contact-p{margin-top:12px;color:var(--muted);font-size:15.5px;line-height:1.65}
.form{
border:1px solid var(--line);border-radius:18px;
background:var(--panel);padding:30px 30px 26px;
display:flex;flex-direction:column;gap:18px;
}
.field{display:flex;flex-direction:column;gap:8px;min-width:0}
.field-row{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.field-l{
font-family:var(--mono);font-size:10.5px;letter-spacing:.14em;
text-transform:uppercase;color:var(--dim);
}
.field-o{color:var(--dim);letter-spacing:.1em;margin-left:4px;text-transform:none;font-size:10px}
.field-i{
width:100%;font-family:var(--sans);font-size:15px;color:var(--cream);
background:#131317;border:1px solid var(--line-2);border-radius:10px;
padding:11px 13px;line-height:1.4;
transition:border-color .2s var(--ease),background .2s var(--ease);
-webkit-appearance:none;appearance:none;
}
.field-i::placeholder{color:var(--faint)}
.field-i:hover{border-color:#3A3A44}
.field-i:focus{outline:none;border-color:var(--cream);background:#16161B}
.field-i:focus-visible{outline:2px solid var(--cream);outline-offset:2px}
.field-t{resize:vertical;min-height:120px;font-family:var(--sans)}
select.field-i{
background-image:linear-gradient(45deg,transparent 50%,var(--muted) 50%),linear-gradient(135deg,var(--muted) 50%,transparent 50%);
background-position:calc(100% - 18px) 50%,calc(100% - 13px) 50%;
background-size:5px 5px,5px 5px;background-repeat:no-repeat;
padding-right:38px;cursor:pointer;
}
select.field-i option{background:#131317;color:var(--cream)}
.field-i[aria-invalid="true"]{border-color:#7E7E86}
/* honeypot: off-screen, never shown, never focusable */
.field--trap{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
/* The Turnstile widget lives in a cross-origin iframe, so nothing inside it can
be restyled. It is set to interaction-only, which keeps it out of the layout
for anyone Cloudflare can clear silently, and .check reports the same state in
our own type. On the rare visit that needs a gesture, the widget appears here. */
.field-turnstile{display:flex;flex-direction:column}
/* Cloudflare sizes its own wrapper whether or not it paints a challenge, which
would leave a blank 73px gap for everyone it clears silently. Collapse it
until an actual challenge iframe exists; main.js sets is-live when one does. */
.field-turnstile .cf-turnstile{height:0;overflow:hidden}
.field-turnstile.is-live .cf-turnstile{height:auto;overflow:visible;margin-bottom:12px}
.check{
display:flex;align-items:center;gap:9px;
font-family:var(--mono);font-size:10.5px;letter-spacing:.02em;
color:var(--faint);transition:color .3s var(--ease);
}
.check-dot{
flex:0 0 auto;width:6px;height:6px;border-radius:50%;
background:var(--dim);
transition:background .3s var(--ease),box-shadow .3s var(--ease);
}
.check[data-state="wait"] .check-dot{animation:checkPulse 1.5s ease-in-out infinite}
.check[data-state="ok"]{color:var(--muted)}
.check[data-state="ok"] .check-dot{background:#7FB08A;box-shadow:0 0 0 3px rgba(127,176,138,.15)}
.check[data-state="ask"]{color:var(--muted)}
.check[data-state="ask"] .check-dot{background:var(--cream);box-shadow:0 0 0 3px rgba(236,234,228,.14)}
.check[data-state="err"]{color:#C9A0A0}
.check[data-state="err"] .check-dot{background:#C9A0A0;animation:none}
@keyframes checkPulse{0%,100%{opacity:1}50%{opacity:.28}}
.form-foot{display:flex;align-items:center;gap:18px;flex-wrap:wrap;margin-top:2px}
.form-note{font-family:var(--mono);font-size:10.5px;color:var(--faint);line-height:1.5;flex:1;min-width:180px}
.btn--solid[disabled]{opacity:.55;cursor:progress}
.form-status{
font-family:var(--mono);font-size:12px;line-height:1.5;
min-height:1.2em;color:var(--muted);
}
.form-status:empty{min-height:0}
.form-status[data-state="ok"]{color:var(--cream)}
.form-status[data-state="err"]{color:#C9A0A0}
@media (max-width:1080px){
.contact{grid-template-columns:1fr;gap:34px}
/* Grid children default to min-width:auto, so anything with an intrinsic
floor (the Turnstile widget) pushes the track past the gutter and the
page scrolls sideways on small phones. */
.contact > *{min-width:0}
}
@media (max-width:720px){
.field-row{grid-template-columns:1fr;gap:18px}
.form{padding:24px 20px 22px;border-radius:14px}
.form-foot{gap:12px}
}
/* =========================================================
11. Motion. Every surface below is decorative: the page
reads correctly with all of it switched off.
========================================================= */
/* ---- shared ---- */
@keyframes fillTo{from{width:0}to{width:var(--w)}}
@keyframes shine{0%{transform:translateX(-120%)}55%,100%{transform:translateX(320%)}}
@keyframes pulseDot{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.35;transform:scale(.82)}}
@keyframes haloOut{0%{opacity:.55;transform:scale(1)}70%,100%{opacity:0;transform:scale(2.6)}}
@keyframes drawLine{0%{stroke-dashoffset:340}38%,88%{stroke-dashoffset:0}100%{stroke-dashoffset:0}}
@keyframes fadeArea{0%,14%{opacity:0}44%,88%{opacity:1}100%{opacity:1}}
@keyframes riseCol{from{transform:scaleY(0)}to{transform:scaleY(1)}}
@keyframes sweepScan{0%{transform:translateY(-40px);opacity:0}8%{opacity:1}92%{opacity:1}100%{transform:translateY(320px);opacity:0}}
@keyframes flashRow{0%,72%{background:transparent}80%{background:rgba(237,237,234,.05)}100%{background:transparent}}
@keyframes markIn{0%,8%{background-size:0% 100%}34%,92%{background-size:100% 100%}100%{background-size:100% 100%}}
@keyframes gridDrift{from{background-position:0 0}to{background-position:27px 27px}}
@keyframes creep{0%{width:var(--w)}100%{width:calc(var(--w) + 3%)}}
.fill{display:block;height:100%;border-radius:inherit;width:var(--w);animation:fillTo 1.3s cubic-bezier(.2,.7,.2,1) both}
/* ---- ProofVue: live dot ---- */
.live{
position:relative;width:6px;height:6px;border-radius:999px;
background:#EDEDEA;margin-left:4px;flex:0 0 auto;
animation:pulseDot 2.4s ease-in-out infinite;
}
.live::after{
content:"";position:absolute;inset:0;border-radius:999px;
background:#EDEDEA;animation:haloOut 2.4s ease-out infinite;
}
/* ---- ProofVue: sparkline ---- */
.pv-kpi--chart{justify-content:space-between;gap:6px}
.spark{width:100%;height:34px;overflow:visible}
.spark-line{
stroke-dasharray:340;
animation:drawLine 9s cubic-bezier(.4,0,.2,1) infinite;
}
.spark-area{animation:fadeArea 9s cubic-bezier(.4,0,.2,1) infinite}
.spark-dot{animation:pulseDot 2.2s ease-in-out infinite}
/* ---- ProofVue: meters + scan + rows ---- */
.meter{position:relative}
.meter .fill{position:relative;overflow:hidden}
.meter .fill::after{
content:"";position:absolute;inset:0;width:40%;
background:linear-gradient(90deg,transparent,rgba(255,255,255,.85),transparent);
animation:shine 5.5s ease-in-out infinite;
}
.pv-tr:nth-child(2) .fill{animation-delay:.05s}
.pv-tr:nth-child(3) .fill{animation-delay:.14s}
.pv-tr:nth-child(4) .fill{animation-delay:.23s}
.pv-tr:nth-child(5) .fill{animation-delay:.32s}
.pv-tr:nth-child(6) .fill{animation-delay:.41s}
.pv-tr:nth-child(7) .fill{animation-delay:.5s}
.pv-tr:nth-child(3) .meter .fill::after{animation-delay:.9s}
.pv-tr:nth-child(5) .meter .fill::after{animation-delay:1.8s}
.pv-tr:nth-child(7) .meter .fill::after{animation-delay:2.7s}
.pv-table{position:relative}
.pv-scan{
position:absolute;left:0;right:0;top:28px;height:38px;z-index:2;
pointer-events:none;
background:linear-gradient(180deg,transparent,rgba(237,237,234,.045),transparent);
animation:sweepScan 7.5s cubic-bezier(.5,0,.5,1) infinite;
}
.pv-tr--new{animation:flashRow 7.5s ease-out infinite}
/* ---- ProofVue: audit trail sequence ---- */
.pv-trail li::before{animation:pulseDot 4.4s ease-in-out infinite}
.pv-trail li:nth-child(2)::before{animation-delay:.5s}
.pv-trail li:nth-child(3)::before{animation-delay:1s}
.pv-trail li:nth-child(4)::before{animation-delay:1.5s}
.pv-trail li:nth-child(5)::before{animation-delay:2s}
/* ---- Trove: covers, bars, chart, highlight ---- */
.tv-cover{position:relative;overflow:hidden}
.sheen{
position:absolute;top:0;bottom:0;left:0;width:34%;z-index:2;pointer-events:none;
background:linear-gradient(100deg,transparent,rgba(255,255,255,.11),transparent);
animation:shine 9s ease-in-out infinite;
}
.tv-book:nth-child(2) .sheen{animation-delay:1.1s}
.tv-book:nth-child(3) .sheen{animation-delay:2.2s}
.tv-book:nth-child(4) .sheen{animation-delay:3.3s}
.tv-book:nth-child(5) .sheen{animation-delay:4.4s}
.tv-book:nth-child(6) .sheen{animation-delay:5.5s}
.tv-book:nth-child(7) .sheen{animation-delay:6.6s}
.tv-book:nth-child(8) .sheen{animation-delay:7.7s}
.tv-bar .fill{background:#EDEDEF}
.tv-book:nth-child(2) .tv-bar .fill{animation-delay:.12s}
.tv-book:nth-child(3) .tv-bar .fill{animation-delay:.24s}
.tv-book:nth-child(4) .tv-bar .fill{animation-delay:.36s}
.tv-book:nth-child(5) .tv-bar .fill{animation-delay:.48s}
.tv-book:nth-child(6) .tv-bar .fill{animation-delay:.60s}
.tv-book:nth-child(7) .tv-bar .fill{animation-delay:.72s}
.tv-book:nth-child(8) .tv-bar .fill{animation-delay:.84s}
.tv-chart{
display:flex;align-items:flex-end;gap:4px;height:56px;
padding:8px 2px 0;border-bottom:1px solid #26262B;
}
.tv-col{flex:1;height:100%;display:flex;align-items:flex-end}
.tv-col i{
display:block;width:100%;height:var(--h);border-radius:2px 2px 0 0;
background:linear-gradient(180deg,#4A4A54,#2A2A31);transform-origin:bottom;
animation:riseCol .9s cubic-bezier(.2,.7,.2,1) both;
}
.tv-col--on i{background:linear-gradient(180deg,#EDEDEF,#9A9AA2)}
.tv-col:nth-child(2) i{animation-delay:.07s}
.tv-col:nth-child(3) i{animation-delay:.14s}
.tv-col:nth-child(4) i{animation-delay:.21s}
.tv-col:nth-child(5) i{animation-delay:.28s}
.tv-col:nth-child(6) i{animation-delay:.35s}
.tv-col:nth-child(7) i{animation-delay:.42s}
.tv-mark{
background-image:linear-gradient(rgba(255,46,99,.30),rgba(255,46,99,.30));
background-repeat:no-repeat;background-position:0 0;background-size:100% 100%;
animation:markIn 11s cubic-bezier(.4,0,.2,1) infinite;
}
.tv-fbar .fill{background:#161310;animation:fillTo 1.6s cubic-bezier(.2,.7,.2,1) both,creep 11s ease-in-out 1.6s infinite alternate}
/* counters set by script; hold their printed value if it never runs */
.tick{font-variant-numeric:tabular-nums}
@media (prefers-reduced-motion:reduce){
.fill,.spark-line,.spark-area,.spark-dot,.live,.live::after,
.meter .fill::after,.pv-scan,.pv-tr--new,
.pv-trail li::before,.sheen,.tv-col i,.tv-mark,.tv-fbar .fill,.hero-grid,.check-dot{
animation:none !important;
}
/* the verification line flips state on load; its color fades are harmless
but they should not be the one thing still moving here */
.check,.check-dot{transition:none}
.fill{width:var(--w)}
.spark-line{stroke-dashoffset:0}
.pv-scan{display:none}
.tv-mark{background-size:100% 100%}
}
/* =========================================================
12. The work: deep-dive page
========================================================= */
.page-hero{position:relative;overflow:hidden;padding:56px 0 32px}
/* Inner marketing heroes move with the home hero so the set stays coherent,
at roughly the same ratio. Legal pages are excluded below: a privacy policy
heading has no reason to shout. */
.h1--page{font-size:clamp(34px,7.4vw,104px);max-width:18ch}
.page-hero--legal .h1--page{font-size:clamp(32px,4.6vw,56px);max-width:20ch}
/* Both sides at a full rhythm meant two adjacent sections opened a gap of
twice the rhythm, which is what made these pages feel like scrolling through
empty rooms. A little over half each keeps the gap to roughly one rhythm. */
.deep{padding:calc(var(--rhythm) * .56) 0;border-top:1px solid var(--line)}
.deep--alt{background:var(--panel)}
.deep-head{
display:flex;align-items:flex-end;justify-content:space-between;
gap:24px;flex-wrap:wrap;padding-bottom:24px;border-bottom:1px solid var(--line);
}
.lockup-name--lg{font-size:clamp(28px,3.4vw,38px)}
.deep-tag{margin-top:14px;color:var(--muted);font-size:16px;max-width:44ch}
.deep-meta{display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.deep-lead{
display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:32px;
padding:8px 0;align-items:start;
}
.deep-quote{
font-family:var(--serif);font-size:clamp(21px,2.3vw,27px);line-height:1.4;
color:var(--cream);letter-spacing:-.01em;
border-left:2px solid var(--line-2);padding-left:24px;
}
.deep-h{
font-family:var(--mono);font-size:11px;letter-spacing:.18em;
text-transform:uppercase;color:var(--dim);margin-bottom:18px;
}
.deep-h--spaced{margin-top:32px}
.deep-body p,.deep-p{color:var(--muted);font-size:16.5px;line-height:1.68;margin-bottom:16px;max-width:66ch}
.deep-body p:last-child,.deep-p:last-child{margin-bottom:0}
.deep-block{padding-top:32px}
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;margin-top:32px;background:var(--line)}
.step{background:var(--void);padding:24px}
.deep--alt .step{background:var(--panel)}
.step h4{margin-top:0;font-size:17px;letter-spacing:-.02em;font-weight:600;font-variation-settings:"wdth" 92,"wght" 600;color:var(--cream)}
.step p{margin-top:10px;color:var(--muted);font-size:14.5px;line-height:1.62}
.split{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px;margin-top:24px}
.grid3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;margin-top:24px}
.cell{border:1px solid var(--line);border-radius:16px;padding:24px;background:var(--void)}
.deep--alt .cell{background:var(--panel-2)}
.cell-h{font-size:17.5px;letter-spacing:-.02em;font-weight:600;font-variation-settings:"wdth" 92,"wght" 600;color:var(--cream)}
.cell p{margin-top:12px;color:var(--muted);font-size:14.5px;line-height:1.64}
.status{margin-top:26px;border-top:1px solid var(--line)}
.status li{
display:flex;gap:20px;align-items:baseline;
padding:15px 0;border-bottom:1px solid var(--line);
color:var(--muted);font-size:15.5px;line-height:1.6;
}
.status li span{
flex:0 0 84px;font-family:var(--mono);font-size:10px;letter-spacing:.16em;
text-transform:uppercase;color:var(--dim);
}
.status li:first-child span{color:var(--cream)}
@media (max-width:1080px){
.deep-lead{grid-template-columns:1fr;gap:24px}
.steps{grid-template-columns:repeat(2,1fr)}
.grid3{grid-template-columns:1fr;gap:16px}
.split{grid-template-columns:1fr;gap:20px}
}
@media (max-width:720px){
.page-hero{padding:40px 0 28px}
.steps{grid-template-columns:1fr}
.deep-head{align-items:flex-start}
.deep-quote{font-size:19px;padding-left:18px}
.status li{flex-direction:column;gap:6px}
.status li span{flex:none}
}
/* =========================================================
13. Legal pages
========================================================= */
.page-hero--legal{padding-bottom:56px}
.legal-date{
margin-top:28px;font-family:var(--mono);font-size:11px;
letter-spacing:.12em;text-transform:uppercase;color:var(--faint);
}
.legal-h,.legal p,.legal-list,.legal-table{max-width:780px}
.legal-h{
font-size:21px;letter-spacing:-.025em;font-weight:600;
font-variation-settings:"wdth" 92,"wght" 600;color:var(--cream);
margin-top:52px;padding-top:26px;border-top:1px solid var(--line);
}
.legal-h:first-child{margin-top:0;padding-top:0;border-top:0}
.legal p{color:var(--muted);font-size:16.5px;line-height:1.7;margin-top:16px}
.legal b{color:var(--cream);font-weight:500}
.legal-list{margin-top:16px;display:flex;flex-direction:column;gap:11px}
.legal-list li{
position:relative;padding-left:22px;
color:var(--muted);font-size:16px;line-height:1.65;
}
.legal-list li::before{
content:"";position:absolute;left:2px;top:11px;
width:5px;height:5px;border-radius:999px;background:var(--faint);
}
.legal-note{font-size:15px !important;color:var(--dim) !important}
.legal-table{margin-top:24px;border-top:1px solid var(--line)}
.lt-row{
display:grid;grid-template-columns:130px 190px 1fr;gap:20px;
padding:16px 0;border-bottom:1px solid var(--line);
font-size:15px;line-height:1.6;color:var(--muted);
}
.lt-row--h{
font-family:var(--mono);font-size:10px;letter-spacing:.16em;
text-transform:uppercase;color:var(--dim);padding:10px 0;
}
.lt-row span:first-child{color:var(--cream)}
.lt-row--h span:first-child{color:var(--dim)}
@media (max-width:720px){
.lt-row{grid-template-columns:1fr;gap:6px;padding:18px 0}
.lt-row--h{display:none}
.lt-row span:nth-child(2){font-family:var(--mono);font-size:11px;color:var(--dim)}
.legal-h{margin-top:40px}
}
.form-note a{color:var(--muted);border-bottom:1px solid var(--line-2);transition:color .2s var(--ease),border-color .2s var(--ease)}
.form-note a:hover{color:var(--cream);border-bottom-color:var(--cream)}
.noscript-note{
border:1px solid var(--line-2);border-radius:14px;padding:20px 22px;
background:var(--panel);color:var(--muted);font-size:15px;line-height:1.6;
margin-bottom:18px;
}
/* =========================================================
14. Book cover artwork. Painted in CSS, no images.
========================================================= */
.tv-cover::before{
content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
background:linear-gradient(180deg,rgba(6,6,8,.5),transparent 34%,transparent 60%,rgba(6,6,8,.62));
}
.tv-ct,.tv-ca{position:relative;z-index:3}
.tv-cover::after{z-index:2}
/* The Long Field: horizon, low sun, ploughed ground */
.tv-cover--1{
background:
radial-gradient(circle at 72% 27%,rgba(233,190,110,.95) 0 6%,rgba(233,190,110,.28) 6% 11%,transparent 11.5%),
linear-gradient(180deg,#25384f 0%,#37506a 34%,#5d6b45 34%,#46552f 52%,#2c3418 76%,#1a1e10 100%);
}
/* Salt and Iron: cold steel split by rust */
.tv-cover--2{
background:
linear-gradient(112deg,transparent 46%,rgba(176,84,44,.9) 46% 51%,rgba(176,84,44,.25) 51% 54%,transparent 54%),
linear-gradient(158deg,#454d55 0%,#2b3238 52%,#15181b 100%);
}
/* A Quiet Machinery: concentric rings */
.tv-cover--3{
background:
radial-gradient(circle at 50% 56%,transparent 0 13%,rgba(236,234,228,.3) 13% 15%,transparent 15%),
radial-gradient(circle at 50% 56%,transparent 0 24%,rgba(236,234,228,.19) 24% 26%,transparent 26%),
radial-gradient(circle at 50% 56%,transparent 0 35%,rgba(236,234,228,.11) 35% 37%,transparent 37%),
radial-gradient(circle at 50% 56%,rgba(201,169,97,.22) 0 5%,transparent 5.5%),
linear-gradient(180deg,#242430 0%,#141419 100%);
}
/* Notes on Weather: cloud bank over a cold sky */
.tv-cover--4{
background:
radial-gradient(ellipse 46% 17% at 34% 58%,rgba(240,238,232,.5),transparent 72%),
radial-gradient(ellipse 38% 14% at 63% 68%,rgba(240,238,232,.34),transparent 72%),
radial-gradient(ellipse 30% 11% at 45% 76%,rgba(240,238,232,.2),transparent 74%),
linear-gradient(180deg,#1d2c3e 0%,#375270 48%,#63809a 100%);
}
/* The Tide Register: a moon over three receding tide marks */
.tv-cover--5{
background:
radial-gradient(circle at 78% 35%,rgba(226,224,214,.82) 0 4.5%,transparent 5%),
linear-gradient(180deg,transparent 54%,rgba(226,224,214,.17) 54% 55.6%,transparent 55.6%),
linear-gradient(180deg,transparent 65%,rgba(226,224,214,.12) 65% 66.4%,transparent 66.4%),
linear-gradient(180deg,transparent 76%,rgba(226,224,214,.08) 76% 77.3%,transparent 77.3%),
linear-gradient(180deg,#132029 0%,#1d3340 46%,#16262f 100%);
}
/* Kiln and Ash: an ember bed under settled smoke */
.tv-cover--6{
background:
radial-gradient(ellipse 60% 25% at 50% 104%,rgba(214,106,44,.72),transparent 70%),
radial-gradient(ellipse 32% 13% at 50% 100%,rgba(240,170,90,.58),transparent 72%),
linear-gradient(180deg,#191a1e 0%,#232228 58%,#2b2119 100%);
}
/* The Coast Road: one pale road cutting a dusk field */
.tv-cover--7{
background:
linear-gradient(74deg,transparent 44%,rgba(226,224,214,.32) 44% 46.6%,transparent 46.6%),
linear-gradient(74deg,transparent 52%,rgba(226,224,214,.1) 52% 53.6%,transparent 53.6%),
linear-gradient(180deg,#2a2f3a 0%,#3c4150 40%,#242832 100%);
}
/* Ledger of Small Repairs: ruled paper, nothing written on it */
.tv-cover--8{
background:
repeating-linear-gradient(0deg,rgba(201,169,97,.13) 0 1px,transparent 1px 11px),
repeating-linear-gradient(90deg,rgba(201,169,97,.13) 0 1px,transparent 1px 11px),
linear-gradient(180deg,#1a1815 0%,#211e19 100%);
}
/* =========================================================
15. Premium motion pass. Everything here is additive:
if a browser supports none of it the page is unchanged.
========================================================= */
/* the marker now travels the line rather than sitting past its end */
.spark-dot{filter:drop-shadow(0 0 3px rgba(74,222,128,.85))}
.spark-halo{animation:pulseDot 2.2s ease-in-out infinite}
/* a caret that blinks in the search field */
@keyframes blink{0%,46%{opacity:1}47%,100%{opacity:0}}
.caret{
width:1px;height:11px;background:#B4B4B6;flex:0 0 auto;margin-right:6px;
animation:blink 1.15s steps(1,end) infinite;
}
/* one slow light sweep across the KPI row */
.pv-kpis{position:relative;overflow:hidden}
.pv-kpis::after{
content:"";position:absolute;top:0;bottom:0;left:0;width:26%;z-index:1;
pointer-events:none;
background:linear-gradient(100deg,transparent,rgba(236,234,228,.055),transparent);
animation:shine 11s ease-in-out infinite;
}
/* the stage's ambient light drifts instead of sitting still */
@keyframes glowDrift{
0%,100%{transform:translate3d(0,0,0) scale(1);opacity:1}
50%{transform:translate3d(-26px,18px,0) scale(1.06);opacity:.82}
}
/* the margin note breathes */
@keyframes noteIn{0%,10%{opacity:0}26%,86%{opacity:1}100%{opacity:0}}
.tv-margin{animation:noteIn 11s ease-in-out infinite}
/* --------------------------------------------------------
Scroll-linked. Feature-detected, and every property is
animated from a visible value, never from zero.
-------------------------------------------------------- */
@supports (animation-timeline: view()) {
@media (prefers-reduced-motion: no-preference) {
/* covers ease open as they come into view, and close on the way back */
.tv-book{perspective:520px}
.tv-cover{
transform-origin:left center;
animation:bookOpen linear both;
animation-timeline:view();
animation-range:entry 18% cover 48%;
}
@keyframes bookOpen{
from{transform:rotateY(0deg)}
to{transform:rotateY(-24deg)}
}
.tv-book:nth-child(2) .tv-cover{animation-range:entry 21% cover 51%}
.tv-book:nth-child(3) .tv-cover{animation-range:entry 24% cover 54%}
.tv-book:nth-child(4) .tv-cover{animation-range:entry 27% cover 57%}
.tv-book:nth-child(5) .tv-cover{animation-range:entry 30% cover 60%}
.tv-book:nth-child(6) .tv-cover{animation-range:entry 33% cover 63%}
.tv-book:nth-child(7) .tv-cover{animation-range:entry 36% cover 66%}
.tv-book:nth-child(8) .tv-cover{animation-range:entry 39% cover 69%}
/* On a phone the covers are the hero of this panel and sit flat and large,
so a 24 degree turn stops reading as a book opening and starts reading as
a rendering fault. Keep them square. */
@media (max-width:720px){
.tv-book{perspective:none}
.tv-cover{animation:none;transform:none}
}
/* sections settle into place; opacity never drops below .55 */
.sec > .wrap > .h2,
.deep-head,.deep-lead,.deep-block{
animation:settle linear both;
animation-timeline:view();
animation-range:entry 6% entry 62%;
}
@keyframes settle{
from{opacity:.55;transform:translateY(14px)}
to{opacity:1;transform:translateY(0)}
}
/* the stage lifts a touch as it arrives */
.stage{
animation:stageLift linear both;
animation-timeline:view();
animation-range:entry 4% entry 55%;
}
@keyframes stageLift{
from{transform:translateY(20px) scale(.992)}
to{transform:translateY(0) scale(1)}
}
}
}
@media (prefers-reduced-motion:reduce){
.caret,.pv-kpis::after,.tv-margin,.spark-halo,.tv-mode{animation:none !important}
/* hold a single reading theme rather than cycling */
.tv-mode--term,.tv-mode--dark{display:none}
.tv-mode--paper{opacity:1}
.spark-dot,.spark-halo{display:none}
}
/* =========================================================
16. Stage header runs two columns so the panel width is used
========================================================= */
.stage-copy{display:block;max-width:none}
/* stage--b puts the art first, so the wide column must come first too */
.stage--b{grid-template-columns:1.14fr .86fr}
.stage--b .stage-copy{order:2}
.stage--b .stage-art{order:1}
.stage-head{max-width:none}
.stage-head{min-width:0;max-width:70ch}
.stage-meta{min-width:0;padding-top:0}
.stage-meta .spec{margin-top:0}
@media (max-width:1080px){
.stage-copy{grid-template-columns:1fr;gap:26px}
.stage-meta{padding-top:0}
}
/* =========================================================
17. How we work: equal cards, shared padding and top alignment.
========================================================= */
.bento{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;margin-top:32px;align-items:stretch}
.bento-cell{
position:relative;
border:1px solid var(--line);border-radius:18px;background:var(--panel);
padding:24px;min-width:0;
transition:border-color .3s var(--ease),background .3s var(--ease);
}
.bento-cell::after{
content:"";position:absolute;inset:0;pointer-events:none;opacity:0;
background:radial-gradient(420px 220px at 20% 0%,rgba(236,234,228,.055),transparent 70%);
transition:opacity .4s var(--ease);
}
.bento-cell:hover{border-color:var(--line-2);background:var(--panel-2)}
.bento-cell:hover::after{opacity:1}
.bento-h{
font-size:23px;line-height:1.2;letter-spacing:-.03em;font-weight:600;
font-variation-settings:"wdth" 92,"wght" 600;color:var(--cream);
}
.bento-p{margin-top:12px;color:var(--muted);font-size:15px;line-height:1.62}
@media (max-width:960px){
.bento{grid-template-columns:1fr;max-width:720px;margin-inline:auto}
}
/* =========================================================
19. Layout guards. These live last on purpose: they must
beat every stage rule above them, whatever the source order.
========================================================= */
@media (max-width:1180px){
/* below here the panel already fits its column, so no offset is wanted */
.mock,.stage--b .mock{--tx:0px}
}
@media (max-width:1080px){
.stage,.stage--b{grid-template-columns:1fr}
.stage--b .stage-copy{order:1}
.stage--b .stage-art{order:2}
}
/* =========================================================
20. Header: companies dropdown
========================================================= */
/* The companies heading leads straight into ProofVue. Avoid stacking the
stage gap, copy padding and logo margin into an empty introductory band. */
#companies > .wrap > #proofvue{margin-top:32px}
#companies > .wrap > #proofvue > .stage-copy{padding-top:0;align-self:start}
#companies > .wrap > #proofvue .lockup{margin-top:0}
@media (max-width:720px){
#companies > .wrap > #proofvue{margin-top:24px}
}
.nav-menu{position:relative;display:flex}
.nav-trigger{
display:inline-flex;align-items:center;gap:6px;
font-family:var(--mono);font-size:11.5px;letter-spacing:-.01em;
color:var(--muted);padding:7px 12px;border-radius:8px;
transition:color .2s var(--ease),background .2s var(--ease);
}
.nav-trigger:hover,.nav-menu.is-open .nav-trigger{color:var(--cream);background:rgba(236,234,228,.055)}
.nav-caret{width:9px;height:6px;transition:transform .25s var(--ease);opacity:.8}
.nav-menu.is-open .nav-caret{transform:rotate(180deg)}
.nav-panel{
position:absolute;top:calc(100% + 10px);left:50%;transform:translateX(-50%) translateY(-6px);
width:min(430px,calc(100vw - 32px));
border:1px solid var(--line-2);border-radius:16px;
background:rgba(14,14,18,.92);
backdrop-filter:saturate(180%) blur(22px);
-webkit-backdrop-filter:saturate(180%) blur(22px);
box-shadow:0 24px 60px rgba(0,0,0,.62),0 2px 10px rgba(0,0,0,.5);
padding:8px;opacity:0;visibility:hidden;pointer-events:none;
transition:opacity .22s var(--ease),transform .22s var(--ease),visibility .22s;
z-index:70;
}
.nav-menu.is-open .nav-panel{opacity:1;visibility:visible;pointer-events:auto;transform:translateX(-50%) translateY(0)}
.nav-card{
display:flex;align-items:center;gap:13px;
padding:12px 12px;border-radius:11px;
transition:background .2s var(--ease);
}
.nav-card:hover{background:rgba(236,234,228,.06)}
.nav-card-mark{
flex:0 0 auto;width:30px;height:30px;border-radius:9px;
border:1px solid var(--line-2);background:#131317;
display:grid;place-items:center;
}
.nav-card-mark svg{width:17px;height:13px}
.nav-card-mark--tv svg{width:15px;height:15px}
.nav-card-body{display:flex;flex-direction:column;gap:3px;min-width:0}
.nav-card-body b{font-size:14px;font-weight:600;letter-spacing:-.02em;color:var(--cream)}
.nav-card-body i{font-style:normal;font-size:12px;line-height:1.45;color:var(--muted)}
.nav-card-go{
margin-left:auto;flex:0 0 auto;color:var(--dim);font-size:13px;
transform:translateX(-3px);opacity:0;
transition:transform .2s var(--ease),opacity .2s var(--ease);
}
.nav-card:hover .nav-card-go{transform:translateX(0);opacity:1;color:var(--cream)}
.nav-panel-foot{
margin:4px 4px 2px;padding:11px 8px 5px;border-top:1px solid var(--line);
font-family:var(--mono);font-size:10.5px;color:var(--dim);
}
.nav-panel-foot a{color:var(--muted);border-bottom:1px solid var(--line-2);padding-bottom:2px}
.nav-panel-foot a:hover{color:var(--cream);border-bottom-color:var(--cream)}
@media (max-width:860px){
.nav-menu{display:block;width:100%}
.nav-trigger{width:100%;justify-content:space-between;padding:13px 2px;font-size:13.5px;border-radius:0;border-bottom:1px solid var(--line)}
.nav-trigger:hover,.nav-menu.is-open .nav-trigger{background:transparent}
.nav-panel{
position:static;transform:none;width:100%;opacity:1;visibility:visible;pointer-events:auto;
border:0;border-radius:0;background:transparent;box-shadow:none;backdrop-filter:none;
-webkit-backdrop-filter:none;padding:4px 0 8px;display:none;
}
.nav-menu.is-open .nav-panel{display:block;transform:none}
.nav-card{padding:11px 2px}
.nav-panel-foot{margin:2px;padding:10px 2px 4px}
}
@media (prefers-reduced-motion:reduce){
.nav-panel,.nav-caret,.nav-card-go{transition:none}
}
/* =========================================================
21. Product pages: supporting figures
========================================================= */
.em-plain{font-style:normal;color:var(--cream)}
.figs{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-top:30px}
.fig{margin:0}
.fig-art{
position:relative;border:1px solid var(--line);border-radius:16px;
background:var(--void);padding:24px 24px 20px;min-height:236px;overflow:hidden;
}
.deep--alt .fig-art{background:#101014}
.fig-kick{
font-family:var(--mono);font-size:9.5px;letter-spacing:.16em;
text-transform:uppercase;color:var(--dim);margin-bottom:16px;
}
.fig figcaption{margin-top:14px;color:var(--muted);font-size:14.5px;line-height:1.6}
.fig figcaption b{color:var(--cream);font-weight:500}
/* score pair */
.fig-art--scores{display:flex;flex-direction:column;justify-content:center;gap:22px}
.score{display:grid;grid-template-columns:1fr auto;grid-template-areas:"k k" "bar n";gap:8px 14px;align-items:center}
.score .fig-kick{grid-area:k;margin:0}
.score-bar{grid-area:bar;height:5px;border-radius:3px;background:#212127;overflow:hidden}
.score-bar .fill{background:#E4E4E1}
.score-n{grid-area:n;font-family:var(--mono);font-size:15px;color:var(--cream);font-variant-numeric:tabular-nums}
.score:nth-child(2) .score-bar .fill{background:#5A5A62;animation-delay:.18s}
.score-note{
margin-top:4px;padding-top:14px;border-top:1px dashed var(--line-2);
font-family:var(--mono);font-size:10.5px;line-height:1.6;color:var(--dim);
}
/* the evidence trail reads better with room around it here */
.fig-art .pv-trail{margin-top:2px}
.fig-art .pv-trail li{padding-bottom:17px}
.fig-art .pv-trail b{font-size:12px}
.fig-art .pv-trail i{font-size:10px}
/* paper highlight card */
.fig-art--paper{
background:#FAF5E9;border-color:rgba(22,19,16,.18);
display:flex;flex-direction:column;justify-content:center;padding-left:32px;
}
.deep--alt .fig-art--paper{background:#FAF5E9}
.fig-art--paper::after{content:"";position:absolute;inset:0;background-image:var(--grain);opacity:.05;mix-blend-mode:multiply;pointer-events:none}
.fig-art--paper .tv-hl-spine{width:4px}
.fig-art--paper .tv-hl-q{font-size:19px;line-height:1.44}
.fig-art--paper .tv-hl-src{font-size:10px;margin-top:16px}
/* the phone, shown upright in a figure rather than hovering a dashboard */
.fig-art--phone{display:grid;place-items:center;min-height:470px;padding:26px}
.fig-art--phone .tv-phone{position:relative;right:auto;bottom:auto;transform:rotate(-2deg);width:212px;height:436px}
.figs--tv{grid-template-columns:.85fr 1.15fr;align-items:start}
@media (max-width:1080px){
.figs,.figs--tv{grid-template-columns:1fr}
.fig-art--phone{min-height:0}
}
/* figures in a row share a height so their captions line up */
.figs{align-items:stretch}
.fig{display:flex;flex-direction:column}
.fig-art{flex:1}
/* inside a figure the trail is page content, not mockup texture, so it must clear AA */
.fig-art .pv-trail b{color:var(--cream)}
.fig-art .pv-trail i{color:var(--dim)}
.fig-art .pv-trail li{border-left-color:var(--line-2)}
.fig-art .pv-trail li::before{background:var(--void);box-shadow:inset 0 0 0 1.5px var(--muted)}
.fig-art .pv-trail li:first-child::before{background:var(--cream);box-shadow:none}
/* =========================================================
22. Flat product surfaces. Shown straight on rather than
in the 3D stage, so nothing can crop.
========================================================= */
.surface{
margin-top:32px;border:1px solid var(--line-2);border-radius:16px;
background:#000000;overflow:hidden;
font-size:12px;line-height:1.45;color:#F2F2F1;
font-variant-numeric:tabular-nums;letter-spacing:-.005em;
}
.surface b,.surface i,.surface em,.surface kbd{font-style:normal;font-weight:inherit}
.surface-top{display:flex;align-items:center;gap:14px;min-height:50px;padding:0 18px;border-bottom:1px solid var(--line)}
.sf-title{font-size:13px;font-weight:600;letter-spacing:-.02em}
.sf-search{
margin-left:6px;flex:1 1 auto;min-width:0;display:flex;align-items:center;gap:8px;
height:28px;padding:0 8px 0 11px;border-radius:8px;border:1px solid var(--line);background:#111114;
}
.sf-search i{flex:1;color:var(--dim);font-size:11px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sf-search kbd{font-family:var(--mono);font-size:9px;color:var(--muted);border:1px solid var(--line-2);border-radius:4px;padding:1px 5px}
.sf-count{margin-left:auto;font-family:var(--mono);font-size:10.5px;color:var(--dim);white-space:nowrap}
.sf-count b{color:var(--cream)}
.sf-seg{display:flex;gap:2px;padding:2px;border-radius:8px;border:1px solid var(--line);background:#101013}
.sf-seg b,.sf-seg i{padding:4px 11px;border-radius:6px;font-size:10.5px;color:var(--dim)}
.sf-seg b{background:#26262C;color:var(--cream);font-weight:500}
.sf-chips{display:flex;align-items:center;gap:7px;padding:13px 18px;border-bottom:1px solid var(--line);flex-wrap:wrap}
.sf-chip{height:23px;padding:0 10px;border-radius:999px;border:1px solid var(--line-2);display:grid;place-items:center;font-family:var(--mono);font-size:9.5px;color:var(--dim)}
.sf-chip.is-on{background:#1B1B20;color:var(--cream);border-color:#34343C}
.sf-chip--dash{border-style:dashed}
.sf-sort{margin-left:auto;font-family:var(--mono);font-size:9.5px;color:var(--faint)}
/* registry */
.rg-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--line)}
.rg-card{background:#0B0B0E;padding:18px 18px 16px;display:flex;flex-direction:column;gap:11px}
.rg-card header{display:flex;align-items:flex-start;justify-content:space-between;gap:10px}
.rg-card header b{font-size:12.5px;font-weight:500;line-height:1.3}
.rg-loc{font-family:var(--mono);font-size:9.5px;color:var(--dim)}
.rg-tags{display:flex;flex-wrap:wrap;gap:5px;margin-top:auto}
.rg-tags li{font-family:var(--mono);font-size:9px;color:var(--muted);border:1px solid var(--line);border-radius:999px;padding:3px 8px}
.rg-tags li.is-off{border-style:dashed;color:var(--dim)}
.rg-foot{display:flex;align-items:center;gap:9px;padding-top:12px;border-top:1px solid var(--line)}
.rg-foot em{font-family:var(--mono);font-size:10.5px;color:var(--muted)}
.rg-card--thin{opacity:.72}
/* agency desk */
.ag-kpis{display:grid;grid-template-columns:repeat(4,1fr);border-bottom:1px solid var(--line)}
.ag-kpi{padding:16px 18px;border-left:1px solid var(--line);display:flex;flex-direction:column;gap:5px}
.ag-kpi:first-child{border-left:0}
.ag-kpi i{font-family:var(--mono);font-size:9px;letter-spacing:.13em;text-transform:uppercase;color:var(--dim)}
.ag-kpi b{font-size:24px;font-weight:600;letter-spacing:-.035em;line-height:1}
.ag-kpi em{font-family:var(--mono);font-size:9.5px;color:var(--dim)}
.ag-kpi .up{color:#7FCF9C}
.ag-kpi .down{color:var(--muted)}
.ag-kpi--chart{gap:9px}
.ag-bars{display:flex;align-items:flex-end;gap:5px;height:40px}
.ag-bars span{flex:1;height:100%;display:flex;align-items:flex-end}
.ag-bars span i{display:block;width:100%;height:var(--h);border-radius:2px 2px 0 0;background:#3A3A44;transform-origin:bottom;animation:riseCol .9s cubic-bezier(.2,.7,.2,1) both}
.ag-bars span.on i{background:#EDEDEA}
.ag-bars span:nth-child(2) i{animation-delay:.06s}.ag-bars span:nth-child(3) i{animation-delay:.12s}
.ag-bars span:nth-child(4) i{animation-delay:.18s}.ag-bars span:nth-child(5) i{animation-delay:.24s}
.ag-bars span:nth-child(6) i{animation-delay:.3s}.ag-bars span:nth-child(7) i{animation-delay:.36s}
.ag-rows{display:flex;flex-direction:column}
.ag-row{display:grid;grid-template-columns:1.15fr 1.4fr .8fr 1fr .95fr;gap:14px;align-items:center;padding:0 18px;height:58px;border-bottom:1px solid #16161A}
.ag-row:last-child{border-bottom:0}
.ag-row--h{height:30px;background:#0E0E11;font-family:var(--mono);font-size:9px;letter-spacing:.12em;text-transform:uppercase;color:var(--dim)}
.ag-c{display:flex;flex-direction:column;gap:2px}
.ag-c b{font-size:12.5px;font-weight:500}
.ag-c i{font-family:var(--mono);font-size:9px;color:var(--dim)}
.ag-row span{color:var(--muted);font-size:11.5px}
.ag-p .meter{width:100%}
/* membership tiers */
.tiers{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:32px}
.tier{
position:relative;border:1px solid var(--line);border-radius:18px;background:var(--void);
padding:26px 24px 24px;display:flex;flex-direction:column;overflow:hidden;
transition:border-color .3s var(--ease);
}
.deep--alt .tier{background:var(--panel-2)}
.tier:hover{border-color:var(--line-2)}
.tier--on{border-color:#3D3D46}
.tier--on::after{
content:"";position:absolute;top:0;bottom:0;left:0;width:32%;pointer-events:none;
background:linear-gradient(100deg,transparent,rgba(236,234,228,.05),transparent);
animation:shine 8s ease-in-out infinite;
}
.tier header{display:flex;flex-direction:column;gap:7px}
.tier header b{font-size:19px;font-weight:600;letter-spacing:-.025em;color:var(--cream)}
.tier-for{font-size:13px;color:var(--muted);line-height:1.5;max-width:26ch}
.tier-price{margin:20px 0 18px;font-size:38px;letter-spacing:-.04em;font-weight:600;color:var(--cream);font-variant-numeric:tabular-nums}
.tier-price em{font-style:normal;font-size:20px;vertical-align:super;margin-right:2px;color:var(--muted)}
.tier-price i{font-style:normal;font-family:var(--mono);font-size:12px;letter-spacing:0;color:var(--dim);margin-left:4px}
.tier-list{border-top:1px solid var(--line);margin-top:auto}
.tier-list li{position:relative;padding:10px 0 10px 22px;border-bottom:1px solid var(--line);color:var(--muted);font-size:13.5px}
.tier-list li:last-child{border-bottom:0}
.tier-list li::before{
content:"";position:absolute;left:2px;top:15px;width:9px;height:5px;
border-left:1.5px solid var(--muted);border-bottom:1.5px solid var(--muted);
transform:rotate(-45deg);
}
.tier--on .tier-list li::before{border-color:var(--cream)}
@media (max-width:1080px){
.rg-grid{grid-template-columns:repeat(2,1fr)}
.ag-kpis{grid-template-columns:repeat(2,1fr)}
.ag-kpi:nth-child(odd){border-left:0}
.ag-kpi:nth-child(n+3){border-top:1px solid var(--line)}
.tiers{grid-template-columns:1fr;gap:12px}
.ag-row{grid-template-columns:1.2fr 1.4fr 1fr;gap:12px}
.ag-row span:nth-child(4),.ag-row span:nth-child(3){display:none}
.ag-row--h span:nth-child(4),.ag-row--h span:nth-child(3){display:none}
}
@media (max-width:720px){
.rg-grid{grid-template-columns:1fr}
.sf-search{display:none}
.surface{margin-top:24px}
}
@media (prefers-reduced-motion:reduce){
.ag-bars span i,.tier--on::after{animation:none !important}
}
/* =========================================================
23. Trove surfaces: reader settings, schools, author studio
========================================================= */
.sf-foot{padding:13px 18px;border-top:1px solid var(--line);font-family:var(--mono);font-size:10px;color:var(--dim);line-height:1.6}
/* reader: typefaces and highlight colors */
.rd{display:grid;grid-template-columns:1.05fr .95fr}
.rd-faces{display:flex;flex-direction:column;border-right:1px solid var(--line)}
.rd-face{
display:flex;flex-direction:column;gap:4px;align-items:flex-start;
padding:15px 18px;border-bottom:1px solid var(--line);width:100%;text-align:left;
transition:background .2s var(--ease);cursor:default;
}
.rd-face:last-child{border-bottom:0}
.rd-face b{font-size:16px;font-weight:500;color:var(--muted);letter-spacing:-.01em}
.rd-face i{font-family:var(--mono);font-size:9.5px;color:var(--dim);line-height:1.5}
.rd-face.is-on{background:#131317}
.rd-face.is-on b{color:var(--cream)}
.rd-preview{
position:relative;background:#FAF5E9;color:#161310;
padding:22px 24px;display:flex;flex-direction:column;justify-content:center;overflow:hidden;
}
.rd-preview::after{content:"";position:absolute;inset:0;background-image:var(--grain);opacity:.05;mix-blend-mode:multiply;pointer-events:none}
.rd-run{font-family:var(--mono);font-size:8.5px;letter-spacing:.16em;text-transform:uppercase;color:#6B6459}
.rd-body{font-family:var(--serif);font-size:16px;line-height:1.6;margin-top:10px;color:#161310}
.rd-swatches{display:flex;align-items:center;gap:8px;margin-top:20px;padding-top:16px;border-top:1px solid rgba(22,19,16,.14)}
.rd-sw{width:17px;height:17px;border-radius:999px;box-shadow:inset 0 0 0 1px rgba(22,19,16,.16)}
.rd-sw.is-on{box-shadow:inset 0 0 0 1px rgba(22,19,16,.16),0 0 0 2px rgba(22,19,16,.45)}
.rd-sw--amber{background:#FF2E63}.rd-sw--sage{background:#8FAE8B}.rd-sw--sky{background:#84A9C0}
.rd-sw--rose{background:#C98A8A}.rd-sw--stone{background:#9C948A}
.rd-swlabel{margin-left:auto;font-family:var(--mono);font-size:9px;letter-spacing:.14em;text-transform:uppercase;color:#6B6459}
/* schools */
.edu-progress{display:block;height:6px;border-radius:3px;background:#212127;overflow:hidden;margin-top:2px}
.edu-progress .fill{background:#EDEDEF}
.edu-g{font-family:var(--mono);font-size:13px;color:var(--cream)!important}
.edu-rows .ag-row{grid-template-columns:1.1fr 1.25fr .85fr .95fr .4fr}
/* author studio */
.au-chart{padding:20px 18px 18px}
.au-chart svg{width:100%;height:150px;display:block}
.au-line{stroke-dasharray:900;animation:drawLine 10s cubic-bezier(.4,0,.2,1) infinite}
.au-area{animation:fadeArea 10s cubic-bezier(.4,0,.2,1) infinite}
/* The svg is stretched with preserveAspectRatio="none", so a inside it
renders as an oval, and a transform:scale() on an svg shape pivots on the svg
origin rather than the shape, walking the marker off the line. Positioning the
marker as a box over the plot keeps it perfectly round and pinned to the
chapter-5 vertex at every width: 276/620 across, 96/150 down. */
.au-plot{position:relative}
.au-dot{
position:absolute;left:44.516%;top:64%;
width:9px;height:9px;border-radius:50%;
background:#F0C069;
transform:translate(-50%,-50%);
box-shadow:0 0 0 3px rgba(240,192,105,.16),0 0 12px rgba(240,192,105,.5);
animation:pulseMark 2.4s ease-in-out infinite;
}
@keyframes pulseMark{
0%,100%{transform:translate(-50%,-50%) scale(1);opacity:1}
50% {transform:translate(-50%,-50%) scale(.84);opacity:.5}
}
.au-axis{display:flex;justify-content:space-between;margin-top:8px;padding:0 2px}
.au-axis span{font-family:var(--mono);font-size:9px;color:var(--faint)}
.au-note{
margin-top:18px;padding-top:16px;border-top:1px solid var(--line);
color:var(--muted);font-size:13.5px;line-height:1.6;max-width:70ch;
}
.au-note b{color:var(--cream);font-weight:500}
@media (max-width:1080px){
.rd{grid-template-columns:1fr}
.rd-faces{border-right:0;border-bottom:1px solid var(--line)}
.edu-rows .ag-row{grid-template-columns:1.2fr 1.3fr .9fr}
.edu-rows .ag-row span:nth-child(3),.edu-rows .ag-row span:nth-child(5){display:none}
}
@media (prefers-reduced-motion:reduce){
.au-line{animation:none;stroke-dashoffset:0}
.au-area,.au-dot{animation:none}
}
/* =========================================================
24. Centered headings.
Titles sit on the page's center line.
Body paragraphs stay left aligned inside a
centered block: centered multi-line copy is markedly harder
to read, and it is the headlines that were asked for.
========================================================= */
/* --- heroes --- */
.hero-in,.page-hero .hero-in{text-align:center}
.hero-in .h1{margin-inline:auto}
/* --- section headers on the home page --- */
.sec > .wrap > .h2{text-align:center}
/* --- section headers on the sub pages --- */
.deep-head{
flex-direction:column;align-items:center;text-align:center;gap:0;
}
.deep-head > *{width:100%}
/* --- blocks centered, lines still left aligned --- */
.prose{margin-inline:auto}
.prose > p:last-child:nth-child(odd){grid-column:1 / -1;max-width:64ch;margin-inline:auto}
/* a lone paragraph in a two column block would sit in the left column only */
.prose > p:only-child{
grid-column:1 / -1;max-width:64ch;margin-inline:auto;text-align:center;
}
/* centered text rags badly by default; balance evens the lines and stops a
single orphan word ending a paragraph */
.h1,.h2,.prose > p:only-child{
text-wrap:balance;
}
/* =========================================================
25. The worked example report (dossier.html)
========================================================= */
/* the honesty note under the hero: this report is invented, and says so */
.note-band{
margin:30px auto 0;max-width:74ch;padding:16px 20px;
border:1px solid var(--line);border-radius:12px;background:var(--panel);
font-family:var(--mono);font-size:11.5px;line-height:1.7;color:var(--faint);
text-align:left;
}
.note-band b{color:var(--muted);font-weight:500}
.dsr{margin-top:34px}
.dsr-scores{
display:grid;grid-template-columns:repeat(2,1fr);
border-bottom:1px solid var(--line);
}
.dsr-score{padding:26px 26px 28px;border-left:1px solid var(--line);display:flex;flex-direction:column;gap:10px}
.dsr-score:first-child{border-left:0}
.dsr-score i{
font-family:var(--mono);font-size:10px;letter-spacing:.14em;
text-transform:uppercase;color:var(--dim);font-style:normal;
}
.dsr-score b{font-size:38px;font-weight:600;letter-spacing:-.03em;color:var(--cream);line-height:1}
.dsr-score em{font-style:normal;font-size:12.5px;color:var(--faint);line-height:1.5}
.dsr-read{padding:20px 26px 24px;color:var(--muted);font-size:14.5px;line-height:1.65}
.dsr-rows{display:flex;flex-direction:column}
.dsr-row{
display:grid;grid-template-columns:1.05fr 1.25fr 1.35fr auto;
gap:16px;align-items:baseline;
padding:14px 26px;border-top:1px solid var(--line);
}
.dsr-row:first-child{border-top:0}
.dsr-row i{
font-family:var(--mono);font-size:10px;letter-spacing:.12em;
text-transform:uppercase;color:var(--dim);font-style:normal;
}
.dsr-row b{font-size:14px;font-weight:500;color:var(--cream)}
.dsr-row em{font-style:normal;font-family:var(--mono);font-size:10.5px;color:var(--faint)}
.dsr-row--unk b{color:var(--muted)}
@media (max-width:860px){
.dsr-scores{grid-template-columns:1fr}
.dsr-score{border-left:0;border-top:1px solid var(--line)}
.dsr-score:first-child{border-top:0}
}
@media (max-width:720px){
.dsr-row{
grid-template-columns:1fr auto;gap:4px 12px;padding:14px 18px;
}
.dsr-row i{grid-column:1 / -1}
.dsr-row em{grid-column:1 / -1;margin-top:2px}
.dsr-score,.dsr-read{padding-inline:18px}
.note-band{padding:14px 16px;font-size:11px}
}
/* an inline link inside body copy */
.inline-link{
color:var(--muted);border-bottom:1px solid var(--line-2);
transition:color .2s var(--ease),border-color .2s var(--ease);
}
.inline-link:hover{color:var(--cream);border-bottom-color:var(--cream)}
/* Very narrow screens (the Galaxy Fold outer display is 280px). The surface
header is a single nowrap row, so its right-hand count ran off the edge. */
@media (max-width:400px){
.surface-top{flex-wrap:wrap;gap:6px 12px;padding:10px 14px;min-height:0}
.sf-count{margin-left:0;white-space:normal}
.sf-seg{order:3}
/* 212px phone plus 26px padding each side needs 264px, and a 280px screen
only offers 240px inside the gutters. Back to the phone's native size. */
.fig-art--phone{padding:16px}
.fig-art--phone .tv-phone{width:188px;height:388px;transform:none}
}
/* the fit score is deliberately blank until a brief exists */
.dsr-score--pending b{color:var(--dim)}
.dsr-score--pending .meter{opacity:.35}
/* the four-up outcome row on the evidence page */
.dsr-scores--four{grid-template-columns:repeat(4,1fr)}
@media (max-width:860px){ .dsr-scores--four{grid-template-columns:repeat(2,1fr)} }
@media (max-width:520px){ .dsr-scores--four{grid-template-columns:1fr} }
/* =========================================================
26. Real product screenshots
========================================================= */
.shots{
display:grid;grid-template-columns:repeat(3,1fr);gap:34px;
margin-top:38px;align-items:start;
}
.shot{margin:0;display:flex;flex-direction:column;gap:16px;align-items:center;text-align:center}
.shot img,.shop-phone{
/* Files are 960px wide. Displayed at 300 they stay sharp on a 3x phone
(300 x 3 = 900) and on a 2x desktop, with headroom to spare. */
width:100%;max-width:300px;height:auto;display:block;
border-radius:22px;border:1px solid var(--line-2);
box-shadow:0 26px 50px rgba(0,0,0,.6),0 6px 16px rgba(0,0,0,.45);
}
/* Static purchase concept. Uses the existing phone proportions and dark app
surface; no checkout handlers, focus targets, remote covers or new assets. */
.shop-phone{position:relative;aspect-ratio:960/2086;container-type:inline-size;overflow:hidden;background:#000;color:#f4f4f2;text-align:left}
.shop-screen{position:absolute;inset:0;display:flex;flex-direction:column;padding:5.7cqi 4.4cqi 0;font-family:var(--sans);font-size:3.8cqi;line-height:1.4}
.shop-status{display:flex;justify-content:space-between;align-items:center;padding:0 4cqi;font-size:4.5cqi;font-weight:600}
.shop-status-icons{display:flex;align-items:center;gap:1.6cqi}
.shop-status svg{width:5.5cqi;height:4.4cqi;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round}
.shop-battery{display:block;width:6.4cqi;height:3cqi;border:1px solid #8e8e93;border-radius:.8cqi;background:#f4f4f2;box-shadow:inset 0 0 0 1px #000}
.shop-bar{display:flex;justify-content:space-between;align-items:center;margin:6cqi 0 4cqi;font-family:var(--serif);font-size:5.4cqi;font-weight:600}
.shop-back,.shop-more{display:grid;place-items:center;width:8.4cqi;height:8.4cqi;border:1px solid #252528;border-radius:50%;background:#151517;font:6cqi/1 var(--sans)}
.shop-heading{margin:1cqi 0 6cqi}
.shop-eyebrow{display:block;font:2.4cqi/1.4 var(--mono);letter-spacing:.12em;color:#a3a3ab}
.shop-heading h3{margin:2cqi 0 0;font:600 7.5cqi/1.12 var(--sans);letter-spacing:-.04em;max-width:15ch}
.shop-selection{display:flex;gap:5.5cqi;align-items:center}
.shop-cover{position:relative;display:flex;flex-direction:column;width:36cqi;min-width:36cqi;height:53cqi;padding:5cqi 3.5cqi;border-radius:.8cqi;background:#d3d2ad;color:#242b21;box-shadow:inset 1.4cqi 0 0 rgba(0,0,0,.13);font-family:var(--serif)}
.shop-cover-rule{width:9cqi;border-top:1px solid currentColor;margin-bottom:3cqi}
.shop-cover-title{font-size:8cqi;line-height:1.1}
.shop-cover-sub{font-size:3.1cqi;margin-top:2cqi;font-style:italic}
.shop-cover-author{margin-top:auto;font:2.2cqi/1.5 var(--sans);letter-spacing:.1em}
.shop-book-info{min-width:0}
.shop-book-info h4{margin:2.6cqi 0 1cqi;font:600 6.5cqi/1.1 var(--serif)}
.shop-book-info p{margin:0;color:#b7b7bc;font-size:3.1cqi}
.shop-format{display:block;margin-top:4cqi;color:#a3a3ab;font-size:2.8cqi}
.shop-sample{display:block;margin-top:5cqi;font-size:3.2cqi;color:#e4e4dc}
.shop-description{margin:5.5cqi 0;color:#b7b7bc;font-size:3.5cqi;line-height:1.5}
.shop-order{padding:4cqi;border:1px solid #303034;border-radius:3.5cqi;background:#161618}
.shop-order-head{display:flex;justify-content:space-between;gap:2cqi;font-size:4.3cqi;font-weight:600}
.shop-order p{margin:1.5cqi 0 4cqi;color:#b7b7bc;font-size:2.9cqi}
.shop-buy{display:flex;justify-content:space-between;padding:3cqi 4cqi;border-radius:7cqi;background:#f0eee8;color:#111114;font-size:4cqi;font-weight:600}
.shop-delivery{display:block;margin-top:3cqi;text-align:center;font-size:2.5cqi;color:#b7b7bc}
.shop-shelf{margin-top:5.5cqi;min-height:0;overflow:hidden;flex:1}
.shop-mini-books{display:flex;gap:3cqi;margin-top:3cqi}
.shop-mini-book{display:block;flex:1;aspect-ratio:2/3;padding:3cqi 2cqi;font:4cqi/1.15 var(--serif);border-radius:1cqi;color:#f4f4ed}
.shop-mini-book--blue{background:#26465d}.shop-mini-book--rust{background:#794425}.shop-mini-book--olive{background:#354626}
.shop-tabs{display:flex;justify-content:space-around;flex-shrink:0;margin:0 -4.4cqi;padding:4cqi 0 5cqi;border-top:1px solid #252528;background:#08080a}
.shop-tabs>span{display:flex;align-items:center;flex-direction:column;gap:1.5cqi;color:#94949a;font-size:2.5cqi}
.shop-tabs svg{width:5cqi;height:5cqi;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linejoin:round;stroke-linecap:round}
.shop-tabs .shop-tab-active{color:#f4f4f2}
.shot figcaption{
color:var(--muted);font-size:14px;line-height:1.6;max-width:34ch;
}
.shot figcaption b{color:var(--cream);font-weight:500}
.shots-note{
margin-top:34px;font-family:var(--mono);font-size:11px;line-height:1.7;
color:var(--faint);text-align:center;
}
@media (max-width:860px){
.shots{grid-template-columns:1fr;gap:40px;max-width:340px;margin-inline:auto}
}
/* =========================================================
27. Registry explorer
========================================================= */
.xp-filters{padding:18px 22px 4px;display:flex;flex-direction:column;gap:16px}
.xp-row{display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.xp-lab{
font-family:var(--mono);font-size:10px;letter-spacing:.14em;
text-transform:uppercase;color:var(--dim);flex:0 0 66px;
}
.xp-chips{display:flex;flex-wrap:wrap;gap:7px;flex:1 1 auto;min-width:0}
.xp-chip{
font-family:var(--mono);font-size:11px;color:var(--muted);
padding:6px 12px;min-height:28px;border-radius:999px;
border:1px solid var(--line-2);background:transparent;cursor:pointer;
transition:color .2s var(--ease),border-color .2s var(--ease),background .2s var(--ease);
}
.xp-chip:hover{color:var(--cream);border-color:var(--cream)}
.xp-chip[aria-pressed="true"]{background:var(--cream);border-color:var(--cream);color:#0B0B0D}
.xp-select{max-width:280px;height:34px;padding:0 10px;font-size:13px}
.xp-out{padding:18px 22px 24px;border-top:1px solid var(--line);margin-top:16px}
.xp-bar{display:flex;height:30px;border-radius:8px;overflow:hidden;background:var(--panel-2)}
.xp-seg{
display:flex;align-items:center;justify-content:center;
font-family:var(--mono);font-size:10.5px;min-width:0;overflow:hidden;
transition:width .35s var(--ease);
}
.xp-seg--confirmed{background:#7FB08A;color:#0B0B0D}
.xp-seg--notfound{background:var(--line-2);color:var(--muted)}
.xp-seg--rejected{background:#C9A0A0;color:#0B0B0D}
.xp-read{margin-top:14px;color:var(--muted);font-size:14.5px;line-height:1.65}
@media (prefers-reduced-motion:reduce){ .xp-seg{transition:none} }
@media (max-width:640px){
.xp-lab{flex-basis:100%}
.xp-select{max-width:100%;width:100%}
.xp-filters{padding:16px 16px 4px}
.xp-out{padding:16px}
}
/* =========================================================
28. The paper section.
One inverted section, in the same warm paper Trove reads on.
The signature is borrowed from inside the portfolio rather
than imported, so it means something: this is the surface
the companies are actually built around.
========================================================= */
.sec--paper{
background:#F4EFE3;
color:#161310;
padding-block:calc(var(--rhythm) * .92);
border-block:1px solid #E2D9C6;
position:relative;
}
.sec--paper::after{
content:"";position:absolute;inset:0;pointer-events:none;
background-image:var(--grain);opacity:.055;mix-blend-mode:multiply;
}
.sec--paper > .wrap{position:relative;z-index:1}
.sec--paper .h2{color:#161310}
.sec--paper .h2 em{
background:none;-webkit-text-fill-color:currentColor;color:#6B6459;
}
.sec--paper .cols{border-top-color:#DED4C1}
.sec--paper .col{border-left-color:#DED4C1}
.sec--paper .col-h{color:#161310}
.sec--paper .col-p{color:#5B5852}
@media (max-width:860px){
.sec--paper .col{border-left:0;border-top:1px solid #DED4C1}
.sec--paper .col:first-child{border-top:0}
}
/* =========================================================
16. Waitlist. One block per page, immediately before the
footer. It is a form, not a feature section: it borrows the
page's existing type roles and control sizes rather than
introducing a bigger set of its own.
========================================================= */
.sec--wl{padding:var(--rhythm) 0 calc(var(--rhythm)*.72)}
/* A step below .h2 on purpose. This is the last thing on the page,
not a rival to the section headings above it. */
.wl-h{
font-size:clamp(22px,2.2vw,30px);line-height:1.12;
letter-spacing:-.025em;font-weight:600;color:var(--cream);
text-align:center;
}
/* The site's rule is centered headings, body copy left aligned inside a
centered block. A form is body copy, so it centers as a block and its fields
stay left. Matching .sec > .wrap > .h2 rather than inventing an alignment. */
.wl{margin-top:26px;max-width:520px;margin-inline:auto}
.wl-label{
display:block;font-family:var(--mono);font-size:10.5px;letter-spacing:.12em;
text-transform:uppercase;color:var(--dim);margin-bottom:7px;
}
.wl-row{display:flex;gap:8px;align-items:stretch;flex-wrap:wrap}
.wl-input{
flex:1 1 220px;min-width:0;
background:var(--void);color:var(--cream);
border:1px solid var(--line-2);border-radius:9px;
padding:11px 13px;font:inherit;font-size:15px;
}
.wl-input::placeholder{color:var(--faint)}
.wl-input:focus-visible{outline:2px solid var(--cream);outline-offset:2px;border-color:var(--cream)}
.wl-input[aria-invalid="true"]{border-color:#FF6B6B}
.wl-row .btn{flex:0 0 auto}
.wl-fine{margin-top:10px;font-size:13px;line-height:1.55;color:var(--faint);max-width:52ch}
/* Ordinary checkboxes on one row. A bordered card per option was three times
the height for the same three words. */
.wl-set{border:0;padding:0;margin:0 0 20px}
.wl-legend{
font-family:var(--mono);font-size:10.5px;letter-spacing:.12em;
text-transform:uppercase;color:var(--dim);padding:0;margin-bottom:10px;
}
.wl-check{
display:inline-flex;gap:8px;align-items:center;
margin:0 20px 8px 0;font-size:15px;color:var(--muted);cursor:pointer;
}
.wl-check input{accent-color:var(--cream);width:15px;height:15px;flex:0 0 auto;margin:0}
.wl-check input:focus-visible{outline:2px solid var(--cream);outline-offset:2px}
.wl-check:hover{color:var(--cream)}
/* Off-screen rather than display:none, because a bot reading computed styles
skips a hidden field. Supplementary; the challenge is the real control. */
.wl-hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
/* An aria-live region has to exist before it has anything to announce. */
.wl-note{margin-top:12px;font-size:14px;line-height:1.55}
.wl-note:empty{margin-top:0}
.wl-note[data-state="ok"]{color:var(--cream)}
.wl-note[data-state="err"]{color:#FF9A9A}
.wl-note[data-state="busy"]{color:var(--muted)}
@media (max-width:560px){
.wl-row .btn{width:100%}
.wl-check{display:flex;margin-right:0}
}
/* The signup form's own challenge. interaction-only means Cloudflare paints
nothing for a visitor it clears silently, but it still reserves a box, so the
wrapper collapses until the widget actually has height. */
.wl-check-box{margin-top:14px}
.wl-check-box:not(:has(iframe[style*="height"])){margin-top:0}