label and a short detail. */
.roadmap-points {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 26px 44px;
max-width: 88ch;
}
.roadmap-point strong {
display: block;
margin-bottom: 6px;
color: var(--text);
font-weight: 500;
}
.roadmap-point p {
margin: 0;
color: var(--muted);
line-height: 1.6;
font-size: 0.96rem;
}
/* — Journal (hub) — */
/* Built on the same tokens as changelog/roadmap so the section reads as part
of one system. The "orbit" is a small spatial-audio metaphor: a white core
(the listener) with placed sound-dots around it, on a dark radial space. */
.journal-tag {
display: inline-flex;
align-items: center;
padding: 3px 9px;
border: 1px solid rgba(114, 242, 192, 0.3);
border-radius: 999px;
background: rgba(114, 242, 192, 0.06);
color: var(--accent);
font: 0.66rem var(--mono);
letter-spacing: 0.12em;
text-transform: uppercase;
}
.journal-dot-sep {
color: var(--soft);
opacity: 0.55;
}
.journal-card-eyebrow {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 10px;
margin-bottom: 18px;
font: 0.78rem var(--mono);
letter-spacing: 0.03em;
color: var(--soft);
}
.journal-featured {
display: grid;
grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.08fr);
border: 1px solid var(--line);
border-radius: 26px;
overflow: hidden;
background:
linear-gradient(180deg, rgba(255, 255, 255, 0.03), rgba(255, 255, 255, 0.012)),
rgba(255, 255, 255, 0.01);
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
transition: border-color 200ms ease, transform 200ms ease;
}
.journal-featured:hover {
border-color: var(--line-strong);
transform: translateY(-2px);
}
.journal-featured-visual {
position: relative;
min-height: 320px;
display: grid;
place-items: center;
border-right: 1px solid var(--line);
background:
radial-gradient(circle at 50% 42%, rgba(54, 78, 90, 0.55), rgba(10, 12, 14, 0.98) 68%),
#07090b;
}
.journal-featured-body {
padding: clamp(28px, 3.4vw, 46px);
display: grid;
align-content: center;
}
.journal-featured-title {
margin-bottom: 16px;
font-size: clamp(1.6rem, 2.6vw, 2.4rem);
max-width: 20ch;
}
.journal-featured-excerpt {
margin-bottom: 24px;
max-width: 48ch;
color: var(--muted);
line-height: 1.62;
}
.journal-card-cta {
display: inline-flex;
align-items: center;
font-size: 0.92rem;
color: var(--text);
transition: color 160ms ease;
}
.journal-featured:hover .journal-card-cta {
color: var(--accent);
}
/* — Spatial "orbit" decoration — */
.journal-orbit {
position: relative;
width: 200px;
height: 200px;
display: grid;
place-items: center;
animation: journalOrbitSpin 48s linear infinite;
}
.journal-orbit::before,
.journal-orbit::after {
content: "";
position: absolute;
border: 1px solid rgba(255, 255, 255, 0.12);
border-radius: 999px;
}
.journal-orbit::before { width: 100%; height: 100%; }
.journal-orbit::after { width: 56%; height: 56%; }
.journal-orbit-core {
position: relative;
width: 15px;
height: 15px;
border-radius: 999px;
background: #ffffff;
box-shadow: 0 0 20px rgba(255, 255, 255, 0.55);
}
.journal-orbit-dot {
position: absolute;
width: 11px;
height: 11px;
border-radius: 999px;
}
.journal-orbit-dot--1 {
top: 4%;
left: calc(50% - 5.5px);
background: var(--accent);
box-shadow: 0 0 14px rgba(114, 242, 192, 0.7);
}
.journal-orbit-dot--2 {
bottom: 16%;
left: 14%;
background: #f4b48a;
box-shadow: 0 0 14px rgba(244, 180, 138, 0.7);
}
.journal-orbit-dot--3 {
top: 38%;
right: 6%;
background: #cba8ef;
box-shadow: 0 0 14px rgba(203, 168, 239, 0.7);
}
.journal-orbit--large {
width: 260px;
height: 260px;
}
@keyframes journalOrbitSpin {
to { transform: rotate(360deg); }
}
/* — Article visuals — */
/* One CSS-only animation per article so covers are not all the same orbit.
All decorative (aria-hidden) and frozen by prefers-reduced-motion. They size
to a square that scales down on small screens (see the media queries). */
.viz {
position: relative;
display: grid;
place-items: center;
width: 260px;
height: 260px;
}
/* Manifesto — calm breathing rings emanating from a soft center ("a place"). */
.viz-rings .viz-ring {
position: absolute;
width: 100%;
height: 100%;
border: 1px solid rgba(255, 255, 255, 0.18);
border-radius: 999px;
transform: scale(0.35);
opacity: 0;
animation: vizRipple 6s ease-out infinite;
}
.viz-rings .viz-ring:nth-child(2) { animation-delay: 2s; }
.viz-rings .viz-ring:nth-child(3) { animation-delay: 4s; }
.viz-rings .viz-core {
width: 14px;
height: 14px;
border-radius: 999px;
background: #ffffff;
box-shadow: 0 0 24px rgba(255, 255, 255, 0.5);
animation: vizBreathe 6s ease-in-out infinite;
}
@keyframes vizRipple {
0% { transform: scale(0.35); opacity: 0; }
15% { opacity: 0.7; }
100% { transform: scale(1.5); opacity: 0; }
}
@keyframes vizBreathe {
0%, 100% { transform: scale(1); opacity: 0.85; }
50% { transform: scale(1.28); opacity: 1; }
}
/* Essay — a gentle equalizer wave (sound, breathing). */
.viz-wave {
display: flex;
align-items: center;
gap: 11px;
width: auto;
height: 150px;
}
.viz-wave span {
width: 6px;
height: 100%;
border-radius: 999px;
background: linear-gradient(180deg, rgba(114, 242, 192, 0.55), rgba(255, 255, 255, 0.14));
transform: scaleY(0.28);
transform-origin: center;
animation: vizWave 2.8s ease-in-out infinite;
}
.viz-wave span:nth-child(1) { animation-delay: -0.2s; }
.viz-wave span:nth-child(2) { animation-delay: -0.6s; }
.viz-wave span:nth-child(3) { animation-delay: -1.0s; }
.viz-wave span:nth-child(4) { animation-delay: -1.4s; }
.viz-wave span:nth-child(5) { animation-delay: -1.0s; }
.viz-wave span:nth-child(6) { animation-delay: -0.6s; }
.viz-wave span:nth-child(7) { animation-delay: -0.2s; }
@keyframes vizWave {
0%, 100% { transform: scaleY(0.28); }
50% { transform: scaleY(1); }
}
/* Head tracking — fixed anchors + a rotating "gaze" sweep around the listener. */
.viz-tracking .viz-track-ring {
position: absolute;
width: 100%;
height: 100%;
border: 1px solid rgba(255, 255, 255, 0.12);
border-radius: 999px;
}
.viz-tracking .viz-track-core {
position: relative;
z-index: 2;
width: 14px;
height: 14px;
border-radius: 999px;
background: #ffffff;
box-shadow: 0 0 16px rgba(255, 255, 255, 0.5);
}
.viz-tracking .viz-track-sweep {
position: absolute;
left: 50%;
top: 50%;
width: 50%;
height: 2px;
transform-origin: left center;
background: linear-gradient(90deg, rgba(114, 242, 192, 0.65), transparent);
animation: vizSweep 7s linear infinite;
}
.viz-tracking .viz-track-anchor {
position: absolute;
width: 10px;
height: 10px;
border-radius: 999px;
}
.viz-tracking .viz-track-anchor--1 {
top: 10%;
left: calc(50% - 5px);
background: #72f2c0;
box-shadow: 0 0 12px rgba(114, 242, 192, 0.6);
}
.viz-tracking .viz-track-anchor--2 {
bottom: 20%;
left: 16%;
background: #f4b48a;
box-shadow: 0 0 12px rgba(244, 180, 138, 0.6);
}
.viz-tracking .viz-track-anchor--3 {
top: 40%;
right: 10%;
background: #cba8ef;
box-shadow: 0 0 12px rgba(203, 168, 239, 0.6);
}
@keyframes vizSweep {
to { transform: rotate(360deg); }
}
/* Build a room — layers lighting up in sequence (stacking a mix). */
.viz-layers {
display: flex;
flex-direction: column;
gap: 16px;
width: 210px;
height: auto;
}
.viz-layers span {
height: 16px;
border-radius: 999px;
background: rgba(255, 255, 255, 0.12);
opacity: 0.4;
animation: vizLayer 4.8s ease-in-out infinite;
}
.viz-layers span:nth-child(1) { width: 100%; animation-delay: 0s; background: rgba(114, 242, 192, 0.4); }
.viz-layers span:nth-child(2) { width: 72%; animation-delay: 0.5s; }
.viz-layers span:nth-child(3) { width: 88%; animation-delay: 1s; }
.viz-layers span:nth-child(4) { width: 56%; animation-delay: 1.5s; }
@keyframes vizLayer {
0%, 100% { opacity: 0.32; }
50% { opacity: 1; }
}
.journal-upcoming {
margin-top: 22px;
padding: 24px 26px;
border: 1px dashed var(--line);
border-radius: 18px;
background: rgba(255, 255, 255, 0.01);
}
.journal-upcoming-label {
margin-bottom: 8px;
font: 0.72rem var(--mono);
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--soft);
}
.journal-upcoming-text {
max-width: 62ch;
color: var(--muted);
line-height: 1.6;
}
/* Grid of secondary article cards under the featured post. */
.journal-grid {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 18px;
margin-top: 18px;
}
.journal-card {
display: flex;
flex-direction: column;
padding: clamp(24px, 2.6vw, 32px);
border: 1px solid var(--line);
border-radius: 22px;
background:
linear-gradient(180deg, rgba(255, 255, 255, 0.025), rgba(255, 255, 255, 0.01)),
rgba(255, 255, 255, 0.01);
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
transition: border-color 200ms ease, transform 200ms ease;
}
.journal-card:hover {
border-color: var(--line-strong);
transform: translateY(-2px);
}
.journal-card .journal-card-eyebrow {
margin-bottom: 14px;
}
.journal-card-title {
margin-bottom: 12px;
max-width: 24ch;
font-size: clamp(1.2rem, 1.6vw, 1.5rem);
font-weight: 500;
letter-spacing: -0.015em;
line-height: 1.2;
color: var(--text);
}
.journal-card-excerpt {
flex: 1;
margin-bottom: 20px;
max-width: 46ch;
color: var(--muted);
line-height: 1.6;
}
.journal-card .journal-card-cta {
margin-top: auto;
}
.journal-card:hover .journal-card-cta {
color: var(--accent);
}
/* — Article (single post) — */
.section--article {
max-width: 820px;
padding-top: clamp(40px, 9vh, 96px);
padding-bottom: clamp(56px, 10vh, 120px);
}
.article-back {
margin-bottom: clamp(24px, 4vh, 40px);
}
.article-back a,
.article-more a {
display: inline-flex;
align-items: center;
gap: 8px;
font: 0.8rem var(--mono);
letter-spacing: 0.06em;
text-transform: uppercase;
color: var(--soft);
transition: color 160ms ease;
}
.article-back a:hover,
.article-more a:hover {
color: var(--text);
}
.article-header {
display: grid;
gap: 22px;
margin-bottom: clamp(28px, 4vh, 44px);
}
.article-kicker {
display: flex;
align-items: center;
gap: 12px;
font: 0.78rem var(--mono);
letter-spacing: 0.03em;
color: var(--soft);
}
.article-header h1 {
font-size: clamp(2.1rem, 4.4vw, 3.4rem);
max-width: 18ch;
}
.article-standfirst {
font-size: clamp(1.15rem, 1.7vw, 1.42rem);
line-height: 1.55;
color: var(--muted);
max-width: 52ch;
}
.article-meta {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 10px;
font: 0.82rem var(--mono);
letter-spacing: 0.03em;
color: var(--soft);
}
.article-cover {
position: relative;
margin: clamp(28px, 4vh, 44px) 0;
min-height: 340px;
display: grid;
place-items: center;
border: 1px solid var(--line);
border-radius: 24px;
overflow: hidden;
background:
radial-gradient(circle at 50% 42%, rgba(54, 78, 90, 0.55), rgba(10, 12, 14, 0.98) 68%),
#07090b;
}
.article-cover video,
.article-cover img {
width: 100%;
height: 100%;
object-fit: cover;
}
.article-cover-canvas {
position: absolute;
inset: 0;
}
.article-prose {
display: grid;
gap: 24px;
}
.article-prose p {
font-size: 1.12rem;
line-height: 1.78;
color: rgba(255, 255, 255, 0.82);
}
.article-prose em {
font-style: italic;
color: var(--text);
}
.article-prose strong {
color: var(--text);
font-weight: 600;
}
.article-prose h2 {
margin-top: 18px;
font-size: clamp(1.5rem, 2.4vw, 2rem);
line-height: 1.3;
letter-spacing: -0.02em;
}
.article-prose a {
color: var(--accent);
text-decoration: underline;
text-underline-offset: 3px;
text-decoration-thickness: 1px;
text-decoration-color: rgba(114, 242, 192, 0.4);
transition: text-decoration-color 160ms ease;
}
.article-prose a:hover {
text-decoration-color: var(--accent);
}
.article-list {
display: grid;
gap: 14px;
}
.article-list li {
position: relative;
padding-left: 26px;
font-size: 1.08rem;
line-height: 1.7;
color: rgba(255, 255, 255, 0.82);
}
.article-list li::before {
content: "";
position: absolute;
left: 4px;
top: 0.62em;
width: 7px;
height: 7px;
border-radius: 999px;
background: var(--accent);
opacity: 0.7;
}
.article-list strong {
color: var(--text);
}
.article-callout {
margin: 8px 0;
padding: 22px 26px;
border: 1px solid var(--line);
border-left: 2px solid var(--accent);
border-radius: 14px;
background:
linear-gradient(180deg, rgba(114, 242, 192, 0.05), rgba(114, 242, 192, 0.012)),
rgba(255, 255, 255, 0.01);
}
.article-callout-label {
margin-bottom: 8px;
font: 0.72rem var(--mono);
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--accent);
}
.article-callout p:last-child {
color: var(--muted);
line-height: 1.62;
}
.article-footer {
margin-top: clamp(40px, 6vh, 64px);
display: grid;
gap: 28px;
}
.article-cta {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: space-between;
gap: 24px;
padding: clamp(26px, 3vw, 40px);
border: 1px solid var(--line);
border-radius: 24px;
background:
linear-gradient(180deg, rgba(255, 255, 255, 0.035), rgba(255, 255, 255, 0.012)),
rgba(255, 255, 255, 0.01);
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
}
.article-cta-text {
display: grid;
gap: 8px;
max-width: 46ch;
}
.article-cta-eyebrow {
font: 0.72rem var(--mono);
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--soft);
}
.article-cta-text h3 {
font-size: clamp(1.3rem, 2vw, 1.7rem);
font-weight: 500;
letter-spacing: -0.02em;
}
.article-cta-text p {
color: var(--muted);
line-height: 1.55;
}
/* — FAQ — */
/* Native / accordion: zero JS, accessible, and the answer
text stays in the DOM (good for SEO and in-page search) even when closed.
Used on both the dedicated /faq.html page and the homepage FAQ block. */
.faq-list {
display: grid;
gap: 12px;
max-width: 820px;
}
.faq-item {
border: 1px solid var(--line);
border-radius: 16px;
background: rgba(255, 255, 255, 0.012);
transition: border-color 160ms ease, background-color 160ms ease;
}
.faq-item[open] {
border-color: var(--line-strong);
background: rgba(255, 255, 255, 0.022);
}
.faq-item summary {
list-style: none;
cursor: pointer;
display: flex;
align-items: center;
justify-content: space-between;
gap: 18px;
padding: 19px 22px;
font-size: 1.06rem;
font-weight: 500;
color: var(--text);
}
.faq-item summary::-webkit-details-marker {
display: none;
}
.faq-item summary:hover {
color: var(--text);
}
.faq-item:not([open]) summary:hover {
color: var(--muted);
}
/* Plus → minus toggle, built from two bars; the vertical bar fades and
rotates out when the item opens. */
.faq-icon {
position: relative;
flex-shrink: 0;
width: 14px;
height: 14px;
}
.faq-icon::before,
.faq-icon::after {
content: "";
position: absolute;
background: var(--soft);
transition: transform 220ms ease, opacity 220ms ease;
}
.faq-icon::before {
top: 50%;
left: 0;
width: 100%;
height: 1.5px;
transform: translateY(-50%);
}
.faq-icon::after {
left: 50%;
top: 0;
width: 1.5px;
height: 100%;
transform: translateX(-50%);
}
.faq-item[open] .faq-icon::after {
opacity: 0;
transform: translateX(-50%) rotate(90deg);
}
.faq-answer {
padding: 0 22px 21px;
max-width: 66ch;
color: var(--muted);
line-height: 1.7;
}
.faq-answer p + p {
margin-top: 14px;
}
.faq-answer a,
.page-lead a {
color: var(--accent);
text-decoration: underline;
text-underline-offset: 3px;
text-decoration-thickness: 1px;
text-decoration-color: rgba(114, 242, 192, 0.4);
transition: text-decoration-color 160ms ease;
}
.faq-answer a:hover,
.page-lead a:hover {
text-decoration-color: var(--accent);
}
/* Homepage FAQ block link → full page */
.faq-more-link {
display: inline-flex;
align-items: center;
gap: 8px;
margin-top: 26px;
font-size: 0.95rem;
color: var(--text);
transition: color 160ms ease;
}
.faq-more-link:hover {
color: var(--accent);
}
/* Support CTA at the foot of the FAQ page */
.faq-cta {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: space-between;
gap: 24px;
margin-top: clamp(36px, 5vh, 56px);
padding: clamp(24px, 3vw, 36px);
border: 1px solid var(--line);
border-radius: 22px;
background:
linear-gradient(180deg, rgba(255, 255, 255, 0.03), rgba(255, 255, 255, 0.01)),
rgba(255, 255, 255, 0.01);
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
}
.faq-cta-text {
display: grid;
gap: 6px;
}
.faq-cta-eyebrow {
font: 0.72rem var(--mono);
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--soft);
}
.faq-cta-text h3 {
font-size: clamp(1.25rem, 1.8vw, 1.6rem);
font-weight: 500;
letter-spacing: -0.02em;
}
.faq-cta-text p {
color: var(--muted);
}
/* Homepage FAQ section keeps the list under the section-head, reading width. */
.section--faq .faq-list {
margin-top: clamp(28px, 4vh, 44px);
}
/* Анимация открытия/закрытия аккордеона на главной — нативный
через ::details-content + interpolate-size (Chrome 131+/Safari 18.2+).
В браузерах без поддержки фолбэк безболезненный — мгновенный toggle. */
@supports (interpolate-size: allow-keywords) {
.section--faq {
interpolate-size: allow-keywords;
}
.section--faq .faq-item::details-content {
height: 0;
overflow: clip;
transition:
height 320ms cubic-bezier(0.32, 0.72, 0.24, 1),
content-visibility 320ms allow-discrete;
}
.section--faq .faq-item[open]::details-content {
height: auto;
}
}
/* — Docs layout (GitBook-style) — */
/* Used by /faq.html: a sticky left nav + a reading column. Built as a generic
.docs-* shell so other long-form pages (guides, references) can reuse it. */
.docs-layout {
width: 100%;
max-width: var(--max);
margin: 0 auto;
padding: clamp(32px, 6vh, 64px) var(--gutter) clamp(64px, 10vh, 120px);
display: grid;
grid-template-columns: 256px minmax(0, 1fr);
gap: clamp(32px, 5vw, 72px);
align-items: start;
}
.docs-sidebar {
position: sticky;
top: 88px;
align-self: start;
padding-right: 8px;
}
.docs-nav-title {
margin-bottom: 12px;
font: 0.72rem var(--mono);
letter-spacing: 0.16em;
text-transform: uppercase;
color: var(--soft);
}
.docs-nav-list {
display: grid;
gap: 3px;
}
/* Раскрывающаяся группа на нативном / +
name="docs-nav" — только одна группа открыта одновременно (native
exclusive accordion). interpolate-size позволяет плавно анимировать
height: 0 → auto через ::details-content. */
.docs-nav-group {
interpolate-size: allow-keywords;
}
.docs-nav-group-summary {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
padding: 8px 0;
font-size: 0.92rem;
font-weight: 500;
color: var(--text);
cursor: pointer;
list-style: none;
transition: color 160ms ease;
}
.docs-nav-group-summary::-webkit-details-marker {
display: none;
}
.docs-nav-group-summary::after {
content: "";
width: 7px;
height: 7px;
border-right: 1.5px solid var(--soft);
border-bottom: 1.5px solid var(--soft);
transform: rotate(45deg) translate(-2px, -2px);
transition: transform 240ms cubic-bezier(0.32, 0.72, 0.24, 1);
flex-shrink: 0;
margin-right: 4px;
}
.docs-nav-group[open] > .docs-nav-group-summary::after {
transform: rotate(-135deg) translate(-1px, -1px);
}
.docs-nav-group-summary:hover {
color: var(--accent);
}
.docs-nav-group::details-content {
height: 0;
overflow: clip;
transition:
height 280ms cubic-bezier(0.32, 0.72, 0.24, 1),
content-visibility 280ms allow-discrete;
}
.docs-nav-group[open]::details-content {
height: auto;
}
.docs-nav-sub {
display: grid;
gap: 2px;
margin: 4px 0 10px;
border-left: 1px solid var(--line);
}
.docs-nav-sub a {
display: block;
margin-left: -1px;
padding: 7px 0 7px 16px;
border-left: 1px solid transparent;
font-size: 0.845rem;
line-height: 1.4;
color: var(--soft);
transition: color 160ms ease, border-color 160ms ease;
}
.docs-nav-sub a:hover {
color: var(--text);
}
.docs-nav a.is-active {
color: var(--text);
border-left-color: var(--accent);
}
.docs-content {
min-width: 0;
}
.docs-header {
display: grid;
gap: 18px;
margin-bottom: clamp(32px, 5vh, 52px);
padding-bottom: clamp(24px, 3vh, 32px);
border-bottom: 1px solid var(--line);
}
.docs-header h1 {
font-size: clamp(2.2rem, 4vw, 3.2rem);
max-width: 18ch;
}
.docs-lead {
max-width: 60ch;
font-size: clamp(1.05rem, 1.2vw, 1.2rem);
line-height: 1.6;
color: var(--muted);
}
.docs-section {
margin-top: clamp(44px, 6vh, 68px);
scroll-margin-top: 96px;
}
.docs-section:first-of-type {
margin-top: 0;
}
.docs-section-title {
max-width: none;
margin-bottom: 4px;
padding-bottom: 14px;
border-bottom: 1px solid var(--line);
font-size: clamp(1.5rem, 2.4vw, 2rem);
}
.docs-qa {
margin-top: 30px;
scroll-margin-top: 96px;
}
.docs-qa h3 {
margin-bottom: 10px;
font-size: 1.18rem;
font-weight: 600;
letter-spacing: -0.01em;
color: var(--text);
}
.docs-qa p {
max-width: 68ch;
font-size: 1.06rem;
line-height: 1.72;
color: rgba(255, 255, 255, 0.8);
}
.docs-qa p + p {
margin-top: 14px;
}
.docs-qa strong {
color: var(--text);
font-weight: 600;
}
.docs-qa a {
color: var(--accent);
text-decoration: underline;
text-underline-offset: 3px;
text-decoration-thickness: 1px;
text-decoration-color: rgba(114, 242, 192, 0.4);
transition: text-decoration-color 160ms ease;
}
.docs-qa a:hover {
text-decoration-color: var(--accent);
}
.docs-content .faq-cta {
margin-top: clamp(48px, 7vh, 72px);
}
/* Lead-in paragraph under a section title — turns the section from a bare
Q&A list into documentation. */
.docs-section-intro {
max-width: 68ch;
margin-top: 22px;
font-size: 1.08rem;
line-height: 1.72;
color: var(--muted);
}
.docs-section-intro + .docs-section-intro {
margin-top: 14px;
}
/* Figure slot for diagrams / screenshots. The placeholder is a self-contained
dark panel (no external asset) so the page never looks broken before the
real visual is dropped in — replace .docs-figure-media with an ![]()
/