@import url("tokens.css");
*,
*::before,
*::after {
box-sizing: border-box;
}
html,
body {
overflow-x: clip;
}
html {
-webkit-text-size-adjust: 100%;
scroll-behavior: smooth;
}
body {
margin: 0;
background: var(--color-paper);
color: var(--color-ink);
font-family: var(--font-body);
font-size: var(--text-base);
line-height: 1.6;
font-weight: 400;
-webkit-font-smoothing: antialiased;
font-variant-numeric: oldstyle-nums;
}
h1,
h2,
h3 {
font-family: var(--font-display);
font-weight: 600;
line-height: 1.08;
letter-spacing: -0.025em;
margin: 0;
min-width: 0;
overflow-wrap: break-word;
text-wrap: balance;
}
p {
margin: 0;
}
a {
color: inherit;
text-decoration: none;
}
img {
max-width: 100%;
display: block;
}
:focus-visible {
outline: 2px solid var(--color-focus);
outline-offset: 3px;
border-radius: 3px;
}
.wrap {
width: 100%;
max-width: 1180px;
margin-inline: auto;
padding-inline: clamp(1rem, 4vw, 2.5rem);
}
.kicker {
font-family: var(--font-mono);
font-size: var(--text-xs);
font-weight: 500;
letter-spacing: 0.16em;
text-transform: uppercase;
color: var(--color-accent);
margin: 0 0 var(--space-md);
}
.eyebrow-quiet {
font-family: var(--font-mono);
font-size: var(--text-xs);
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--color-ink-3);
}
.reveal {
opacity: 0;
transform: translateY(26px);
transition:
opacity 0.7s var(--ease-out),
transform 0.7s var(--ease-out);
transition-delay: var(--reveal-delay, 0s);
will-change: opacity, transform;
}
.reveal.is-in {
opacity: 1;
transform: none;
}
@media (prefers-reduced-motion: reduce) {
.reveal {
opacity: 1;
transform: none;
transition: none;
}
}
.btn {
display: inline-flex;
align-items: center;
gap: var(--space-2xs);
font-family: var(--font-display);
font-size: var(--text-sm);
font-weight: 500;
letter-spacing: -0.01em;
white-space: nowrap;
padding: 0.7rem 1.25rem;
border-radius: var(--radius-pill);
border: 1px solid transparent;
cursor: pointer;
transition:
background-color var(--dur-short) var(--ease-out),
border-color var(--dur-short) var(--ease-out),
transform var(--dur-short) var(--ease-out),
color var(--dur-short) var(--ease-out);
}
.btn--primary {
background: var(--color-accent);
color: var(--color-accent-ink);
box-shadow: 0 6px 20px oklch(48% 0.27 300 / 0.35);
}
.btn--primary:hover {
background: var(--color-accent-2);
transform: translateY(-1px);
box-shadow: 0 10px 28px oklch(48% 0.27 300 / 0.45);
}
.btn--primary:active {
transform: translateY(0);
}
.btn--ghost {
background: transparent;
color: var(--color-ink);
border-color: var(--color-rule);
}
.btn--ghost:hover {
border-color: var(--color-ink);
transform: translateY(-1px);
}
.btn--ghost:active {
transform: translateY(0);
}
.btn--lg {
font-size: var(--text-base);
padding: 0.85rem 1.6rem;
}
.btn--glow {
position: relative;
isolation: isolate;
}
.btn__label {
position: relative;
z-index: 2;
}
.btn--glow::before {
content: "";
position: absolute;
inset: 0;
z-index: 1;
border-radius: inherit;
padding: 1px;
background: linear-gradient(
135deg,
oklch(78% 0.09 300) 0%,
oklch(62% 0.18 297) 100%
);
-webkit-mask:
linear-gradient(#000 0 0) content-box,
linear-gradient(#000 0 0);
-webkit-mask-composite: xor;
mask-composite: exclude;
pointer-events: none;
}
.btn__ring {
position: absolute;
inset: 0;
z-index: 1;
border-radius: inherit;
padding: 1px;
overflow: hidden;
pointer-events: none;
-webkit-mask:
linear-gradient(#000 0 0) content-box,
linear-gradient(#000 0 0);
-webkit-mask-composite: xor;
mask-composite: exclude;
}
.btn__spin {
position: absolute;
top: 50%;
left: 50%;
width: 320%;
aspect-ratio: 1;
translate: -50% -50%;
background: conic-gradient(
from 0deg,
transparent 0deg,
transparent 280deg,
oklch(96% 0.05 300 / 0.85) 340deg,
transparent 360deg
);
animation: btn-arc-spin 3.4s linear infinite;
}
@keyframes btn-arc-spin {
to {
transform: rotate(360deg);
}
}
.tlink {
display: inline-flex;
align-items: center;
gap: 0.4em;
font-weight: 500;
color: var(--color-accent);
background-image: linear-gradient(var(--color-accent), var(--color-accent));
background-size: 0% 1px;
background-position: 0 100%;
background-repeat: no-repeat;
transition: background-size var(--dur-mid) var(--ease-out);
}
.tlink:hover {
background-size: 100% 1px;
}
.tlink .arrow {
transition: transform var(--dur-short) var(--ease-out);
}
.tlink:hover .arrow {
transform: translateX(3px);
}
.nav {
position: sticky;
top: 0;
z-index: var(--z-nav);
width: 100%;
background: color-mix(in oklch, var(--color-paper) 70%, transparent);
backdrop-filter: blur(16px) saturate(1.3);
-webkit-backdrop-filter: blur(16px) saturate(1.3);
border-bottom: 1px solid var(--color-rule);
}
.nav__inner {
display: flex;
align-items: center;
gap: var(--space-xl);
width: 100%;
max-width: 1180px;
margin-inline: auto;
padding: 0.85rem clamp(1rem, 4vw, 2.5rem);
}
.wordmark {
display: inline-flex;
align-items: center;
gap: 0.5em;
font-family: var(--font-display);
font-weight: 700;
font-size: var(--text-md);
letter-spacing: -0.03em;
color: var(--color-ink);
}
.wordmark__icon {
height: 1.45em;
width: auto;
display: block;
}
.nav__links {
display: flex;
gap: var(--space-md);
font-size: var(--text-xs);
font-weight: 500;
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--color-ink-2);
}
.nav__links a {
white-space: nowrap;
transition: color var(--dur-short) var(--ease-out);
}
.nav__links a:hover {
color: var(--color-ink);
}
.nav__actions {
margin-left: auto;
padding-left: var(--space-md);
display: flex;
align-items: center;
gap: var(--space-md);
}
.nav__login {
font-size: var(--text-xs);
font-weight: 500;
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--color-ink-2);
transition: color var(--dur-short) var(--ease-out);
}
.nav__login:hover {
color: var(--color-ink);
}
.nav .btn--primary {
border-radius: var(--radius-pill);
padding: 0.6rem 1.2rem;
font-size: var(--text-xs);
font-weight: 600;
letter-spacing: 0.1em;
text-transform: uppercase;
box-shadow: none;
}
.nav .btn--primary:hover {
box-shadow: 0 6px 18px oklch(48% 0.27 300 / 0.4);
}
.nav__burger {
display: none;
flex-direction: column;
justify-content: center;
gap: 4px;
width: 40px;
height: 40px;
margin: -6px -8px -6px 0;
background: none;
border: 0;
cursor: pointer;
}
.nav__burger span {
display: block;
width: 20px;
height: 2px;
margin-inline: auto;
border-radius: 2px;
background: var(--color-ink);
transition:
transform 0.25s var(--ease-out),
opacity 0.2s var(--ease-out);
}
.nav.is-open .nav__burger span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.nav.is-open .nav__burger span:nth-child(2) { opacity: 0; }
.nav.is-open .nav__burger span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }
.nav__drawer {
display: none;
flex-direction: column;
width: 100%;
max-width: 1180px;
margin-inline: auto;
padding-inline: clamp(1rem, 4vw, 2.5rem);
}
.nav__drawer a {
font-size: var(--text-sm);
font-weight: 500;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--color-ink-2);
padding: 0.85rem 0.2rem;
border-bottom: 1px solid var(--color-rule-soft);
transition: color var(--dur-short) var(--ease-out);
}
.nav__drawer a:hover { color: var(--color-ink); }
.nav__drawer .nav__login {
font-size: var(--text-sm);
}
.nav__drawer .btn--primary {
margin-top: var(--space-md);
width: 100%;
justify-content: center;
border-bottom: 0;
text-align: center;
color: var(--color-accent-ink);
}
.nav__drawer .btn--primary:hover {
color: var(--color-accent-ink);
}
.hero {
position: relative;
padding-top: var(--space-lg);
padding-bottom: var(--space-2xl);
overflow: clip;
}
.hero::before {
content: "";
position: absolute;
top: -18%;
left: 50%;
translate: -50% 0;
width: 90vw;
max-width: 900px;
aspect-ratio: 1.4;
background: radial-gradient(ellipse at center, var(--color-glow), transparent 60%);
pointer-events: none;
z-index: 0;
filter: blur(14px);
}
.hero .wrap {
position: relative;
z-index: 1;
}
.hero__badge {
display: inline-flex;
align-items: center;
gap: 0.55em;
padding: 0.4rem 0.85rem;
margin-bottom: var(--space-lg);
border: 1px solid var(--color-rule);
border-radius: var(--radius-pill);
background: color-mix(in oklch, var(--color-accent) 12%, transparent);
font-size: var(--text-sm);
color: var(--color-ink);
}
.hero__badge::before {
content: "";
width: 7px;
height: 7px;
border-radius: 50%;
background: var(--color-accent);
box-shadow: 0 0 0 3px color-mix(in oklch, var(--color-accent) 30%, transparent);
}
.hl {
color: var(--color-accent);
}
.hero__inner {
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
padding-block: var(--space-xl) var(--space-2xl);
}
.hero__title {
font-size: var(--text-display);
max-width: 18ch;
margin-top: var(--space-md);
}
.hero__lede {
margin-top: var(--space-lg);
font-size: var(--text-md);
line-height: 1.55;
color: var(--color-ink-2);
max-width: 56ch;
}
.hero__cta {
margin-top: var(--space-xl);
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: var(--space-sm);
}
.hero__note {
margin-top: var(--space-lg);
font-size: var(--text-sm);
letter-spacing: 0.02em;
color: var(--color-ink-3);
}
.proof-panel {
background: var(--color-paper-2);
border: 1px solid var(--color-rule);
border-radius: var(--radius-card);
padding: var(--space-lg);
box-shadow: 0 1px 2px oklch(22% 0.02 264 / 0.03), 0 18px 40px oklch(22% 0.02 264 / 0.05);
}
.proof-panel__head {
display: flex;
justify-content: space-between;
align-items: baseline;
padding-bottom: var(--space-sm);
border-bottom: 1px solid var(--color-rule);
}
.proof-panel__title {
font-family: var(--font-mono);
font-size: var(--text-xs);
letter-spacing: 0.1em;
text-transform: uppercase;
color: var(--color-ink-2);
}
.proof-panel__score-label {
font-family: var(--font-mono);
font-size: var(--text-xs);
color: var(--color-ink-3);
}
.rank-row {
display: grid;
grid-template-columns: 1.6rem 1fr auto;
align-items: center;
gap: var(--space-sm);
padding: 0.7rem 0;
border-bottom: 1px solid var(--color-rule-soft);
}
.rank-row:last-child {
border-bottom: 0;
}
.rank-row__n {
font-family: var(--font-mono);
font-size: var(--text-sm);
color: var(--color-ink-3);
font-variant-numeric: tabular-nums;
}
.rank-row__bar {
height: 6px;
border-radius: var(--radius-pill);
background: var(--color-paper-3);
overflow: hidden;
}
.rank-row__fill {
display: block;
height: 100%;
border-radius: var(--radius-pill);
background: var(--color-accent);
}
.rank-row__score {
font-family: var(--font-mono);
font-size: var(--text-sm);
color: var(--color-ink);
font-variant-numeric: tabular-nums;
}
.logos {
padding-block: var(--space-2xl);
border-top: 1px solid var(--color-rule);
}
.logos__stats {
text-align: center;
font-size: var(--text-lg);
font-weight: 500;
color: var(--color-ink);
margin-bottom: var(--space-2xs);
}
.logos__label {
text-align: center;
margin-bottom: var(--space-2xl);
}
.logos--stacked {
border-top: none;
padding-block: var(--space-xl) var(--space-3xl);
}
.logos--stacked .logos__text {
margin-top: var(--space-2xl);
text-align: center;
}
.logos--stacked .logos__stats {
margin: 0 0 var(--space-xs);
}
.logos--stacked .logos__label {
margin: 0;
}
.logos--stacked .marquee {
border-bottom: none;
}
.logos--stacked + .caps {
border-top: none;
}
.stats__intro {
text-align: center;
margin-bottom: var(--space-2xl);
}
.stats__intro .logos__stats {
margin-bottom: var(--space-xs);
}
.stats__intro .logos__label {
margin: 0;
}
.marquee {
position: relative;
overflow: hidden;
border-block: 1px solid var(--color-rule);
background: var(--color-paper-2);
padding-block: var(--space-2xl);
width: 100vw;
max-width: 100vw;
margin-inline: calc(50% - 50vw);
}
.marquee__track {
display: flex;
width: max-content;
gap: clamp(2.5rem, 6vw, 5rem);
animation: marquee-scroll 42s linear infinite;
}
.marquee__item {
display: flex;
align-items: center;
justify-content: center;
flex: 0 0 auto;
}
.marquee__item img {
height: 72px;
width: auto;
object-fit: contain;
opacity: 0.85;
transition: opacity var(--dur-mid) var(--ease-out);
}
.marquee__item img:hover {
opacity: 1;
}
@keyframes marquee-scroll {
from {
transform: translateX(0);
}
to {
transform: translateX(-50%);
}
}
@media (prefers-reduced-motion: reduce) {
.marquee__track {
animation: none;
flex-wrap: wrap;
justify-content: center;
gap: var(--space-xl) clamp(2rem, 5vw, 4rem);
}
}
.stats {
padding-block: var(--space-3xl);
}
.stats__grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: var(--space-lg);
}
.stat {
position: relative;
padding: var(--space-xl) var(--space-lg);
background: var(--color-paper-2);
border: 1px solid var(--color-rule);
border-radius: var(--radius-card);
overflow: hidden;
transition:
border-color var(--dur-short) var(--ease-out),
transform var(--dur-short) var(--ease-out);
}
.stat::after {
content: "";
position: absolute;
inset: auto -20% -60% -20%;
height: 80%;
background: radial-gradient(ellipse at center, color-mix(in oklch, var(--color-accent) 20%, transparent), transparent 70%);
opacity: 0;
transition: opacity var(--dur-mid) var(--ease-out);
pointer-events: none;
}
.stat:hover {
border-color: color-mix(in oklch, var(--color-accent) 55%, var(--color-rule));
transform: translateY(-3px);
}
.stat:hover::after {
opacity: 1;
}
.stat__num {
position: relative;
font-family: var(--font-mono);
font-size: clamp(2.5rem, 4vw, 3.4rem);
font-weight: 500;
letter-spacing: -0.04em;
font-variant-numeric: tabular-nums;
color: var(--color-ink);
line-height: 1;
}
.stat__num--pending {
color: var(--color-ink-3);
}
.stat__label {
position: relative;
margin-top: var(--space-sm);
font-size: var(--text-base);
line-height: 1.45;
color: var(--color-ink-2);
}
.stat__hint {
display: block;
margin-top: var(--space-3xs);
font-family: var(--font-mono);
font-size: var(--text-xs);
letter-spacing: 0.04em;
color: var(--color-ink-3);
}
.caps {
padding-block: var(--space-3xl);
border-top: 1px solid var(--color-rule);
}
.caps__intro {
max-width: 50ch;
margin: 0 auto var(--space-2xl);
text-align: center;
}
.caps__intro h2 {
font-size: var(--text-2xl);
}
.caps__intro p {
margin-top: var(--space-md);
font-size: var(--text-md);
color: var(--color-ink-2);
}
.dip {
display: grid;
grid-template-columns: 1fr 1fr;
gap: clamp(2rem, 5vw, 5rem);
align-items: center;
padding-block: var(--space-2xl);
}
.dip > *,
.hero__grid > *,
.compare > *,
.contact-grid > *,
.gsearch,
.srank,
.cgrowth,
.compose,
.hpanel,
.tcard {
min-width: 0;
}
.dip + .dip {
border-top: 1px solid var(--color-rule-soft);
}
.dip__text h3 {
font-size: var(--text-xl);
}
.dip__text p {
margin-top: var(--space-md);
font-size: var(--text-md);
line-height: 1.5;
color: var(--color-ink-2);
max-width: 40ch;
}
.dip__text .tlink {
margin-top: var(--space-lg);
}
.dip__num {
font-family: var(--font-mono);
font-size: var(--text-sm);
color: var(--color-accent);
letter-spacing: 0.1em;
}
.dip--rev .dip__text {
order: 2;
}
.motif {
aspect-ratio: 4 / 3;
border: 1px solid var(--color-rule);
border-radius: var(--radius-card);
background: var(--color-paper-2);
padding: var(--space-lg);
display: flex;
flex-direction: column;
justify-content: center;
gap: var(--space-sm);
overflow: hidden;
}
.bars {
display: flex;
flex-direction: column;
gap: var(--space-sm);
}
.bars__row {
display: grid;
grid-template-columns: 5ch 1fr 3ch;
align-items: center;
gap: var(--space-sm);
}
.bars__name {
font-family: var(--font-mono);
font-size: var(--text-xs);
color: var(--color-ink-3);
}
.bars__track {
height: 10px;
background: var(--color-paper-3);
border-radius: var(--radius-pill);
overflow: hidden;
}
.bars__fill {
display: block;
height: 100%;
background: var(--color-accent);
border-radius: var(--radius-pill);
}
.bars__val {
font-family: var(--font-mono);
font-size: var(--text-xs);
color: var(--color-ink-2);
text-align: right;
font-variant-numeric: tabular-nums;
}
.nodes {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: var(--space-sm);
align-items: center;
}
.node {
border: 1px solid var(--color-rule);
border-radius: var(--radius-input);
background: var(--color-paper);
padding: var(--space-sm) var(--space-2xs);
text-align: center;
font-family: var(--font-mono);
font-size: var(--text-xs);
color: var(--color-ink-2);
}
.node--core {
background: var(--color-accent);
color: var(--color-accent-ink);
border-color: var(--color-accent);
font-weight: 500;
}
.shot {
margin: 0;
border: 1px solid var(--color-rule);
border-radius: var(--radius-card);
overflow: hidden;
background: var(--color-paper-2);
box-shadow: 0 1px 2px oklch(0% 0 0 / 0.3), 0 24px 50px oklch(0% 0 0 / 0.35);
}
.shot img {
width: 100%;
height: auto;
display: block;
}
.peoplemap {
position: relative;
flex: 1;
width: 100%;
min-height: 240px;
}
.peoplemap__lines {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
overflow: visible;
}
.pline {
stroke: var(--color-accent);
stroke-width: 0.5;
stroke-dasharray: 2 3;
opacity: 0.55;
animation: pline-flow 2.4s linear infinite;
}
.pline--soft {
stroke: var(--color-rule);
opacity: 0.6;
animation-duration: 3.6s;
}
@keyframes pline-flow {
to {
stroke-dashoffset: -10;
}
}
.pnode {
position: absolute;
transform: translate(-50%, -50%);
animation: pnode-float 6s var(--ease-in-out) infinite alternate;
animation-delay: var(--d, 0s);
}
.pnode--avatar {
width: 52px;
height: 52px;
}
.pnode--avatar img {
width: 100%;
height: 100%;
border-radius: 50%;
object-fit: cover;
border: 2px solid var(--color-paper-3);
box-shadow: 0 4px 14px oklch(0% 0 0 / 0.4);
}
.pnode--dot {
width: 12px;
height: 12px;
border-radius: 50%;
background: var(--color-ink-3);
}
.pnode--hub {
width: 18px;
height: 18px;
border-radius: 50%;
background: var(--color-accent);
box-shadow: 0 0 0 0 color-mix(in oklch, var(--color-accent) 50%, transparent);
animation: pnode-pulse 2.4s var(--ease-out) infinite;
}
@keyframes pnode-float {
from {
transform: translate(-50%, -50%);
}
to {
transform: translate(-50%, calc(-50% - 8px));
}
}
@keyframes pnode-pulse {
0% {
box-shadow: 0 0 0 0 color-mix(in oklch, var(--color-accent) 50%, transparent);
}
70% {
box-shadow: 0 0 0 16px color-mix(in oklch, var(--color-accent) 0%, transparent);
}
100% {
box-shadow: 0 0 0 0 color-mix(in oklch, var(--color-accent) 0%, transparent);
}
}
.spec {
padding-block: var(--space-3xl);
border-top: 1px solid var(--color-rule);
}
.spec__head {
margin-bottom: var(--space-xl);
}
.spec__head h2 {
font-size: var(--text-2xl);
max-width: 24ch;
}
.spec__table {
width: 100%;
border-collapse: collapse;
}
.spec__table tr {
border-top: 1px solid var(--color-rule);
}
.spec__table tr:last-child {
border-bottom: 1px solid var(--color-rule);
}
.spec__table th {
text-align: left;
vertical-align: top;
padding: var(--space-md) var(--space-md) var(--space-md) 0;
font-family: var(--font-display);
font-weight: 600;
font-size: var(--text-md);
letter-spacing: -0.02em;
width: 30%;
}
.spec__table td {
padding: var(--space-md) 0;
color: var(--color-ink-2);
font-size: var(--text-base);
vertical-align: top;
}
.spec__table .spec__val {
font-family: var(--font-mono);
font-size: var(--text-sm);
color: var(--color-accent);
white-space: nowrap;
text-align: right;
font-variant-numeric: tabular-nums;
width: 18%;
}
.proof {
padding-block: var(--space-3xl);
border-top: 1px solid var(--color-rule);
}
.proof__head {
display: flex;
align-items: flex-end;
justify-content: space-between;
gap: var(--space-lg);
margin-bottom: var(--space-xl);
}
.proof__heading {
font-size: var(--text-2xl);
max-width: 26ch;
}
.tcar__ctrl {
display: flex;
gap: var(--space-2xs);
flex-shrink: 0;
}
.tcar__btn {
display: inline-flex;
align-items: center;
justify-content: center;
width: 44px;
height: 44px;
border-radius: var(--radius-pill);
border: 1px solid var(--color-rule);
background: var(--color-paper-2);
color: var(--color-ink-2);
cursor: pointer;
transition:
color var(--dur-short) var(--ease-out),
border-color var(--dur-short) var(--ease-out),
background var(--dur-short) var(--ease-out);
}
.tcar__btn:hover {
color: var(--color-accent-ink);
background: var(--color-accent);
border-color: var(--color-accent);
}
.tcar__viewport {
overflow: hidden;
border-radius: var(--radius-card);
}
.tcar__track {
display: flex;
margin: 0;
padding: 0;
list-style: none;
transition: transform 0.55s var(--ease-out);
}
.tcard {
flex: 0 0 100%;
min-width: 0;
box-sizing: border-box;
display: flex;
flex-direction: column;
gap: var(--space-xl);
padding: clamp(var(--space-lg), 4vw, var(--space-2xl));
background:
radial-gradient(120% 140% at 0% 0%, color-mix(in oklch, var(--color-accent) 9%, transparent), transparent 55%),
var(--color-paper-2);
border: 1px solid var(--color-rule);
border-radius: var(--radius-card);
}
.tcard__quote {
position: relative;
font-size: clamp(var(--text-md), 1.6vw, var(--text-lg));
line-height: 1.5;
color: var(--color-ink);
padding-top: 2.6rem;
max-width: 60ch;
}
.tcard__quote::before {
content: "“";
position: absolute;
top: -0.35em;
left: -0.04em;
font-family: var(--font-display);
font-size: 4rem;
line-height: 1;
color: var(--color-accent);
}
.tcard__by {
display: flex;
align-items: center;
gap: var(--space-sm);
margin-top: auto;
}
.tcard__avatar {
width: 52px;
height: 52px;
border-radius: 50%;
object-fit: cover;
flex-shrink: 0;
background: var(--color-paper-3);
border: 2px solid color-mix(in oklch, var(--color-accent) 35%, transparent);
}
.tcard__name {
display: block;
font-weight: 600;
color: var(--color-ink);
}
.tcard__role {
display: block;
font-size: var(--text-sm);
color: var(--color-ink-2);
margin-top: 2px;
}
.tcar__dots {
display: flex;
justify-content: center;
gap: var(--space-2xs);
margin-top: var(--space-lg);
}
.tcar__dot {
width: 8px;
height: 8px;
padding: 0;
border: 0;
border-radius: var(--radius-pill);
background: var(--color-rule);
cursor: pointer;
transition:
width var(--dur-short) var(--ease-out),
background var(--dur-short) var(--ease-out);
}
.tcar__dot[aria-current="true"] {
width: 26px;
background: var(--color-accent);
}
.cta {
padding-block: var(--space-3xl);
border-top: 1px solid var(--color-rule);
text-align: center;
}
.cta h2 {
font-size: var(--text-2xl);
max-width: 26ch;
margin-inline: auto;
}
.cta p {
margin-top: var(--space-md);
color: var(--color-ink-2);
font-size: var(--text-md);
}
.cta__btn {
margin-top: var(--space-xl);
}
.foot {
background: var(--color-paper-2);
color: var(--color-ink-2);
border-top: 1px solid var(--color-rule);
padding-block: var(--space-2xl);
}
.foot__top {
display: grid;
grid-template-columns: 1.4fr 1fr 1fr 1.2fr;
gap: var(--space-xl);
padding-bottom: var(--space-2xl);
border-bottom: 1px solid var(--foot-rule);
}
.foot__brand .wordmark {
color: var(--color-ink);
font-size: var(--text-lg);
}
.foot__tag {
margin-top: var(--space-md);
color: var(--foot-mute);
font-size: var(--text-sm);
max-width: 28ch;
}
.foot__col h4 {
font-family: var(--font-mono);
font-size: var(--text-xs);
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--foot-faint);
margin: 0 0 var(--space-md);
font-weight: 500;
}
.foot__col ul {
list-style: none;
margin: 0;
padding: 0;
display: flex;
flex-direction: column;
gap: var(--space-2xs);
}
.foot__col a {
color: var(--foot-link);
font-size: var(--text-sm);
transition: color var(--dur-short) var(--ease-out);
}
.foot__col a:hover {
color: var(--color-ink);
}
.foot__addr {
color: var(--foot-mute);
font-size: var(--text-sm);
font-style: normal;
line-height: 1.6;
}
.foot__addr a {
color: var(--foot-link-strong);
}
.foot__bottom {
display: flex;
justify-content: space-between;
align-items: center;
flex-wrap: wrap;
gap: var(--space-sm);
padding-top: var(--space-lg);
font-size: var(--text-sm);
color: var(--foot-faint);
}
@media (max-width: 60rem) {
.dip {
grid-template-columns: 1fr;
}
.proof__head {
flex-direction: column;
align-items: flex-start;
gap: var(--space-md);
}
.dip {
gap: var(--space-lg);
}
.dip--rev .dip__text {
order: 0;
}
.nav__links,
.nav__actions > .nav__login,
.nav__actions > .btn--primary {
display: none;
}
.nav__burger {
display: flex;
}
.nav.is-open .nav__drawer {
display: flex;
padding-top: var(--space-sm);
padding-bottom: var(--space-lg);
border-top: 1px solid var(--color-rule);
}
.foot__top {
grid-template-columns: 1fr 1fr;
gap: var(--space-lg);
}
.foot__brand {
grid-column: 1 / -1;
}
}
@media (max-width: 40rem) {
.hero__title {
font-size: var(--text-display-s);
}
.stats__grid {
grid-template-columns: 1fr;
gap: var(--space-xl);
}
.hero__cta .btn {
flex: 1 1 auto;
justify-content: center;
}
.spec__table th {
width: auto;
}
.foot__top {
grid-template-columns: 1fr;
}
}
@media (prefers-reduced-motion: reduce) {
html {
scroll-behavior: auto;
}
*,
*::before,
*::after {
animation-duration: 0.001ms !important;
transition-duration: 0.001ms !important;
}
}
.hero--sub {
padding-top: var(--space-xl);
padding-bottom: var(--space-xl);
}
.hero--sub .hero__title {
font-size: var(--text-display-s);
max-width: 20ch;
}
.section {
padding-block: var(--space-3xl);
border-top: 1px solid var(--color-rule);
}
.section__head {
max-width: 52ch;
margin-bottom: var(--space-2xl);
}
.section__head h2 {
font-size: var(--text-2xl);
}
.section__head p {
margin-top: var(--space-md);
max-width: 42ch;
font-size: var(--text-md);
color: var(--color-ink-2);
}
.metric-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
gap: var(--space-lg);
}
.metric {
padding: var(--space-lg);
background: var(--color-paper-2);
border: 1px solid var(--color-rule);
border-radius: var(--radius-card);
}
.metric__num {
font-family: var(--font-mono);
font-size: var(--text-2xl);
font-weight: 500;
letter-spacing: -0.03em;
color: var(--color-accent);
font-variant-numeric: tabular-nums;
}
.metric__label {
margin-top: var(--space-2xs);
font-size: var(--text-sm);
color: var(--color-ink-2);
line-height: 1.45;
}
.compare {
display: grid;
grid-template-columns: 1fr 1fr;
gap: var(--space-lg);
}
.compare__col {
padding: var(--space-xl);
border-radius: var(--radius-card);
border: 1px solid var(--color-rule);
}
.compare__col--old {
background: transparent;
}
.compare__col--new {
background: color-mix(in oklch, var(--color-accent) 10%, var(--color-paper-2));
border-color: color-mix(in oklch, var(--color-accent) 45%, var(--color-rule));
}
.compare__tag {
font-family: var(--font-mono);
font-size: var(--text-xs);
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--color-ink-3);
margin-bottom: var(--space-md);
}
.compare__col--new .compare__tag {
color: var(--color-accent);
}
.compare__list {
list-style: none;
margin: 0;
padding: 0;
display: flex;
flex-direction: column;
gap: var(--space-sm);
}
.compare__list li {
position: relative;
padding-left: 1.6rem;
font-size: var(--text-base);
color: var(--color-ink-2);
line-height: 1.45;
}
.compare__list li::before {
position: absolute;
left: 0;
top: 0.05em;
font-family: var(--font-mono);
}
.compare__col--old .compare__list li::before {
content: "—";
color: var(--color-ink-3);
}
.compare__col--new .compare__list li::before {
content: "✓";
color: var(--color-accent);
}
.cardgrid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
gap: var(--space-lg);
}
.icard {
padding: var(--space-lg);
background: var(--color-paper-2);
border: 1px solid var(--color-rule);
border-radius: var(--radius-card);
transition:
border-color var(--dur-short) var(--ease-out),
transform var(--dur-short) var(--ease-out);
}
.icard:hover {
border-color: color-mix(in oklch, var(--color-accent) 50%, var(--color-rule));
transform: translateY(-3px);
}
.icard__n {
font-family: var(--font-mono);
font-size: var(--text-xs);
letter-spacing: 0.12em;
color: var(--color-accent);
}
.icard h3 {
margin-top: var(--space-xs);
font-size: var(--text-lg);
}
.icard p {
margin-top: var(--space-sm);
font-size: var(--text-base);
line-height: 1.5;
color: var(--color-ink-2);
}
.intg-featured {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
gap: var(--space-lg);
}
.intg-card {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: var(--space-md);
padding: var(--space-lg);
background: var(--color-paper-2);
border: 1px solid var(--color-rule);
border-radius: var(--radius-card);
transition: border-color var(--dur-short) var(--ease-out);
}
.intg-card:hover {
border-color: color-mix(in oklch, var(--color-accent) 50%, var(--color-rule));
}
.intg-card__logo {
width: 100%;
max-width: 188px;
height: 64px;
box-sizing: border-box;
padding: 11px 15px;
object-fit: contain;
object-position: left center;
background: #0d1018;
border: 1px solid var(--color-rule);
border-radius: 12px;
}
.intg-card__name {
font-weight: 600;
}
.intg-card__cat {
font-family: var(--font-mono);
font-size: var(--text-xs);
letter-spacing: 0.1em;
text-transform: uppercase;
color: var(--color-ink-3);
}
.intg-cat {
margin-top: var(--space-2xl);
}
.intg-cat__label {
font-family: var(--font-mono);
font-size: var(--text-xs);
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--color-ink-3);
margin-bottom: var(--space-lg);
}
.intg-logos {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
gap: var(--space-md);
}
.intg-logos__cell {
display: flex;
align-items: center;
gap: var(--space-sm);
padding: var(--space-md);
background: var(--color-paper-2);
border: 1px solid var(--color-rule);
border-radius: var(--radius-input);
}
.intg-logos__cell img {
height: 36px;
width: 36px;
object-fit: contain;
flex-shrink: 0;
background: #0d1018;
border: 1px solid var(--color-rule);
border-radius: 8px;
padding: 5px;
}
.intg-logos__cell span {
font-size: var(--text-sm);
color: var(--color-ink-2);
}
.team-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
gap: var(--space-lg);
}
.member {
text-align: center;
}
.member__photo,
.member__fallback {
width: 96px;
height: 96px;
border-radius: 50%;
object-fit: cover;
margin: 0 auto var(--space-md);
background: var(--color-paper-3);
border: 1px solid var(--color-rule);
}
.member__fallback {
display: flex;
align-items: center;
justify-content: center;
font-family: var(--font-display);
font-weight: 600;
font-size: var(--text-lg);
color: var(--color-accent);
}
.member__name {
font-weight: 600;
}
.member__role {
margin-top: var(--space-3xs);
font-size: var(--text-sm);
color: var(--color-ink-2);
line-height: 1.4;
}
.member--bio {
cursor: pointer;
border-radius: var(--radius-card);
padding: var(--space-md) var(--space-sm) var(--space-sm);
transition:
background var(--dur-short) var(--ease-out),
transform var(--dur-short) var(--ease-out);
}
.member--bio:hover,
.member--bio:focus-visible {
background: var(--color-paper-2);
transform: translateY(-3px);
outline: none;
}
.member--bio:focus-visible {
box-shadow: 0 0 0 2px var(--color-focus);
}
.member__readbio {
display: inline-flex;
align-items: center;
gap: 0.3em;
margin-top: var(--space-xs);
font-family: var(--font-mono);
font-size: var(--text-xs);
letter-spacing: 0.04em;
color: var(--color-accent);
opacity: 0.85;
transition: opacity var(--dur-short) var(--ease-out);
}
.member__readbio-arr {
transition: transform var(--dur-short) var(--ease-out);
}
.member--bio:hover .member__readbio,
.member--bio:focus-visible .member__readbio {
opacity: 1;
}
.member--bio:hover .member__readbio-arr {
transform: translateX(3px);
}
.mbio {
position: fixed;
inset: 0;
z-index: var(--z-modal, 1000);
display: flex;
align-items: center;
justify-content: center;
padding: var(--space-lg);
}
.mbio[hidden] {
display: none;
}
.mbio__overlay {
position: absolute;
inset: 0;
background: oklch(0% 0 0 / 0.6);
backdrop-filter: blur(4px);
-webkit-backdrop-filter: blur(4px);
opacity: 0;
transition: opacity 0.22s var(--ease-out);
}
.mbio.is-open .mbio__overlay {
opacity: 1;
}
.mbio__panel {
position: relative;
width: 100%;
max-width: 560px;
max-height: 86vh;
overflow-y: auto;
background: var(--color-paper-2);
border: 1px solid var(--color-rule);
border-radius: var(--radius-card);
padding: var(--space-2xl) var(--space-xl) var(--space-xl);
box-shadow: 0 40px 100px oklch(0% 0 0 / 0.55);
opacity: 0;
transform: translateY(16px) scale(0.98);
transition:
opacity 0.22s var(--ease-out),
transform 0.22s var(--ease-out);
}
.mbio.is-open .mbio__panel {
opacity: 1;
transform: none;
}
.mbio__close {
position: absolute;
top: var(--space-sm);
right: var(--space-sm);
display: flex;
align-items: center;
justify-content: center;
width: 38px;
height: 38px;
border: 0;
border-radius: 50%;
background: var(--color-paper-3);
color: var(--color-ink-2);
cursor: pointer;
transition:
background var(--dur-short) var(--ease-out),
color var(--dur-short) var(--ease-out);
}
.mbio__close:hover {
background: var(--color-accent);
color: var(--color-accent-ink);
}
.mbio__head {
display: flex;
align-items: center;
gap: var(--space-md);
padding-bottom: var(--space-md);
margin-bottom: var(--space-md);
border-bottom: 1px solid var(--color-rule-soft);
}
.mbio__photo {
width: 72px;
height: 72px;
border-radius: 50%;
object-fit: cover;
flex-shrink: 0;
background: var(--color-paper-3);
border: 1px solid var(--color-rule);
}
.mbio__name {
font-family: var(--font-display);
font-weight: 700;
font-size: var(--text-lg);
color: var(--color-ink);
}
.mbio__role {
margin-top: 2px;
font-size: var(--text-sm);
color: var(--color-ink-2);
}
.mbio__li {
display: inline-flex;
align-items: center;
gap: 0.4em;
margin-top: var(--space-xs);
font-size: var(--text-xs);
font-weight: 600;
letter-spacing: 0.04em;
color: var(--color-accent);
}
.mbio__li:hover {
text-decoration: underline;
}
.mbio__body {
font-size: var(--text-base);
line-height: 1.65;
color: var(--color-ink-2);
}
.mbio__body p {
margin: 0 0 0.9em;
}
.mbio__body p:last-child {
margin-bottom: 0;
}
.mbio__body strong {
color: var(--color-ink);
}
@media (max-width: 40rem) {
.mbio {
padding: 0;
align-items: flex-end;
}
.mbio__panel {
max-width: none;
max-height: 92vh;
border-radius: var(--radius-card) var(--radius-card) 0 0;
padding: var(--space-xl) var(--space-lg) var(--space-lg);
}
.mbio__head {
flex-direction: column;
text-align: center;
align-items: center;
}
}
@media (prefers-reduced-motion: reduce) {
.mbio__overlay,
.mbio__panel {
transition: none;
}
}
.contact-grid {
display: grid;
grid-template-columns: 0.9fr 1.1fr;
gap: clamp(2rem, 5vw, 5rem);
align-items: start;
}
.contact-methods {
display: flex;
flex-direction: column;
gap: var(--space-lg);
}
.contact-method__label {
font-family: var(--font-mono);
font-size: var(--text-xs);
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--color-ink-3);
}
.contact-method__value {
margin-top: var(--space-3xs);
font-size: var(--text-md);
color: var(--color-ink);
}
.contact-method__value a {
color: var(--color-accent);
}
.form {
display: grid;
grid-template-columns: 1fr 1fr;
gap: var(--space-md);
padding: var(--space-xl);
background: var(--color-paper-2);
border: 1px solid var(--color-rule);
border-radius: var(--radius-card);
}
.field {
display: flex;
flex-direction: column;
gap: var(--space-2xs);
}
.field--full {
grid-column: 1 / -1;
}
.field label {
font-size: var(--text-sm);
color: var(--color-ink-2);
}
.field input,
.field textarea {
font-family: var(--font-body);
font-size: var(--text-base);
color: var(--color-ink);
background: var(--color-paper);
border: 1px solid var(--color-rule);
border-radius: var(--radius-input);
padding: 0.7rem 0.9rem;
transition: border-color var(--dur-short) var(--ease-out);
}
.field input:focus,
.field textarea:focus {
outline: none;
border-color: var(--color-accent);
}
.field textarea {
resize: vertical;
min-height: 120px;
}
@media (max-width: 60rem) {
.compare,
.contact-grid,
.form {
grid-template-columns: 1fr;
}
}
.shot img {
cursor: zoom-in;
}
.lightbox {
position: fixed;
inset: 0;
z-index: var(--z-overlay);
display: none;
align-items: center;
justify-content: center;
padding: clamp(1rem, 5vw, 4rem);
background: oklch(8% 0.02 268 / 0.86);
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
cursor: zoom-out;
}
.lightbox.open {
display: flex;
}
.lightbox img {
max-width: 100%;
max-height: 100%;
border-radius: var(--radius-card);
border: 1px solid var(--color-rule);
box-shadow: 0 30px 90px oklch(0% 0 0 / 0.6);
}
.lightbox__hint {
position: fixed;
bottom: var(--space-lg);
left: 50%;
transform: translateX(-50%);
font-family: var(--font-mono);
font-size: var(--text-xs);
letter-spacing: 0.1em;
text-transform: uppercase;
color: var(--color-ink-3);
}
.hero-search {
display: flex;
align-items: center;
gap: var(--space-sm);
width: min(100%, 640px);
margin: var(--space-xl) auto 0;
padding: 0.8rem 0.8rem 0.8rem 1.15rem;
text-align: left;
background: color-mix(in oklch, var(--color-paper-2) 80%, transparent);
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
border: 1px solid var(--color-rule);
border-radius: var(--radius-pill);
box-shadow: 0 14px 50px oklch(48% 0.27 300 / 0.14);
}
.hero-search__spark {
width: 18px;
height: 18px;
flex-shrink: 0;
color: var(--color-accent);
}
.hero-search__q {
flex: 1;
min-width: 0;
display: flex;
align-items: center;
font-size: var(--text-base);
color: var(--color-ink-2);
white-space: nowrap;
overflow: hidden;
}
.hero-search__caret {
display: inline-block;
width: 2px;
height: 1.15em;
margin-left: 2px;
background: var(--color-accent);
animation: hero-caret 1s steps(1) infinite;
}
@keyframes hero-caret {
50% {
opacity: 0;
}
}
.hero-search__btn {
width: 36px;
height: 36px;
flex-shrink: 0;
display: flex;
align-items: center;
justify-content: center;
border-radius: 50%;
background: var(--color-accent);
color: var(--color-accent-ink);
box-shadow: 0 4px 14px oklch(48% 0.27 300 / 0.4);
}
@media (prefers-reduced-motion: reduce) {
.hero-search__caret {
animation: none;
}
}
body {
background:
radial-gradient(80vw 40vh at 50% -8%, var(--page-glow-1), transparent 60%),
radial-gradient(58vw 48vh at 14% 22%, var(--page-glow-2), transparent 60%),
radial-gradient(52vw 46vh at 92% 82%, var(--page-glow-2), transparent 62%),
var(--color-paper);
background-attachment: fixed;
}
body::after {
content: "";
position: fixed;
inset: 0;
z-index: 90;
pointer-events: none;
opacity: 0.045;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
background-size: 180px 180px;
}
@media (prefers-reduced-motion: reduce) {
body {
background-attachment: scroll;
}
}
.srank {
align-self: stretch;
background: var(--color-paper-2);
border: 1px solid var(--color-rule);
border-radius: var(--radius-card);
padding: var(--space-lg);
box-shadow: 0 1px 2px oklch(0% 0 0 / 0.3), 0 22px 50px oklch(0% 0 0 / 0.32);
}
.srank__head {
display: flex;
align-items: baseline;
justify-content: space-between;
gap: var(--space-sm);
padding-bottom: var(--space-sm);
border-bottom: 1px solid var(--color-rule);
margin-bottom: var(--space-2xs);
}
.srank__title {
font-family: var(--font-mono);
font-size: var(--text-xs);
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--color-accent);
}
.srank__meta {
font-family: var(--font-mono);
font-size: var(--text-xs);
color: var(--color-ink-3);
}
.srow {
display: grid;
grid-template-columns: 1.8rem 36px 1fr auto;
align-items: center;
gap: var(--space-sm);
padding: 0.7rem 0;
border-bottom: 1px solid var(--color-rule-soft);
opacity: 0;
transform: translateY(20px);
transition:
opacity 0.5s var(--ease-out),
transform 0.5s var(--ease-out);
transition-delay: calc(var(--i) * 0.12s);
}
.srow:last-child {
border-bottom: 0;
}
.srank.is-in .srow {
opacity: 1;
transform: none;
}
.srow__rank {
font-family: var(--font-mono);
font-size: var(--text-sm);
color: var(--color-ink-3);
font-variant-numeric: tabular-nums;
}
.srow__av {
width: 36px;
height: 36px;
border-radius: 50%;
object-fit: cover;
background: var(--color-paper-3);
border: 1px solid var(--color-rule);
}
.srow__body {
min-width: 0;
display: flex;
flex-direction: column;
gap: 7px;
}
.srow__name {
font-size: var(--text-sm);
color: var(--color-ink);
}
.srow__track {
height: 6px;
background: var(--color-paper-3);
border-radius: var(--radius-pill);
overflow: hidden;
}
.srow__fill {
display: block;
height: 100%;
width: 0;
background: var(--color-accent);
border-radius: var(--radius-pill);
transition: width 0.9s var(--ease-out);
transition-delay: calc(var(--i) * 0.12s + 0.12s);
}
.srank.is-in .srow__fill {
width: var(--w);
}
.srow__score {
font-family: var(--font-mono);
font-size: var(--text-sm);
color: var(--color-ink);
font-variant-numeric: tabular-nums;
}
.grec {
align-self: stretch;
background: var(--color-paper-2);
border: 1px solid var(--color-rule);
border-radius: var(--radius-card);
padding: var(--space-lg);
box-shadow: 0 1px 2px oklch(0% 0 0 / 0.3), 0 22px 50px oklch(0% 0 0 / 0.32);
}
.grec__head {
display: flex;
align-items: center;
gap: var(--space-sm);
padding-bottom: var(--space-md);
border-bottom: 1px solid var(--color-rule);
margin-bottom: var(--space-2xs);
}
.grec__av {
width: 44px;
height: 44px;
border-radius: 50%;
flex-shrink: 0;
object-fit: cover;
background: var(--color-paper-3);
border: 1px solid var(--color-rule);
}
.grec__name {
font-weight: 600;
color: var(--color-ink);
}
.grec__role {
font-size: var(--text-sm);
color: var(--color-ink-2);
}
.grec__badge {
margin-left: auto;
display: inline-flex;
align-items: center;
gap: 0.45em;
flex-shrink: 0;
font-family: var(--font-mono);
font-size: var(--text-xs);
letter-spacing: 0.06em;
color: var(--color-accent);
padding: 0.32rem 0.6rem;
border-radius: var(--radius-pill);
background: color-mix(in oklch, var(--color-accent) 14%, transparent);
}
.grec__dot {
width: 7px;
height: 7px;
border-radius: 50%;
background: var(--color-accent);
animation: grec-pulse 1.1s var(--ease-out) infinite;
}
@keyframes grec-pulse {
0% { box-shadow: 0 0 0 0 color-mix(in oklch, var(--color-accent) 55%, transparent); }
70% { box-shadow: 0 0 0 7px color-mix(in oklch, var(--color-accent) 0%, transparent); }
100% { box-shadow: 0 0 0 0 color-mix(in oklch, var(--color-accent) 0%, transparent); }
}
.grec--done .grec__dot {
animation: none;
background: oklch(72% 0.17 150);
}
.grec__field {
display: grid;
grid-template-columns: 1fr auto;
gap: var(--space-sm);
align-items: center;
padding: 0.7rem 0;
border-bottom: 1px solid var(--color-rule-soft);
opacity: 0;
transform: translateY(14px);
transition:
opacity 0.5s var(--ease-out),
transform 0.5s var(--ease-out);
transition-delay: calc(var(--i) * 0.14s);
}
.grec__field:last-child {
border-bottom: 0;
}
.grec.is-in .grec__field {
opacity: 1;
transform: none;
}
.grec__main {
min-width: 0;
display: flex;
flex-direction: column;
gap: 3px;
}
.grec__k {
font-family: var(--font-mono);
font-size: var(--text-xs);
letter-spacing: 0.1em;
text-transform: uppercase;
color: var(--color-ink-3);
}
.grec__v {
font-size: var(--text-sm);
color: var(--color-ink);
}
.grec__chips {
display: flex;
flex-wrap: wrap;
gap: 6px;
}
.grec__chips i {
font-style: normal;
font-size: var(--text-xs);
padding: 2px 9px;
border-radius: var(--radius-pill);
background: var(--color-paper-3);
color: var(--color-ink-2);
}
.grec__src {
font-family: var(--font-mono);
font-size: var(--text-xs);
color: var(--color-ink-3);
white-space: nowrap;
flex-shrink: 0;
}
.gsearch {
align-self: stretch;
background: var(--color-paper-2);
border: 1px solid var(--color-rule);
border-radius: var(--radius-card);
padding: var(--space-lg);
box-shadow: 0 1px 2px oklch(0% 0 0 / 0.3), 0 22px 50px oklch(0% 0 0 / 0.32);
}
.gsearch__bar {
display: flex;
align-items: center;
gap: var(--space-sm);
padding: 0.75rem 0.85rem;
background: var(--color-paper);
border: 1px solid var(--color-rule);
border-radius: var(--radius-pill);
}
.gsearch__spark {
width: 16px;
height: 16px;
flex-shrink: 0;
color: var(--color-accent);
}
.gsearch__q {
flex: 1;
min-width: 0;
display: block;
font-size: var(--text-sm);
line-height: 1.5;
color: var(--color-ink);
white-space: normal;
}
.gsearch__caret {
display: inline-block;
width: 2px;
height: 1.1em;
margin-left: 1px;
background: var(--color-accent);
animation: hero-caret 1s steps(1) infinite;
}
.gsearch__go {
width: 28px;
height: 28px;
flex-shrink: 0;
display: flex;
align-items: center;
justify-content: center;
border-radius: 50%;
background: var(--color-accent);
color: var(--color-accent-ink);
}
.gsearch__steps {
display: flex;
flex-direction: column;
gap: var(--space-2xs);
margin-top: var(--space-md);
}
.gstep {
display: flex;
align-items: center;
gap: var(--space-sm);
font-size: var(--text-sm);
color: var(--color-ink-2);
opacity: 0;
transform: translateY(6px);
transition:
opacity 0.3s var(--ease-out),
transform 0.3s var(--ease-out);
}
.gstep.show {
opacity: 1;
transform: none;
}
.gstep__ic {
width: 16px;
height: 16px;
flex-shrink: 0;
border-radius: 50%;
border: 2px solid var(--color-rule);
border-top-color: var(--color-accent);
animation: gstep-spin 0.7s linear infinite;
position: relative;
}
@keyframes gstep-spin {
to {
transform: rotate(360deg);
}
}
.gstep.done .gstep__ic {
border-color: oklch(72% 0.17 150);
background: oklch(72% 0.17 150);
animation: none;
}
.gstep.done .gstep__ic::after {
content: "";
position: absolute;
left: 4.5px;
top: 1.5px;
width: 4px;
height: 8px;
border: solid oklch(20% 0.04 150);
border-width: 0 2px 2px 0;
transform: rotate(45deg);
}
.gsearch__results {
display: flex;
flex-direction: column;
gap: var(--space-sm);
margin-top: var(--space-md);
}
.gcard {
display: flex;
gap: var(--space-sm);
padding: var(--space-sm);
background: var(--color-paper);
border: 1px solid var(--color-rule);
border-radius: var(--radius-input);
opacity: 0;
transform: translateY(16px);
transition:
opacity 0.45s var(--ease-out),
transform 0.45s var(--ease-out);
}
.gcard.in {
opacity: 1;
transform: none;
}
.gcard__av {
width: 38px;
height: 38px;
flex-shrink: 0;
border-radius: 50%;
object-fit: cover;
border: 1px solid var(--color-rule);
}
.gcard__main {
min-width: 0;
}
.gcard__name {
font-weight: 600;
font-size: var(--text-sm);
color: var(--color-ink);
}
.gcard__role {
font-size: var(--text-xs);
color: var(--color-ink-2);
margin-top: 1px;
}
.gcard__why {
margin-top: 6px;
font-size: var(--text-xs);
line-height: 1.45;
color: var(--color-ink-3);
}
.gcard__why em {
font-style: normal;
color: var(--color-accent);
}
.gsearch__summary {
margin-top: var(--space-md);
padding-left: var(--space-sm);
border-left: 2px solid var(--color-accent);
font-size: var(--text-sm);
line-height: 1.5;
color: var(--color-ink-2);
opacity: 0;
transform: translateY(6px);
transition:
opacity 0.4s var(--ease-out),
transform 0.4s var(--ease-out);
}
.gsearch__summary.show {
opacity: 1;
transform: none;
}
.gsearch__summary em {
font-style: normal;
font-weight: 600;
color: var(--color-ink);
}
.gsearch__more {
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--space-sm);
margin-top: var(--space-sm);
padding-top: var(--space-sm);
border-top: 1px solid var(--color-rule-soft);
font-size: var(--text-sm);
font-weight: 500;
color: var(--color-accent);
opacity: 0;
transition: opacity 0.4s var(--ease-out);
}
.gsearch__more.show {
opacity: 1;
}
.tmap {
align-self: stretch;
background: var(--color-paper-2);
border: 1px solid var(--color-rule);
border-radius: var(--radius-card);
padding: var(--space-lg);
box-shadow: 0 1px 2px oklch(0% 0 0 / 0.3), 0 22px 50px oklch(0% 0 0 / 0.32);
}
.tmap__head {
display: flex;
align-items: center;
justify-content: space-between;
padding-bottom: var(--space-sm);
border-bottom: 1px solid var(--color-rule);
}
.tmap__title {
font-family: var(--font-mono);
font-size: var(--text-xs);
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--color-ink-2);
}
.tmap__live {
display: inline-flex;
align-items: center;
gap: 0.5em;
font-family: var(--font-mono);
font-size: var(--text-xs);
letter-spacing: 0.1em;
text-transform: uppercase;
color: oklch(72% 0.17 150);
}
.tmap__livedot {
width: 7px;
height: 7px;
border-radius: 50%;
background: oklch(72% 0.17 150);
animation: grec-pulse 1.4s var(--ease-out) infinite;
}
.tmap__graph {
position: relative;
width: 100%;
aspect-ratio: 7 / 5;
margin-top: var(--space-sm);
}
.tmap__lines {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
overflow: visible;
}
.tline {
stroke: var(--color-accent);
stroke-width: 0.6;
stroke-dasharray: 140;
stroke-dashoffset: 140;
opacity: 0.7;
transition: stroke-dashoffset 1.1s var(--ease-out);
}
.tline--soft {
stroke: var(--color-rule);
opacity: 0.8;
}
.tmap.is-in .tline {
stroke-dashoffset: 0;
}
.tnode {
position: absolute;
transform: translate(-50%, -50%);
padding: 5px 11px;
border-radius: var(--radius-pill);
background: var(--color-paper-3);
border: 1px solid var(--color-rule);
font-size: var(--text-xs);
font-weight: 500;
color: var(--color-ink-2);
white-space: nowrap;
opacity: 0;
scale: 0.8;
transition:
opacity 0.4s var(--ease-out),
scale 0.4s var(--ease-out);
}
.tmap.is-in .tnode {
opacity: 1;
scale: 1;
}
.tnode--hot {
border-color: color-mix(in oklch, var(--color-accent) 60%, var(--color-rule));
background: color-mix(in oklch, var(--color-accent) 16%, var(--color-paper-3));
color: var(--color-ink);
}
.tnode--ping::after {
content: "";
position: absolute;
inset: -4px;
border-radius: var(--radius-pill);
border: 1px solid var(--color-accent);
opacity: 0;
animation: tnode-ping 2.6s var(--ease-out) infinite;
}
@keyframes tnode-ping {
0% { opacity: 0.5; transform: scale(0.9); }
70% { opacity: 0; transform: scale(1.25); }
100% { opacity: 0; transform: scale(1.25); }
}
.tmap__mover {
position: absolute;
width: 36px;
height: 36px;
border-radius: 50%;
object-fit: cover;
transform: translate(-50%, -50%);
border: 2px solid var(--color-accent);
box-shadow: 0 0 0 4px color-mix(in oklch, var(--color-accent) 22%, transparent), 0 6px 16px oklch(0% 0 0 / 0.5);
opacity: 0;
z-index: 3;
transition:
left 1.3s var(--ease-in-out),
top 1.3s var(--ease-in-out),
opacity 0.4s var(--ease-out);
}
.tmap__label {
position: absolute;
transform: translate(8px, -130%);
padding: 0.4rem 0.7rem;
border-radius: var(--radius-input);
background: var(--color-paper);
border: 1px solid var(--color-rule);
font-size: var(--text-xs);
color: var(--color-ink-2);
white-space: nowrap;
opacity: 0;
z-index: 4;
transition: opacity 0.4s var(--ease-out);
box-shadow: 0 6px 18px oklch(0% 0 0 / 0.4);
}
.tmap__label strong {
display: block;
color: var(--color-ink);
font-weight: 600;
}
.tmap__label.show {
opacity: 1;
}
.compose {
align-self: stretch;
background: var(--color-paper-2);
border: 1px solid var(--color-rule);
border-radius: var(--radius-card);
overflow: hidden;
box-shadow: 0 1px 2px oklch(0% 0 0 / 0.3), 0 22px 50px oklch(0% 0 0 / 0.32);
}
.compose__head {
display: flex;
align-items: center;
justify-content: space-between;
padding: var(--space-sm) var(--space-md);
border-bottom: 1px solid var(--color-rule);
}
.compose__title {
font-weight: 600;
font-size: var(--text-sm);
color: var(--color-ink);
}
.compose__close {
color: var(--color-ink-3);
font-size: var(--text-sm);
}
.compose__field {
display: flex;
align-items: center;
gap: var(--space-sm);
padding: 0.6rem var(--space-md);
border-bottom: 1px solid var(--color-rule-soft);
font-size: var(--text-sm);
}
.compose__k {
width: 56px;
flex-shrink: 0;
font-family: var(--font-mono);
font-size: var(--text-xs);
letter-spacing: 0.1em;
text-transform: uppercase;
color: var(--color-ink-3);
}
.compose__chip {
display: inline-flex;
align-items: center;
gap: 0.45em;
padding: 3px 10px 3px 3px;
border-radius: var(--radius-pill);
background: var(--color-paper-3);
border: 1px solid var(--color-rule);
color: var(--color-ink);
font-size: var(--text-xs);
}
.compose__chip img {
width: 20px;
height: 20px;
border-radius: 50%;
object-fit: cover;
}
.compose__subj {
color: var(--color-ink);
font-weight: 500;
}
.compose__toolbar {
display: flex;
justify-content: flex-end;
padding: var(--space-2xs) var(--space-md);
border-bottom: 1px solid var(--color-rule-soft);
}
.compose__ai {
display: inline-flex;
align-items: center;
gap: 0.45em;
padding: 0.4rem 0.8rem;
border-radius: var(--radius-pill);
background: var(--color-accent);
color: var(--color-accent-ink);
font-size: var(--text-xs);
font-weight: 600;
transition: box-shadow var(--dur-mid) var(--ease-out);
}
.compose__ai.active {
box-shadow: 0 0 0 4px color-mix(in oklch, var(--color-accent) 26%, transparent);
}
.compose__spark {
width: 13px;
height: 13px;
}
.compose__body {
padding: var(--space-md);
min-height: 168px;
font-size: var(--text-sm);
line-height: 1.6;
color: var(--color-ink);
white-space: pre-wrap;
}
.compose__caret {
display: inline-block;
width: 2px;
height: 1.1em;
margin-left: 1px;
vertical-align: text-bottom;
background: var(--color-accent);
animation: hero-caret 1s steps(1) infinite;
}
.compose__foot {
display: flex;
align-items: center;
justify-content: space-between;
padding: var(--space-sm) var(--space-md);
border-top: 1px solid var(--color-rule);
}
.compose__chars {
font-family: var(--font-mono);
font-size: var(--text-xs);
color: var(--color-ink-3);
}
.compose__send {
padding: 0.45rem 1.1rem;
border-radius: var(--radius-input);
background: var(--color-accent);
color: var(--color-accent-ink);
font-size: var(--text-sm);
font-weight: 600;
}
.compose__send.sent {
background: oklch(72% 0.17 150);
}
.compose__track {
display: flex;
align-items: center;
gap: var(--space-sm);
padding: 0 var(--space-md) var(--space-md);
}
.ctrack {
display: inline-flex;
align-items: center;
gap: 0.4em;
padding: 0.3rem 0.7rem;
border-radius: var(--radius-pill);
font-family: var(--font-mono);
font-size: var(--text-xs);
letter-spacing: 0.02em;
background: var(--color-paper-3);
border: 1px solid var(--color-rule);
color: var(--color-ink-2);
opacity: 0;
transform: translateY(6px);
transition:
opacity 0.35s var(--ease-out),
transform 0.35s var(--ease-out);
}
.ctrack::before {
content: "";
width: 6px;
height: 6px;
border-radius: 50%;
background: currentColor;
}
.ctrack.show {
opacity: 1;
transform: none;
}
.ctrack--sent {
color: oklch(72% 0.17 150);
}
.ctrack--open,
.ctrack--reply {
color: var(--color-accent);
}
.cardgrid--4 {
grid-template-columns: repeat(4, minmax(0, 1fr));
}
@media (max-width: 64rem) {
.cardgrid--4 {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}
@media (max-width: 40rem) {
.cardgrid--4 {
grid-template-columns: 1fr;
}
}
.cgrowth {
align-self: stretch;
background: var(--color-paper-2);
border: 1px solid var(--color-rule);
border-radius: var(--radius-card);
padding: var(--space-lg);
box-shadow: 0 1px 2px oklch(0% 0 0 / 0.3), 0 22px 50px oklch(0% 0 0 / 0.32);
}
.cgrowth__head {
display: flex;
align-items: center;
gap: var(--space-sm);
padding-bottom: var(--space-sm);
border-bottom: 1px solid var(--color-rule);
}
.cgrowth__logo {
width: 36px;
height: 36px;
flex-shrink: 0;
border-radius: 9px;
background: #fff;
display: flex;
align-items: center;
justify-content: center;
}
.cgrowth__logo img {
width: 24px;
height: 24px;
object-fit: contain;
}
.cgrowth__co {
font-weight: 600;
color: var(--color-ink);
}
.cgrowth__sub {
font-size: var(--text-xs);
color: var(--color-ink-2);
}
.cgrowth__metric {
margin-left: auto;
text-align: right;
}
.cgrowth__count {
font-family: var(--font-mono);
font-weight: 500;
font-size: var(--text-md);
color: var(--color-ink);
font-variant-numeric: tabular-nums;
line-height: 1;
}
.cgrowth__mlabel {
font-size: var(--text-xs);
color: var(--color-ink-3);
}
.cgrowth__caption {
display: flex;
justify-content: space-between;
align-items: baseline;
margin-top: var(--space-md);
font-family: var(--font-mono);
font-size: var(--text-xs);
letter-spacing: 0.04em;
color: var(--color-ink-3);
}
.cgrowth__chart {
position: relative;
height: 168px;
margin-top: var(--space-sm);
}
.cgrowth__chart svg {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
}
.cgrowth__area {
fill: oklch(58% 0.25 292 / 0.16);
}
.cgrowth__line {
fill: none;
stroke: var(--color-accent);
stroke-width: 2;
stroke-linejoin: round;
stroke-linecap: round;
vector-effect: non-scaling-stroke;
}
.cgrowth__chart svg {
clip-path: inset(0 100% 0 0);
transition: clip-path 1.4s var(--ease-out);
}
.cgrowth.is-in .cgrowth__chart svg {
clip-path: inset(0 0 0 0);
}
.cgrowth__dot {
position: absolute;
transform: translate(-50%, -50%);
width: 15px;
height: 15px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-family: var(--font-mono);
font-size: 8px;
font-weight: 700;
color: var(--color-accent-ink);
background: var(--color-accent);
box-shadow: 0 0 8px oklch(58% 0.25 292 / 0.7);
opacity: 0;
scale: 0.5;
transition:
opacity 0.4s var(--ease-out),
scale 0.4s var(--ease-out);
}
.cgrowth.is-in .cgrowth__dot {
opacity: 1;
scale: 1;
transition-delay: calc(1s + var(--i) * 0.2s);
}
.cgrowth__axis {
display: flex;
justify-content: space-between;
margin-top: var(--space-2xs);
font-family: var(--font-mono);
font-size: 0.7rem;
color: var(--color-ink-3);
}
.cgrowth__chips {
display: flex;
flex-wrap: wrap;
gap: var(--space-2xs);
margin-top: var(--space-md);
}
.cgchip {
font-size: var(--text-xs);
color: var(--color-ink-2);
background: var(--color-paper-3);
border: 1px solid var(--color-rule);
border-radius: var(--radius-pill);
padding: 4px 10px;
opacity: 0;
transform: translateY(6px);
transition:
opacity 0.4s var(--ease-out),
transform 0.4s var(--ease-out);
transition-delay: calc(var(--i) * 0.08s);
}
.cgchip b {
color: var(--color-ink);
font-weight: 600;
}
.cgrowth.is-in .cgchip {
opacity: 1;
transform: none;
}
.cgrowth__pop {
position: absolute;
left: 4%;
top: 4%;
display: flex;
align-items: center;
gap: var(--space-2xs);
padding: 7px 10px 7px 7px;
background: var(--color-paper);
border: 1px solid var(--color-rule);
border-radius: var(--radius-input);
box-shadow: 0 10px 26px oklch(0% 0 0 / 0.5);
opacity: 0;
transform: translateY(8px) scale(0.96);
transition:
opacity 0.45s var(--ease-out),
transform 0.45s var(--ease-out);
transition-delay: 1.4s;
}
.cgrowth.is-in .cgrowth__pop {
opacity: 1;
transform: none;
}
.cgrowth__pop img {
width: 28px;
height: 28px;
border-radius: 50%;
object-fit: cover;
}
.cgrowth__popname {
display: block;
font-size: var(--text-xs);
font-weight: 600;
color: var(--color-ink);
}
.cgrowth__poprole {
display: block;
font-size: 0.7rem;
color: var(--color-ink-3);
}
.cgrowth__senior {
margin-top: var(--space-md);
padding-top: var(--space-md);
border-top: 1px solid var(--color-rule-soft);
}
.cgsen-head {
font-family: var(--font-mono);
font-size: var(--text-xs);
letter-spacing: 0.1em;
text-transform: uppercase;
color: var(--color-ink-3);
margin-bottom: var(--space-xs);
}
.cgsen-bar {
display: flex;
gap: 2px;
height: 12px;
border-radius: var(--radius-pill);
overflow: visible;
background: var(--color-paper-3);
border-radius: var(--radius-pill);
}
.cgsen-seg {
position: relative;
height: 100%;
width: 0;
cursor: default;
transition:
width 0.9s var(--ease-out),
filter var(--dur-short) var(--ease-out);
transition-delay: 0.5s, 0s;
}
.cgsen-seg:first-child { border-radius: var(--radius-pill) 0 0 var(--radius-pill); }
.cgsen-seg:last-child { border-radius: 0 var(--radius-pill) var(--radius-pill) 0; }
.cgsen-seg:hover {
filter: brightness(1.15);
}
.cgsen-seg::after {
content: attr(data-tip);
position: absolute;
bottom: calc(100% + 9px);
left: 50%;
transform: translateX(-50%) translateY(4px);
padding: 6px 10px;
background: var(--color-paper);
border: 1px solid var(--color-rule);
border-radius: var(--radius-input);
font-size: var(--text-xs);
color: var(--color-ink);
white-space: nowrap;
opacity: 0;
pointer-events: none;
box-shadow: 0 10px 26px oklch(0% 0 0 / 0.5);
transition:
opacity var(--dur-short) var(--ease-out),
transform var(--dur-short) var(--ease-out);
z-index: 6;
}
.cgsen-seg::before {
content: "";
position: absolute;
bottom: calc(100% + 3px);
left: 50%;
width: 8px;
height: 8px;
background: var(--color-paper);
border-right: 1px solid var(--color-rule);
border-bottom: 1px solid var(--color-rule);
transform: translateX(-50%) rotate(45deg) translateY(4px);
opacity: 0;
pointer-events: none;
transition:
opacity var(--dur-short) var(--ease-out),
transform var(--dur-short) var(--ease-out);
z-index: 6;
}
.cgsen-seg:hover::after {
opacity: 1;
transform: translateX(-50%) translateY(0);
}
.cgsen-seg:hover::before {
opacity: 1;
transform: translateX(-50%) rotate(45deg) translateY(0);
}
.cgrowth.is-in .cgsen-seg {
width: var(--w);
}
.cgsen-legend {
display: flex;
flex-wrap: wrap;
gap: var(--space-md);
margin-top: var(--space-2xs);
font-size: var(--text-xs);
color: var(--color-ink-3);
}
.cgsen-legend span {
display: inline-flex;
align-items: center;
gap: 0.4em;
}
.cgsen-legend i {
width: 8px;
height: 8px;
border-radius: 2px;
}
.cgrowth__view {
opacity: 1;
transition: opacity 0.4s var(--ease-out);
}
.cgrowth__view:empty {
min-height: 520px;
}
.cgrowth__logo--wm {
width: auto;
padding: 0 9px;
}
.cgwm {
font-weight: 700;
font-size: 15px;
letter-spacing: -0.02em;
color: #e5472e;
line-height: 1;
}
.cgrowth__tabs {
display: flex;
gap: var(--space-2xs);
margin-top: var(--space-md);
padding-top: var(--space-md);
border-top: 1px solid var(--color-rule-soft);
}
.cgrowth__tab {
flex: 1;
font: inherit;
font-size: var(--text-xs);
color: var(--color-ink-3);
background: var(--color-paper-3);
border: 1px solid var(--color-rule);
border-radius: var(--radius-input);
padding: 7px 10px;
cursor: pointer;
transition:
color var(--dur-short) var(--ease-out),
border-color var(--dur-short) var(--ease-out),
background var(--dur-short) var(--ease-out);
}
.cgrowth__tab:hover {
color: var(--color-ink);
border-color: var(--color-rule-strong, var(--color-accent));
}
.cgrowth__tab.is-active {
color: var(--color-accent);
border-color: var(--color-accent);
background: color-mix(in oklch, var(--color-accent) 12%, transparent);
}
.cgchip--pit {
color: var(--color-accent);
border-color: color-mix(in oklch, var(--color-accent) 45%, var(--color-rule));
background: color-mix(in oklch, var(--color-accent) 10%, transparent);
}
.cgchip--pit b {
color: var(--color-accent);
}
.cgrowth__band {
position: absolute;
top: 0;
bottom: 0;
z-index: 1;
background: linear-gradient(
90deg,
color-mix(in oklch, var(--color-accent) 4%, transparent),
color-mix(in oklch, var(--color-accent) 17%, transparent)
);
border-left: 1px dashed color-mix(in oklch, var(--color-accent) 60%, transparent);
opacity: 0;
transition: opacity 0.6s var(--ease-out) 1s;
pointer-events: none;
}
.cgrowth.is-in .cgrowth__band {
opacity: 1;
}
.cgrowth__joined {
position: absolute;
top: -2px;
bottom: 0;
z-index: 4;
transform: translateX(-50%);
opacity: 0;
transition:
opacity 0.5s var(--ease-out) 1.15s,
transform 0.5s var(--ease-out) 1.15s;
}
.cgrowth.is-in .cgrowth__joined {
opacity: 1;
}
.cgrowth__joinedlbl {
position: absolute;
top: -2px;
left: 50%;
transform: translateX(-50%);
white-space: nowrap;
font-family: var(--font-mono);
font-size: 0.62rem;
letter-spacing: 0.02em;
color: var(--color-accent);
background: var(--color-paper);
border: 1px solid color-mix(in oklch, var(--color-accent) 35%, var(--color-rule));
border-radius: var(--radius-pill);
padding: 2px 7px;
}
.cgrowth__pit {
position: absolute;
left: 4%;
bottom: 6%;
z-index: 5;
display: flex;
flex-direction: column;
gap: 1px;
max-width: 60%;
padding: 8px 11px;
background: var(--color-paper);
border: 1px solid var(--color-rule);
border-radius: var(--radius-input);
box-shadow: 0 10px 26px oklch(0% 0 0 / 0.45);
opacity: 0;
transform: translateY(8px) scale(0.97);
transition:
opacity 0.45s var(--ease-out) 1.5s,
transform 0.45s var(--ease-out) 1.5s;
}
.cgrowth.is-in .cgrowth__pit {
opacity: 1;
transform: none;
}
.cgrowth__pitlbl {
font-family: var(--font-mono);
font-size: 0.62rem;
letter-spacing: 0.04em;
text-transform: uppercase;
color: var(--color-accent);
}
.cgrowth__pitrow {
font-size: var(--text-xs);
color: var(--color-ink);
}
.cgrowth__pitrow b {
font-weight: 600;
font-variant-numeric: tabular-nums;
}
.cgrowth__pitrow em {
font-style: normal;
color: var(--color-accent);
font-weight: 600;
}
.cgrowth__pitrow--sub {
color: var(--color-ink-3);
font-size: 0.7rem;
}
.cgrowth__pop {
left: auto;
right: 4%;
}
@media (max-width: 40rem) {
.cgrowth {
padding: var(--space-md);
}
.cgrowth__pop {
display: none;
}
.cgrowth__chart {
height: 150px;
}
.cgrowth__pit {
left: 3%;
right: 3%;
bottom: 4%;
max-width: none;
}
.cgrowth__pitrow {
font-size: 0.72rem;
}
.cgrowth__joinedlbl {
font-size: 0.56rem;
padding: 1px 5px;
}
.cgrowth__desc {
font-size: var(--text-sm);
}
.cgsen-legend {
gap: var(--space-sm);
font-size: 0.68rem;
}
}
.badge {
display: inline-flex;
align-items: center;
font-size: 10px;
font-weight: 500;
letter-spacing: 0.01em;
padding: 2px 7px;
border-radius: var(--radius-pill);
white-space: nowrap;
background: color-mix(in oklch, var(--color-accent) 13%, var(--color-paper-3));
border: 1px solid color-mix(in oklch, var(--color-accent) 32%, var(--color-rule));
color: var(--badge-ink);
}
.srow__badges {
display: flex;
flex-wrap: wrap;
gap: 4px;
margin-top: 5px;
}
.gcard__badges {
display: flex;
flex-wrap: wrap;
gap: 5px;
margin-top: 7px;
}
.cgrowth__desc {
margin-top: var(--space-md);
font-size: var(--text-sm);
line-height: 1.5;
color: var(--color-ink-2);
display: -webkit-box;
-webkit-line-clamp: 3;
line-clamp: 3;
-webkit-box-orient: vertical;
overflow: hidden;
}
.legal {
max-width: 760px;
margin-inline: auto;
}
.legal__updated {
font-family: var(--font-mono);
font-size: var(--text-xs);
letter-spacing: 0.1em;
text-transform: uppercase;
color: var(--color-ink-3);
margin-bottom: var(--space-2xl);
}
.legal h2 {
font-size: var(--text-xl);
margin-top: var(--space-2xl);
margin-bottom: var(--space-sm);
}
.legal h3 {
font-size: var(--text-md);
color: var(--color-ink);
margin-top: var(--space-xl);
margin-bottom: var(--space-xs);
}
.legal p {
color: var(--color-ink-2);
line-height: 1.7;
margin-bottom: var(--space-md);
}
.legal ul {
color: var(--color-ink-2);
line-height: 1.7;
margin: 0 0 var(--space-md);
padding-left: 1.25em;
}
.legal li {
margin-bottom: var(--space-2xs);
}
.legal a {
color: var(--color-accent);
}
.legal strong {
color: var(--color-ink);
font-weight: 600;
}
.section--alt {
background: var(--color-paper-2);
border-top: 1px solid var(--color-rule-soft);
border-bottom: 1px solid var(--color-rule-soft);
}
.bloggrid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
gap: var(--space-lg);
}
.bcard {
display: flex;
flex-direction: column;
background: var(--color-paper-2);
border: 1px solid var(--color-rule);
border-radius: var(--radius-card);
overflow: hidden;
text-decoration: none;
color: inherit;
transition:
border-color var(--dur-short) var(--ease-out),
transform var(--dur-short) var(--ease-out);
}
.bcard:hover {
border-color: color-mix(in oklch, var(--color-accent) 55%, var(--color-rule));
transform: translateY(-4px);
}
.bcard__media {
aspect-ratio: 16 / 9;
overflow: hidden;
background: var(--color-paper);
border-bottom: 1px solid var(--color-rule-soft);
}
.bcard__media img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform var(--dur-mid) var(--ease-out);
}
.bcard:hover .bcard__media img {
transform: scale(1.04);
}
.bcard__body {
display: flex;
flex-direction: column;
gap: var(--space-2xs);
padding: var(--space-lg);
flex: 1;
}
.bcard__kicker {
font-family: var(--font-mono);
font-size: var(--text-xs);
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--color-accent);
}
.bcard__title {
font-size: var(--text-md);
line-height: 1.25;
text-wrap: balance;
}
.bcard__excerpt {
font-size: var(--text-base);
line-height: 1.55;
color: var(--color-ink-2);
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
overflow: hidden;
}
.bcard__more {
margin-top: auto;
padding-top: var(--space-sm);
font-family: var(--font-mono);
font-size: var(--text-sm);
color: var(--color-accent);
}
.bcard__more .arrow {
display: inline-block;
transition: transform var(--dur-short) var(--ease-out);
}
.bcard:hover .bcard__more .arrow {
transform: translateX(4px);
}
.article__hero {
padding-bottom: var(--space-lg);
}
.article__title {
max-width: 18ch;
}
.article__back {
color: var(--color-ink-3);
text-decoration: none;
}
.article__back:hover {
color: var(--color-accent);
}
.article__byline {
font-family: var(--font-mono);
font-size: var(--text-xs);
letter-spacing: 0.1em;
text-transform: uppercase;
color: var(--color-ink-3);
margin-top: var(--space-sm);
}
.article__top {
padding-top: var(--space-lg);
}
.article__lead {
max-width: 900px;
margin: 0 auto var(--space-2xl);
border-radius: var(--radius-card);
overflow: hidden;
border: 1px solid var(--color-rule);
}
.article__lead img {
width: 100%;
display: block;
}
.article__body {
max-width: 720px;
}
.meetings-iframe-container {
min-height: 720px;
border: 1px solid var(--color-rule);
border-radius: var(--radius-card);
overflow: hidden;
background: var(--color-paper-2);
}
.meetings-iframe-container iframe {
width: 100%;
min-height: 720px;
border: 0;
display: block;
}
.nav__theme {
display: inline-flex;
align-items: center;
justify-content: center;
width: 34px;
height: 34px;
padding: 0;
border: 1px solid var(--color-rule);
border-radius: var(--radius-pill);
background: transparent;
color: var(--color-ink-2);
cursor: pointer;
transition:
color var(--dur-short) var(--ease-out),
border-color var(--dur-short) var(--ease-out),
transform var(--dur-short) var(--ease-out);
}
.nav__theme:hover {
color: var(--color-accent);
border-color: color-mix(in oklch, var(--color-accent) 50%, var(--color-rule));
transform: rotate(-18deg);
}
.nav__theme svg {
transition: transform var(--dur-mid) var(--ease-out);
}
:root[data-theme="light"] .nav__theme svg {
transform: rotate(180deg);
}
:root[data-theme="light"] .marquee__item img {
filter: invert(1) brightness(0.28);
opacity: 0.72;
}
:root[data-theme="light"] .marquee__item img:hover {
opacity: 1;
}
.beam {
position: absolute;
inset: 0;
z-index: 1;
border-radius: inherit;
padding: 1px;
overflow: hidden;
pointer-events: none;
-webkit-mask:
linear-gradient(#000 0 0) content-box,
linear-gradient(#000 0 0);
-webkit-mask-composite: xor;
mask-composite: exclude;
}
.beam::before {
content: "";
position: absolute;
inset: 0;
border-radius: inherit;
background: linear-gradient(135deg, oklch(70% 0.12 300 / 0.55), oklch(58% 0.2 297 / 0.25));
}
.beam__spin {
position: absolute;
top: 50%;
left: 50%;
width: 220%;
aspect-ratio: 1;
translate: -50% -50%;
background: conic-gradient(
from 0deg,
transparent 0deg,
transparent 290deg,
oklch(92% 0.06 300 / 0.9) 340deg,
transparent 360deg
);
animation: btn-arc-spin 4.2s linear infinite;
}
@media (prefers-reduced-motion: reduce) {
.beam__spin { animation: none; }
}
:root[data-theme="light"] .beam::before {
background: linear-gradient(135deg, oklch(55% 0.24 295 / 0.7), oklch(50% 0.26 297 / 0.35));
}
:root[data-theme="light"] .beam__spin {
background: conic-gradient(
from 0deg,
transparent 0deg,
transparent 290deg,
oklch(52% 0.27 296 / 0.95) 340deg,
transparent 360deg
);
}
.hero__lede strong {
color: var(--color-accent);
font-weight: 600;
}
.hero--home {
padding-block: var(--space-2xl) var(--space-3xl);
}
.hero--home::before {
display: none;
}
.hero__bg {
position: absolute;
inset: 0;
z-index: 0;
pointer-events: none;
background: radial-gradient(52vw 46vh at 86% 26%, var(--color-glow), transparent 60%);
filter: blur(22px);
}
.hero__grid {
position: relative;
z-index: 1;
display: grid;
grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
gap: var(--space-2xl);
align-items: center;
}
.hero__dots {
position: absolute;
inset: 0;
z-index: 0;
width: 100%;
height: 100%;
pointer-events: none;
}
.hero__scrim {
position: absolute;
inset: 0;
z-index: 1;
pointer-events: none;
background:
linear-gradient(100deg, var(--color-paper) 2%, color-mix(in oklch, var(--color-paper) 72%, transparent) 30%, transparent 58%),
linear-gradient(to top, var(--color-paper) 0%, color-mix(in oklch, var(--color-paper) 55%, transparent) 14%, transparent 34%);
}
.hero__labels {
position: absolute;
inset: 0;
z-index: 1;
pointer-events: none;
}
.hero__chip {
position: absolute;
display: inline-flex;
align-items: center;
gap: 0.5em;
font-family: var(--font-mono);
font-size: 0.74rem;
letter-spacing: 0.01em;
white-space: nowrap;
color: var(--color-ink);
background: var(--color-paper-2);
border: 1px solid var(--color-rule);
border-radius: var(--radius-pill);
padding: 5px 12px;
box-shadow: 0 6px 18px oklch(0% 0 0 / 0.35);
transform: translate(-50%, -150%);
opacity: 0;
transition:
border-color 0.45s var(--ease-out),
box-shadow 0.45s var(--ease-out),
transform 0.45s var(--ease-out);
}
.hero__chip-av {
width: 21px;
height: 21px;
border-radius: 50%;
object-fit: cover;
margin-left: -4px;
background: var(--color-paper-3);
box-shadow: 0 0 0 1px var(--color-rule);
transition: box-shadow 0.45s var(--ease-out);
}
.hero__chip.is-active {
opacity: 1;
font-weight: 600;
color: var(--color-ink);
border-color: var(--color-accent);
box-shadow: 0 0 0 1px color-mix(in oklch, var(--color-accent) 40%, transparent), 0 10px 26px oklch(0% 0 0 / 0.45);
transform: translate(-50%, -160%);
}
.hero__chip.is-active .hero__chip-av {
box-shadow: 0 0 0 2px var(--color-accent);
}
@media (prefers-reduced-motion: reduce) {
.hero__chip { transition: none; }
}
@media (max-width: 60rem) {
.hero__labels { display: none; }
.hero__dots { opacity: 0.6; }
.hero__scrim {
background: linear-gradient(
to bottom,
var(--color-paper) 0%,
color-mix(in oklch, var(--color-paper) 72%, transparent) 42%,
color-mix(in oklch, var(--color-paper) 58%, transparent) 70%,
color-mix(in oklch, var(--color-paper) 82%, transparent) 100%
);
}
}
.hero__grid--solo {
grid-template-columns: 1fr;
}
.hero--home .hero__lead {
max-width: 41rem;
}
.hero__lead,
.hero__panel {
min-width: 0;
}
.hpanel {
overflow: hidden;
}
.dotfield {
position: relative;
width: 100%;
aspect-ratio: 5 / 4;
border-radius: 18px;
overflow: hidden;
background:
radial-gradient(90% 70% at 64% 30%, color-mix(in oklch, var(--color-accent) 16%, transparent), transparent 65%),
radial-gradient(140% 120% at 50% 120%, oklch(0% 0 0 / 0.28), transparent 55%),
linear-gradient(160deg, color-mix(in oklch, var(--color-paper-2) 92%, var(--color-accent)), var(--color-paper));
border: 1px solid var(--color-rule);
box-shadow:
inset 0 1px 0 oklch(100% 0 0 / 0.05),
0 30px 80px oklch(0% 0 0 / 0.45);
}
.dotfield::after {
content: "";
position: absolute;
inset: 0;
pointer-events: none;
background: radial-gradient(120% 120% at 50% 50%, transparent 58%, oklch(0% 0 0 / 0.22));
}
.dotfield__canvas {
position: absolute;
inset: 0;
z-index: 1;
width: 100%;
height: 100%;
display: block;
}
.dotfield::after { z-index: 2; }
.dotfield__tag { z-index: 3; }
.dotfield__tag {
position: absolute;
left: 0;
top: 0;
display: inline-flex;
align-items: center;
gap: 0.45em;
padding: 5px 10px;
font-family: var(--font-mono);
font-size: var(--text-xs);
letter-spacing: 0.03em;
color: var(--color-ink);
background: color-mix(in oklch, var(--color-paper) 88%, transparent);
border: 1px solid color-mix(in oklch, var(--color-accent) 40%, var(--color-rule));
border-radius: var(--radius-pill);
box-shadow: 0 8px 22px oklch(0% 0 0 / 0.4);
transform: translate(-50%, -210%);
opacity: 0;
pointer-events: none;
white-space: nowrap;
transition: opacity 0.3s var(--ease-out);
will-change: left, top, opacity;
}
.dotfield__tagdot {
width: 7px;
height: 7px;
border-radius: 50%;
background: var(--color-accent);
box-shadow: 0 0 8px var(--color-accent);
}
@media (max-width: 60rem) {
.dotfield {
aspect-ratio: 16 / 10;
max-height: 360px;
}
}
.hero__eyebrow {
font-family: var(--font-mono);
font-size: var(--text-xs);
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--color-ink-3);
margin-bottom: var(--space-md);
}
.hero--home .hero__title {
font-size: clamp(2.5rem, 4.3vw, 3.95rem);
line-height: 1.05;
letter-spacing: -0.03em;
max-width: 13ch;
text-wrap: balance;
}
.hero--home .hero__lede {
margin-top: var(--space-lg);
max-width: 44ch;
}
.hero--home .hero__cta {
margin-top: var(--space-xl);
display: flex;
align-items: center;
flex-wrap: wrap;
gap: var(--space-lg);
}
.hero__textlink {
display: inline-flex;
align-items: center;
gap: 0.45em;
font-family: var(--font-mono);
font-size: var(--text-sm);
letter-spacing: 0.04em;
color: var(--color-ink-2);
transition: color var(--dur-short) var(--ease-out);
}
.hero__textlink:hover {
color: var(--color-accent);
}
.hero__textlink .arrow {
display: inline-block;
transition: transform var(--dur-short) var(--ease-out);
}
.hero__textlink:hover .arrow {
transform: translateX(4px);
}
.hpanel {
position: relative;
padding: var(--space-md);
background: color-mix(in oklch, var(--color-paper-2) 94%, transparent);
border: 1px solid var(--color-rule);
border-radius: 16px;
box-shadow: 0 30px 80px oklch(0% 0 0 / 0.4);
backdrop-filter: blur(6px);
-webkit-backdrop-filter: blur(6px);
}
.hero-search--panel {
width: 100%;
margin: 0 0 var(--space-md);
align-items: flex-start;
border-radius: 14px;
padding: 0.9rem 1rem;
}
.hero-search--panel .hero-search__spark {
margin-top: 3px;
}
.hero-search--panel .hero-search__q {
display: block;
font-size: var(--text-sm);
line-height: 1.45;
white-space: normal;
overflow: visible;
min-height: 2.9em;
}
.hero-search--panel .hero-search__btn {
align-self: flex-start;
}
.hero-search--panel .hero-search__caret {
height: 1.05em;
margin-left: 1px;
vertical-align: -0.16em;
}
.hpanel__rows {
list-style: none;
margin: 0;
padding: 0;
}
.hprow {
display: grid;
grid-template-columns: auto auto minmax(0, 1fr) auto;
align-items: center;
gap: var(--space-sm);
padding: 0.6rem 0.4rem;
}
.hprow + .hprow {
border-top: 1px solid var(--color-rule-soft);
}
.hprow__rank {
font-family: var(--font-mono);
font-size: var(--text-xs);
color: var(--color-ink-3);
}
.hprow__av {
width: 36px;
height: 36px;
border-radius: 50%;
object-fit: cover;
background: var(--color-paper-3);
}
.hprow__id {
min-width: 0;
display: flex;
flex-direction: column;
gap: 5px;
}
.hprow__top {
display: flex;
align-items: center;
gap: 0.5rem;
min-width: 0;
}
.hprow__name {
font-size: var(--text-sm);
font-weight: 600;
color: var(--color-ink);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.hprow__bar {
height: 4px;
border-radius: var(--radius-pill);
background: var(--color-paper-3);
overflow: hidden;
}
.hprow__bar i {
display: block;
height: 100%;
width: 0;
background: var(--color-accent);
border-radius: var(--radius-pill);
transition: width 0.7s var(--ease-out);
}
.hprow {
opacity: 0;
transform: translateY(16px);
transition:
opacity 0.5s var(--ease-out),
transform 0.5s var(--ease-out);
}
.hprow.is-in {
opacity: 1;
transform: none;
}
.hprow.is-in .hprow__bar i {
width: var(--w);
}
.hero-search__btn {
transition:
transform var(--dur-short) var(--ease-out),
box-shadow var(--dur-short) var(--ease-out);
}
.hero-search__btn.is-press {
transform: scale(0.86);
}
@media (prefers-reduced-motion: reduce) {
.hprow {
opacity: 1;
transform: none;
transition: none;
}
.hprow__bar i {
width: var(--w);
transition: none;
}
}
.hprow__score {
font-family: var(--font-mono);
font-weight: 500;
color: var(--color-accent);
font-variant-numeric: tabular-nums;
}
@media (max-width: 60rem) {
.hero__grid {
grid-template-columns: 1fr;
gap: var(--space-xl);
}
.hero--home .hero__title {
max-width: 18ch;
}
}
.nowrap {
white-space: nowrap;
}
.hero__cta--center {
margin-top: var(--space-2xl);
display: flex;
align-items: center;
justify-content: center;
gap: var(--space-lg);
flex-wrap: wrap;
}
.billing-toggle {
display: inline-flex;
gap: 4px;
padding: 4px;
margin: 0 auto var(--space-2xl);
border: 1px solid var(--color-rule);
border-radius: var(--radius-pill);
background: var(--color-paper-2);
}
.billing-toggle {
display: flex;
width: fit-content;
}
.billing-toggle__btn {
display: inline-flex;
align-items: center;
gap: 0.5em;
padding: 0.5rem 1.1rem;
border: 0;
border-radius: var(--radius-pill);
background: transparent;
color: var(--color-ink-2);
font-family: var(--font-mono);
font-size: var(--text-xs);
letter-spacing: 0.06em;
text-transform: uppercase;
cursor: pointer;
transition: color var(--dur-short) var(--ease-out), background var(--dur-short) var(--ease-out);
}
.billing-toggle__btn.is-active {
background: var(--color-accent);
color: var(--color-accent-ink);
}
.billing-toggle__save {
font-size: 0.7rem;
color: inherit;
opacity: 0.85;
}
.ptier-grid {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: var(--space-lg);
align-items: start;
}
.ptier {
position: relative;
display: flex;
flex-direction: column;
padding: var(--space-xl) var(--space-lg);
background: var(--color-paper-2);
border: 1px solid var(--color-rule);
border-radius: var(--radius-card);
}
.ptier--featured {
background: color-mix(in oklch, var(--color-accent) 7%, var(--color-paper-2));
box-shadow: 0 30px 80px oklch(0% 0 0 / 0.35);
}
.ptier__tag {
position: absolute;
top: calc(-1 * var(--space-sm));
left: var(--space-lg);
padding: 0.25rem 0.7rem;
border-radius: var(--radius-pill);
background: var(--color-accent);
color: var(--color-accent-ink);
font-family: var(--font-mono);
font-size: var(--text-xs);
letter-spacing: 0.08em;
text-transform: uppercase;
z-index: 3;
box-shadow: 0 4px 14px oklch(0% 0 0 / 0.25);
}
.ptier__name {
font-size: var(--text-lg);
}
.ptier__for {
margin-top: var(--space-2xs);
min-height: 2.8em;
color: var(--color-ink-2);
font-size: var(--text-sm);
line-height: 1.45;
}
.ptier__price {
display: flex;
align-items: baseline;
gap: 0.4em;
margin-top: var(--space-md);
}
.ptier__amt {
font-family: var(--font-mono);
font-size: var(--text-2xl);
font-weight: 500;
letter-spacing: -0.03em;
color: var(--color-ink);
}
.ptier__per {
font-size: var(--text-sm);
color: var(--color-ink-3);
}
.ptier__bill {
margin-top: 4px;
font-size: var(--text-xs);
color: var(--color-ink-3);
}
.ptier__cta {
margin-top: var(--space-lg);
justify-content: center;
width: 100%;
}
.ptier__feats {
list-style: none;
margin: var(--space-lg) 0 0;
padding: var(--space-lg) 0 0;
border-top: 1px solid var(--color-rule);
display: flex;
flex-direction: column;
gap: var(--space-sm);
}
.ptier__feats li {
position: relative;
padding-left: 1.6em;
font-size: var(--text-sm);
line-height: 1.45;
color: var(--color-ink-2);
}
.ptier__feats li::before {
content: "";
position: absolute;
left: 0.1em;
top: 0.45em;
width: 0.5em;
height: 0.28em;
border-left: 2px solid var(--color-check);
border-bottom: 2px solid var(--color-check);
transform: rotate(-45deg);
}
.ptier__feats-head::before {
display: none;
}
.ptier__feats li strong {
color: var(--color-ink);
}
.ptier__feats-head {
padding-left: 0 !important;
font-family: var(--font-mono);
font-size: var(--text-xs) !important;
letter-spacing: 0.06em;
text-transform: uppercase;
color: var(--color-ink-3) !important;
}
.ptier__feats-head::before {
display: none;
}
.pricing__note {
margin-top: var(--space-xl);
text-align: center;
font-size: var(--text-sm);
color: var(--color-ink-3);
}
@media (max-width: 60rem) {
.ptier-grid {
grid-template-columns: 1fr;
max-width: 28rem;
margin-inline: auto;
}
}
.auth { padding-block: var(--space-3xl); }
.auth__wrap { max-width: 460px; margin-inline: auto; }
.auth__card {
background: var(--color-paper-2);
border: 1px solid var(--color-rule);
border-radius: var(--radius-card);
padding: var(--space-2xl) var(--space-xl);
box-shadow: 0 30px 80px oklch(0% 0 0 / 0.35);
}
.auth__card--center { text-align: center; }
.auth__title { font-size: var(--text-xl); margin-top: var(--space-2xs); }
.auth__sub { margin-top: var(--space-sm); color: var(--color-ink-2); line-height: 1.6; }
.auth__form { margin-top: var(--space-md); display: flex; flex-direction: column; gap: var(--space-sm); }
.auth__form .btn { width: 100%; justify-content: center; margin-top: var(--space-2xs); }
.auth__error { margin: 0; font-size: var(--text-sm); color: oklch(64% 0.2 25); }
.auth__hint { margin: 0; font-size: var(--text-sm); line-height: 1.55; color: var(--color-ink-3); }
.auth__hint a,
.auth__alt a,
.auth__legal a { color: var(--color-accent); }
.auth__alt { margin-top: var(--space-lg); text-align: center; font-size: var(--text-sm); color: var(--color-ink-2); }
.auth__legal { margin-top: var(--space-sm); text-align: center; font-size: var(--text-xs); color: var(--color-ink-3); }
.auth__check {
width: 56px;
height: 56px;
margin: 0 auto var(--space-md);
border-radius: 50%;
display: grid;
place-items: center;
background: color-mix(in oklch, var(--color-accent) 18%, transparent);
color: var(--color-accent);
}
.auth__card--center .btn { margin-top: var(--space-lg); width: 100%; justify-content: center; }
.auth__spinner {
width: 48px;
height: 48px;
margin: 0 auto var(--space-md);
border-radius: 50%;
border: 3px solid var(--color-rule);
border-top-color: var(--color-accent);
animation: auth-spin 0.9s linear infinite;
}
@keyframes auth-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
.auth__spinner { animation: none; }
}
.asplit {
display: grid;
grid-template-columns: 1fr 1fr;
min-height: 100vh;
}
.asplit__panel {
display: flex;
flex-direction: column;
padding: clamp(var(--space-md), 3vw, var(--space-xl));
}
.asplit__panel--form { gap: var(--space-lg); }
.asplit__brand { font-size: var(--text-md); }
.asplit__body {
flex: 1;
display: flex;
flex-direction: column;
justify-content: center;
width: 100%;
max-width: 420px;
margin-inline: auto;
}
.asplit__body--center { text-align: center; }
.asplit__body[hidden],
.auth__card[hidden] { display: none !important; }
.asplit__title { font-size: var(--text-xl); letter-spacing: -0.02em; margin-top: var(--space-2xs); }
.asplit__sub { margin-top: var(--space-sm); color: var(--color-ink-2); line-height: 1.6; }
.asplit__clients { width: 100%; max-width: 420px; margin-inline: auto; }
.aclients { overflow: hidden; margin-top: var(--space-md); }
.aclients__track {
display: flex;
align-items: center;
gap: var(--space-xl);
width: max-content;
animation: marquee-scroll 40s linear infinite;
}
.aclients__track img { height: 40px; width: auto; opacity: 0.7; }
@media (prefers-reduced-motion: reduce) {
.aclients__track { animation: none; }
}
:root[data-theme="light"] .aclients__track img { filter: invert(1) brightness(0.3); opacity: 0.6; }
.asplit__panel--visual {
position: relative;
overflow: hidden;
align-items: center;
justify-content: center;
background: color-mix(in oklch, var(--color-accent) 7%, var(--color-paper));
border-left: 1px solid var(--color-rule);
}
.asplit__glow {
position: absolute;
inset: 0;
pointer-events: none;
background: radial-gradient(60vh 60vh at 70% 28%, var(--color-glow), transparent 60%);
filter: blur(20px);
}
.asplit__visual-inner { position: relative; z-index: 1; width: 100%; max-width: 440px; }
.asplit__headline {
font-size: clamp(1.95rem, 2.4vw, 2.6rem);
line-height: 1.1;
letter-spacing: -0.02em;
max-width: 16ch;
}
.asplit__vsub {
margin-top: var(--space-sm);
margin-bottom: var(--space-xl);
color: var(--color-ink-2);
line-height: 1.6;
max-width: 42ch;
}
.asplit__panel--visual .hpanel { box-shadow: 0 30px 80px oklch(0% 0 0 / 0.45); }
@media (max-width: 60rem) {
.asplit { grid-template-columns: 1fr; }
.asplit__panel--visual { display: none; }
.asplit__panel--form { min-height: 100vh; }
}
.averify {
min-height: 100vh;
display: grid;
place-items: center;
padding: var(--space-xl);
}
.averify__wrap { width: 100%; max-width: 440px; }
.asplit__panel--form { gap: var(--space-md); }
.asplit__body .auth__form { margin-top: var(--space-sm); gap: var(--space-xs); }
.asplit__body .field label { margin-bottom: 4px; }
.asplit__body .field input { padding: 0.6rem 0.85rem; }
.asplit__body .auth__alt { margin-top: var(--space-md); }
.asplit__body .auth__legal { margin-top: var(--space-2xs); }
.asplit__panel { padding: clamp(var(--space-md), 3vw, var(--space-lg)); }
.asplit__body .auth__form { gap: var(--space-2xs); }
.aclients { margin-top: var(--space-sm); }
.aclients__track img { height: 36px; }
.auth-page { min-height: 100vh; display: flex; flex-direction: column; }
.auth2__top { padding: var(--space-lg) clamp(var(--space-md), 4vw, var(--space-2xl)); }
.auth2 {
flex: 1;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
padding: var(--space-xl) var(--space-md) var(--space-2xl);
}
.auth2__col { width: 100%; max-width: 380px; text-align: center; }
.auth2__title { font-size: var(--text-xl); letter-spacing: -0.02em; }
.auth2__sub { margin-top: var(--space-2xs); color: var(--color-ink-2); }
.auth2__social { margin-top: var(--space-xl); display: flex; flex-direction: column; gap: var(--space-xs); }
.ssobtn {
display: flex;
align-items: center;
justify-content: center;
gap: 0.6em;
width: 100%;
padding: 0.7rem 1rem;
border: 1px solid var(--color-rule);
border-radius: var(--radius-input);
background: var(--color-paper-2);
color: var(--color-ink);
font-family: var(--font-body);
font-size: var(--text-base);
font-weight: 500;
cursor: pointer;
transition: border-color var(--dur-short) var(--ease-out), background var(--dur-short) var(--ease-out);
}
.ssobtn:hover {
border-color: color-mix(in oklch, var(--color-accent) 45%, var(--color-rule));
background: var(--color-paper-3);
}
.ssobtn__icon { flex-shrink: 0; }
.auth2__or {
display: flex;
align-items: center;
gap: var(--space-sm);
margin: var(--space-lg) 0;
color: var(--color-ink-3);
font-size: var(--text-sm);
}
.auth2__or::before,
.auth2__or::after { content: ""; flex: 1; height: 1px; background: var(--color-rule); }
.auth2__form { display: flex; flex-direction: column; gap: var(--space-sm); text-align: left; }
.auth2__form .btn { width: 100%; justify-content: center; }
.auth2__fine { margin-top: var(--space-md); font-size: var(--text-xs); color: var(--color-ink-3); line-height: 1.55; }
.auth2__fine a { color: var(--color-accent); }
.auth2__alt { margin-top: var(--space-md); font-size: var(--text-sm); color: var(--color-ink-2); }
.auth2__alt a { color: var(--color-accent); }
.auth2__proof { padding-bottom: var(--space-lg); }
.auth2__proof .logos__label { text-align: center; margin-bottom: var(--space-sm); }
@font-face {
font-family: 'JetBrains Mono';
font-style: normal;
font-weight: 400;
font-display: swap;
src: url(assets/fonts/JetBrainsMono-latin-ext.woff2) format('woff2');
unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
font-family: 'JetBrains Mono';
font-style: normal;
font-weight: 400;
font-display: swap;
src: url(assets/fonts/JetBrainsMono-latin.woff2) format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
font-family: 'JetBrains Mono';
font-style: normal;
font-weight: 500;
font-display: swap;
src: url(assets/fonts/JetBrainsMono-latin-ext.woff2) format('woff2');
unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
font-family: 'JetBrains Mono';
font-style: normal;
font-weight: 500;
font-display: swap;
src: url(assets/fonts/JetBrainsMono-latin.woff2) format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
font-family: 'Schibsted Grotesk';
font-style: normal;
font-weight: 400;
font-display: swap;
src: url(assets/fonts/SchibstedGrotesk-latin-ext.woff2) format('woff2');
unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
font-family: 'Schibsted Grotesk';
font-style: normal;
font-weight: 400;
font-display: swap;
src: url(assets/fonts/SchibstedGrotesk-latin.woff2) format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
font-family: 'Schibsted Grotesk';
font-style: normal;
font-weight: 500;
font-display: swap;
src: url(assets/fonts/SchibstedGrotesk-latin-ext.woff2) format('woff2');
unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
font-family: 'Schibsted Grotesk';
font-style: normal;
font-weight: 500;
font-display: swap;
src: url(assets/fonts/SchibstedGrotesk-latin.woff2) format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
font-family: 'Schibsted Grotesk';
font-style: normal;
font-weight: 600;
font-display: swap;
src: url(assets/fonts/SchibstedGrotesk-latin-ext.woff2) format('woff2');
unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
font-family: 'Schibsted Grotesk';
font-style: normal;
font-weight: 600;
font-display: swap;
src: url(assets/fonts/SchibstedGrotesk-latin.woff2) format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
font-family: 'Schibsted Grotesk';
font-style: normal;
font-weight: 700;
font-display: swap;
src: url(assets/fonts/SchibstedGrotesk-latin-ext.woff2) format('woff2');
unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
font-family: 'Schibsted Grotesk';
font-style: normal;
font-weight: 700;
font-display: swap;
src: url(assets/fonts/SchibstedGrotesk-latin.woff2) format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}