becomes
display:contents — its box and its disclosure semantics drop out, and the
links become direct flex children of the header, sitting inline. */
.nav-disclosure {
position: relative;
}
.nav-toggle {
display: inline-flex;
align-items: center;
gap: var(--s2);
min-height: 44px;
padding: var(--s2) var(--s4);
border: 1px solid var(--border-strong);
border-radius: var(--r-control);
color: var(--text);
font-size: 15px;
font-weight: 600;
cursor: pointer;
list-style: none; /* Firefox marker */
}
.nav-toggle::-webkit-details-marker {
display: none; /* Safari marker */
}
.nav-toggle svg {
width: 20px;
height: 20px;
}
.nav-toggle:hover {
border-color: var(--brand);
color: var(--brand);
}
.site-nav {
display: flex;
flex-direction: column;
gap: var(--s1);
position: absolute;
right: 0;
top: calc(100% + var(--s3));
z-index: 60;
min-width: 250px;
padding: var(--s3);
background: var(--card);
border: 1px solid var(--border);
border-radius: var(--r-card);
box-shadow: var(--shadow-card);
}
.site-nav a {
color: var(--text-2);
text-decoration: none;
font-size: 16px;
font-weight: 500;
}
.site-nav a:hover {
color: var(--text);
}
/* Panel links get a real tap target; the inline desktop nav does not need one. */
.site-nav > a:not(.nav-cta) {
display: flex;
align-items: center;
min-height: 48px;
padding: 0 var(--s3);
border-radius: var(--r-chip);
}
.site-nav > a:not(.nav-cta):hover {
background: var(--surface-sunk);
}
.site-nav .nav-cta {
margin-top: var(--s2);
}
/* The header CTA and the panel CTA are the same action; only one shows at a
time. Below 560px the header has no room for it, so the panel carries it.
Both selectors are two-class on purpose — `.btn` sets display below this
block and would otherwise win on source order. */
.site-header .header-cta {
display: none;
}
@media (min-width: 560px) {
.site-header .header-cta {
display: inline-flex;
}
.site-nav .nav-cta {
display: none;
}
}
@media (min-width: 900px) {
.nav-disclosure {
display: contents;
}
.nav-toggle {
display: none;
}
/* Desktop shows the nav whether or not the
happens to be open, and
browsers hide closed-details content two different ways. Older engines put
display:none on the non-summary children — the `display:flex` on .site-nav
below overrides that. Newer engines (Chrome 128+) use a ::details-content
pseudo-element with content-visibility:hidden, which no rule on the child
can defeat, so it is unset here too. display:contents on the pseudo keeps
the links as direct flex children of the header rather than boxed inside a
wrapper. Engines that don't know the pseudo ignore this block harmlessly. */
.nav-disclosure::details-content {
content-visibility: visible;
display: contents;
}
.site-nav {
position: static;
flex-direction: row;
align-items: center;
gap: var(--s6);
min-width: 0;
padding: 0;
background: none;
border: 0;
border-radius: 0;
box-shadow: none;
}
.site-nav a {
font-size: 15px;
}
.site-nav > a:not(.nav-cta) {
min-height: 0;
padding: 0;
}
.site-nav > a:not(.nav-cta):hover {
background: none;
}
}
/* --------------------------------------------------------- theme toggle -- */
/* Only rendered when JS is present — `html.js` is set inline in . Without
it the control would be inert, and an inert control is worse than none: the
page still themes itself correctly from prefers-color-scheme. */
.theme-toggle {
display: none;
}
.js .theme-toggle {
display: inline-flex;
align-items: center;
justify-content: center;
flex: none;
width: 44px;
height: 44px;
padding: 0;
background: none;
border: 1px solid var(--border-strong);
border-radius: var(--r-control);
color: var(--text-2);
cursor: pointer;
transition: border-color 180ms var(--ease), color 180ms var(--ease);
}
.theme-toggle:hover {
border-color: var(--brand);
color: var(--brand);
}
.theme-toggle svg {
width: 20px;
height: 20px;
}
/* Which glyph shows is pure CSS, so it is correct on first paint in every one
of the three states: explicit dark, explicit light, and system default.
The button shows where you are going, not where you are. */
.theme-toggle .icon-sun {
display: none;
}
@media (prefers-color-scheme: dark) {
:root:not([data-theme="light"]) .theme-toggle .icon-moon {
display: none;
}
:root:not([data-theme="light"]) .theme-toggle .icon-sun {
display: block;
}
}
:root[data-theme="dark"] .theme-toggle .icon-moon {
display: none;
}
:root[data-theme="dark"] .theme-toggle .icon-sun {
display: block;
}
:root[data-theme="light"] .theme-toggle .icon-moon {
display: block;
}
:root[data-theme="light"] .theme-toggle .icon-sun {
display: none;
}
/* ------------------------------------------------------------- buttons -- */
.btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: var(--s2);
min-height: 56px; /* homeowner-primary floor from BRAND.md */
padding: var(--s3) var(--s6);
border-radius: var(--r-control);
border: 1px solid transparent;
font: inherit;
font-size: 16px;
font-weight: 600;
text-decoration: none;
cursor: pointer;
transition: background 180ms var(--ease), border-color 180ms var(--ease),
color 180ms var(--ease), transform 180ms var(--ease);
}
.btn:active {
transform: translateY(1px);
}
.btn--action {
background: var(--action);
color: var(--on-action);
}
.btn--action:hover {
background: var(--action-hover);
color: var(--on-action);
}
.btn--action:active {
background: var(--action-pressed);
}
.btn--brand {
background: var(--brand);
color: var(--on-brand);
}
.btn--brand:hover {
background: var(--brand-hover);
color: var(--on-brand);
}
.btn--quiet {
background: var(--card);
color: var(--text);
border-color: var(--border-strong);
}
.btn--quiet:hover {
border-color: var(--brand);
color: var(--brand);
}
.btn--sm {
min-height: 44px;
padding: var(--s2) var(--s5);
font-size: 15px;
}
.btn-row {
display: flex;
flex-wrap: wrap;
gap: var(--s3);
}
/* ---------------------------------------------------------------- hero -- */
.hero {
padding-top: clamp(var(--s12), 6vw, var(--s20));
padding-bottom: clamp(var(--s12), 6vw, var(--s16));
}
.hero-grid {
display: grid;
gap: clamp(var(--s10), 5vw, var(--s16));
align-items: center;
}
@media (min-width: 1000px) {
.hero-grid {
grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
}
}
.badge {
display: inline-flex;
align-items: center;
gap: var(--s2);
padding: 6px var(--s3);
border: 1px solid var(--border-strong);
border-radius: 999px;
background: var(--card);
font-size: 13px;
font-weight: 600;
color: var(--text-2);
letter-spacing: 0.01em;
margin-bottom: var(--s5);
}
.badge .dot {
width: 8px;
height: 8px;
border-radius: 50%;
background: var(--action);
flex: none;
}
.hero h1 {
font-size: clamp(34px, 5.2vw, 58px);
letter-spacing: -0.025em;
margin-bottom: var(--s5);
max-width: 16ch;
}
.hero-sub {
font-size: clamp(18px, 1.6vw, 21px);
color: var(--text-2);
max-width: 52ch;
margin-bottom: var(--s8);
}
/* The audience line — owners, renters, managers, family. Sits between the CTAs
and the launch-state note, and carries more weight than the note. */
.hero-support {
margin-top: var(--s6);
font-size: 17px;
font-weight: 600;
color: var(--text);
max-width: 48ch;
}
.hero-note {
margin-top: var(--s4);
font-size: 14px;
color: var(--text-muted);
max-width: 46ch;
}
.hero-figure {
margin: 0;
}
.hero-figure figcaption {
margin-top: var(--s3);
font-size: 13px;
color: var(--text-muted);
letter-spacing: 0.02em;
}
/* The hero illustration. Carries the same rounded-sheet silhouette the inline
SVG scene used, so swapping the art doesn't change the hero's shape. The
teal background matches the illustration's own ground, so there is no white
flash while the WebP decodes, and width/height on the ![]()
reserve the box
so nothing shifts. */
.hero-art {
width: 100%;
height: auto;
border: 1px solid var(--border);
border-radius: var(--r-sheet);
background: var(--hero-ground);
}
/* .scene / .pin below are unused on the page right now — the inline SVG hero
they style lives in heroes/hero-block-waking-up.html. Kept so restoring it is
a paste, not a rebuild. Same for the --scene-* tokens. */
.scene {
border: 1px solid var(--border);
border-radius: var(--r-sheet);
background: var(--scene-sky);
overflow: hidden;
}
.scene svg {
width: 100%;
height: auto;
}
/* Pins bloom one house at a time — the offer moving down the block.
The animated element is always an INNER : a CSS transform replaces an
element's SVG transform attribute outright, so animating the positioned
would yank every pin back to the origin. Outer g positions, inner g
animates. transform-box makes `center bottom` resolve against the pin's
own box, so it scales from its tip. */
.pin {
transform-box: fill-box;
transform-origin: center bottom;
animation: pin-bloom 6s var(--ease) infinite;
animation-delay: calc(var(--i) * 0.45s);
opacity: 0;
}
@keyframes pin-bloom {
0% {
opacity: 0;
transform: translateY(10px) scale(0.6);
}
8%,
62% {
opacity: 1;
transform: translateY(0) scale(1);
}
74%,
100% {
opacity: 0;
transform: translateY(-6px) scale(0.85);
}
}
@media (prefers-reduced-motion: reduce) {
.service-tile,
.service-tile:hover,
.service-tile:active {
transform: none;
}
html {
scroll-behavior: auto;
}
.pin {
animation: none;
opacity: 1;
}
.js .reveal {
opacity: 1;
transform: none;
transition: none;
}
}
/* --------------------------------------------------------------- cards -- */
.grid {
display: grid;
gap: var(--s5);
}
.grid--2 {
grid-template-columns: 1fr;
}
.grid--3 {
grid-template-columns: 1fr;
}
@media (min-width: 760px) {
.grid--2 {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.grid--3 {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}
@media (min-width: 1040px) {
.grid--3 {
grid-template-columns: repeat(3, minmax(0, 1fr));
}
}
.card {
background: var(--card);
border: 1px solid var(--border);
border-radius: var(--r-card);
padding: var(--s6);
display: flex;
flex-direction: column;
gap: var(--s3);
}
.card h3 {
font-size: 20px;
letter-spacing: -0.01em;
}
.card p {
color: var(--text-2);
font-size: 16px;
}
.card--feature {
border-radius: var(--r-feature);
box-shadow: var(--shadow-card);
padding: var(--s8);
gap: var(--s4);
}
.card-icon {
width: 40px;
height: 40px;
border-radius: var(--r-chip);
background: var(--surface-brand);
color: var(--brand);
display: grid;
place-items: center;
flex: none;
}
.card-icon svg {
width: 22px;
height: 22px;
}
.step-num {
font-family: var(--font-display);
font-size: 14px;
font-weight: 800;
letter-spacing: 0.06em;
color: var(--brand);
}
/* Numbers are the product — tabular everywhere.
Selector is doubled up because `.card p` (0,1,1) would otherwise beat a bare
`.stat` (0,1,0) and render the headline figure at body size. */
.card .stat,
.stat {
font-family: var(--font-display);
font-variant-numeric: tabular-nums;
font-size: clamp(30px, 3.4vw, 40px);
font-weight: 800;
letter-spacing: -0.02em;
color: var(--text);
}
.card .stat-label,
.stat-label {
color: var(--text-2);
font-size: 15px;
margin-top: var(--s2);
}
.chips {
display: flex;
flex-wrap: wrap;
gap: var(--s2);
margin-top: var(--s2);
}
/* ------------------------------------------------------- service grid -- */
/* Twelve categories, two-up on the narrowest phone and four-up on desktop.
Each tile is a real link, not decoration — so the whole tile is the target
and it comfortably clears the 44px floor at every width. */
.service-grid {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: var(--s3);
}
@media (min-width: 620px) {
.service-grid {
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: var(--s4);
}
}
@media (min-width: 900px) {
.service-grid {
grid-template-columns: repeat(4, minmax(0, 1fr));
}
}
.service-tile {
display: flex;
flex-direction: column;
gap: var(--s3);
min-height: 108px;
padding: var(--s4);
background: var(--card);
border: 1px solid var(--border);
border-radius: var(--r-card);
color: var(--text);
text-decoration: none;
font-size: 16px;
font-weight: 600;
line-height: 1.3;
transition: border-color 180ms var(--ease), background 180ms var(--ease),
transform 180ms var(--ease);
}
.service-tile:hover {
border-color: var(--brand);
background: var(--surface-brand);
color: var(--text);
transform: translateY(-2px);
}
.service-tile:active {
transform: translateY(0);
}
.service-icon {
width: 40px;
height: 40px;
border-radius: var(--r-chip);
background: var(--surface-brand);
color: var(--brand);
display: grid;
place-items: center;
flex: none;
}
.service-icon svg {
width: 22px;
height: 22px;
}
/* On hover the tile takes the icon's tint, so the chip needs to separate again. */
.service-tile:hover .service-icon {
background: var(--card);
}
.chip {
padding: 6px var(--s3);
border: 1px solid var(--border);
border-radius: var(--r-chip);
background: var(--card);
font-size: 14px;
font-weight: 500;
color: var(--text-2);
}
.ticks {
list-style: none;
display: flex;
flex-direction: column;
gap: var(--s3);
}
.ticks li {
position: relative;
padding-left: 30px;
color: var(--text-2);
font-size: 16px;
}
.ticks li::before {
content: "";
position: absolute;
left: 0;
top: 6px;
width: 18px;
height: 18px;
border-radius: 50%;
background: var(--surface-brand);
border: 1px solid var(--brand);
}
.ticks li::after {
content: "";
position: absolute;
left: 5px;
top: 11px;
width: 8px;
height: 4px;
border-left: 2px solid var(--brand);
border-bottom: 2px solid var(--brand);
transform: rotate(-45deg);
}
/* --------------------------------------------------- offer illustration -- */
.offer-card {
background: var(--card);
border: 1px solid var(--border);
border-radius: var(--r-feature);
box-shadow: var(--shadow-card);
padding: var(--s5);
max-width: 380px;
}
.offer-head {
display: flex;
align-items: center;
gap: var(--s3);
margin-bottom: var(--s3);
}
.offer-head img {
width: 36px;
height: 36px;
border-radius: 9px;
}
.offer-app {
font-size: 13px;
font-weight: 600;
color: var(--text-muted);
letter-spacing: 0.02em;
}
.offer-title {
font-family: var(--font-display);
font-size: 19px;
font-weight: 700;
font-variant-numeric: tabular-nums;
margin-bottom: var(--s1);
}
.offer-body {
color: var(--text-2);
font-size: 15px;
margin-bottom: var(--s4);
}
.offer-actions {
display: flex;
gap: var(--s2);
}
.offer-actions .btn {
flex: 1;
}
/* ---------------------------------------------------- two mechanics -- */
/* Nearby Offers and Quote Opportunities, side by side. They are deliberately
the same weight — neither is the "real" DoorYard. */
.mech-grid {
display: grid;
gap: var(--s6);
}
@media (min-width: 860px) {
.mech-grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: var(--s8);
}
}
.mech-panel {
display: flex;
flex-direction: column;
gap: var(--s4);
padding: var(--s6);
background: var(--card);
border: 1px solid var(--border);
border-radius: var(--r-feature);
}
.mech-label {
display: inline-flex;
align-self: flex-start;
padding: 5px var(--s3);
border-radius: var(--r-chip);
background: var(--surface-brand);
color: var(--brand);
font-size: 13px;
font-weight: 700;
letter-spacing: 0.02em;
}
.mech-panel h3 {
font-family: var(--font-display);
font-size: clamp(20px, 2vw, 24px);
font-weight: 700;
letter-spacing: -0.01em;
line-height: 1.25;
}
.mech-body {
color: var(--text-2);
font-size: 17px;
}
/* Pushes the mockup to the bottom so both cards line up when the copy above
them runs to different lengths. */
.mech-panel .offer-card {
margin-top: auto;
max-width: none;
}
.mech-caption {
font-size: 14px;
color: var(--text-muted);
}
.offer-who {
font-size: 15px;
font-weight: 700;
margin-bottom: var(--s3);
}
.offer-who span {
display: block;
font-weight: 500;
color: var(--text-muted);
}
.offer-price {
font-family: var(--font-display);
font-size: 17px;
font-weight: 700;
font-variant-numeric: tabular-nums;
color: var(--text-2);
margin-bottom: var(--s4);
}
/* A quote request is not a priced offer, so it does not get the orange-money
treatment — the accent is brand green and the card leads with the ask. */
.offer-card--quote .offer-app {
color: var(--brand);
}
/* A single positioning line, set large. Not a testimonial — no attribution,
because there is no customer to attribute it to. */
.pull-quote {
font-family: var(--font-display);
font-size: clamp(21px, 2.6vw, 30px);
font-weight: 700;
line-height: 1.25;
letter-spacing: -0.015em;
max-width: 26ch;
padding-left: var(--s5);
border-left: 3px solid var(--action);
margin-bottom: var(--s10);
}
/* Section sub-heading, a step down from .section-title. */
.subhead {
font-size: clamp(20px, 2vw, 24px);
margin-bottom: var(--s4);
}
/* Sub-label above a chip group inside a mechanics panel. */
.mech-sub {
font-size: 13px;
font-weight: 600;
letter-spacing: 0.06em;
text-transform: uppercase;
color: var(--text-muted);
margin-bottom: var(--s3);
}
/* The revenue illustration. Deliberately NOT the .stat treatment — a 42px
figure in a feature card reads as a reported metric, and this is arithmetic.
The label leads, the number sits inline in the sentence that qualifies it. */
.scenario-label {
display: inline-block;
padding: 4px var(--s3);
border-radius: var(--r-chip);
background: var(--surface-sunk);
border: 1px solid var(--border);
font-size: 12px;
font-weight: 700;
letter-spacing: 0.06em;
text-transform: uppercase;
color: var(--text-muted);
margin-bottom: var(--s4);
}
.stat-line {
font-size: 17px;
color: var(--text-2);
}
.stat-line strong {
font-family: var(--font-display);
font-size: 19px;
font-variant-numeric: tabular-nums;
color: var(--text);
}
/* Secondary audience hand-off at the foot of the CTA band. */
.cta-aside {
margin-top: var(--s6);
font-size: 15px;
color: var(--cta-text-2);
}
.cta-aside a {
color: var(--cta-text);
font-weight: 600;
}
/* --------------------------------------------------- service profile -- */
.profile-mock {
background: var(--card);
border: 1px solid var(--border);
border-radius: var(--r-feature);
box-shadow: var(--shadow-card);
padding: var(--s5);
max-width: 420px;
}
.profile-head {
display: flex;
align-items: center;
gap: var(--s3);
padding-bottom: var(--s4);
border-bottom: 1px solid var(--border);
}
.profile-head img {
width: 32px;
height: 32px;
border-radius: 8px;
}
.profile-title {
font-family: var(--font-display);
font-size: 16px;
font-weight: 700;
}
.profile-sub {
font-size: 14px;
color: var(--text-muted);
}
.profile-rows {
list-style: none;
padding: 0;
}
.profile-rows li {
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--s4);
min-height: 48px;
border-bottom: 1px solid var(--border);
}
.profile-rows li:last-child {
border-bottom: 0;
}
.pref-name {
font-size: 16px;
font-weight: 500;
}
.pref-pill {
flex: none;
padding: 4px var(--s3);
border-radius: var(--r-chip);
border: 1px solid transparent;
font-size: 13px;
font-weight: 600;
}
/* Orange is DoorYard's "take action" color and a bookable offer is the one that
carries a price, so offers get it. Quotes take a brand tint, and "both" takes
the brand SOLID — same hue, more weight, which reads as the stronger state and
avoids two near-identical teal tints sitting next to each other. Off is a
plain outline that reads as switched off, not as an error. */
.pref-pill--offers {
background: var(--warning-surface);
color: var(--on-warning-surface);
}
.pref-pill--quotes {
background: var(--surface-brand);
color: var(--brand);
}
.pref-pill--both {
background: var(--brand);
color: var(--on-brand);
}
.pref-pill--off {
color: var(--text-muted);
border-color: var(--border-strong);
}
/* --------------------------------------------------------------- split -- */
.split {
display: grid;
gap: var(--s10);
align-items: center;
}
@media (min-width: 960px) {
.split {
grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
}
/* Source order is always the reading order (heading, then its supporting
card) so the single-column mobile layout makes sense. This only pulls the
card to the left once there are two columns to put it in. */
.split--reverse > *:last-child {
order: -1;
}
}
/* ----------------------------------------------------------------- cta -- */
/* The closing band carries a photograph of a service van on a residential
street at golden hour — the app's own hero-bg, reused here. It sits under a
--cta-surface scrim rather than raw, for two reasons: the band has to stay a
dark surface in BOTH themes, and the photo's brightest pixels are near-white.
At 0.88 the worst case anywhere in the image is 9.5:1 for --cta-text and
6.3:1 for --cta-text-2, so no crop or focal point can break the text.
background-color stays set, so a failed image request degrades to the flat
band it was before. */
.cta-band {
position: relative;
isolation: isolate;
background-color: var(--cta-surface);
background-image: url("/assets/cta-street.webp");
background-size: cover;
background-position: center 58%;
border-radius: var(--r-sheet);
padding: clamp(var(--s10), 6vw, var(--s16));
text-align: center;
color: var(--cta-text);
}
.cta-band::before {
content: "";
position: absolute;
inset: 0;
z-index: -1; /* above the band's own background, below its content */
border-radius: inherit;
background: var(--cta-surface);
opacity: 0.88;
pointer-events: none;
}
.cta-band h2 {
color: var(--cta-text);
font-size: clamp(26px, 3.2vw, 38px);
margin-bottom: var(--s4);
margin-inline: auto;
max-width: 22ch;
}
.cta-band p {
color: var(--cta-text-2);
max-width: 56ch;
margin: 0 auto var(--s8);
}
.cta-band .btn-row {
justify-content: center;
}
/* -------------------------------------------------------------- footer -- */
.site-footer {
border-top: 1px solid var(--border);
padding-block: var(--s12) var(--s10);
background: var(--page);
}
.footer-grid {
display: grid;
gap: var(--s8);
margin-bottom: var(--s10);
}
@media (min-width: 820px) {
.footer-grid {
grid-template-columns: 1.6fr repeat(3, 1fr);
}
}
.footer-about p {
color: var(--text-2);
font-size: 15px;
max-width: 40ch;
margin-top: var(--s4);
}
.footer-col h3 {
font-family: var(--font-body);
font-size: 13px;
font-weight: 700;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--text-muted);
margin-bottom: var(--s4);
}
.footer-col ul {
list-style: none;
display: flex;
flex-direction: column;
gap: var(--s3);
}
.footer-col a {
color: var(--text-2);
text-decoration: none;
font-size: 15px;
}
.footer-col a:hover {
color: var(--brand);
}
.footer-legal {
border-top: 1px solid var(--border);
padding-top: var(--s6);
display: flex;
flex-wrap: wrap;
gap: var(--s4) var(--s6);
align-items: center;
justify-content: space-between;
font-size: 14px;
color: var(--text-muted);
}
.footer-legal a {
color: var(--text-muted);
}
/* ------------------------------------------------------------ doc page -- */
.doc {
padding-block: var(--s12) var(--s16);
}
.doc-inner {
max-width: 760px;
margin-inline: auto;
}
.doc h1 {
font-size: clamp(30px, 4vw, 44px);
margin-bottom: var(--s3);
}
.doc .updated {
color: var(--text-muted);
font-size: 15px;
margin-bottom: var(--s8);
}
.doc h2 {
font-size: 22px;
margin-top: var(--s10);
margin-bottom: var(--s3);
padding-top: var(--s6);
border-top: 1px solid var(--border);
}
.doc h2:first-of-type {
border-top: 0;
padding-top: 0;
margin-top: var(--s8);
}
.doc h3 {
font-size: 18px;
margin-top: var(--s6);
margin-bottom: var(--s2);
}
.doc p,
.doc li {
color: var(--text-2);
font-size: 17px;
margin-bottom: var(--s4);
}
.doc ul,
.doc ol {
padding-left: var(--s6);
margin-bottom: var(--s4);
}
.doc li {
margin-bottom: var(--s2);
}
.doc strong {
color: var(--text);
}
.callout {
background: var(--surface-brand);
border: 1px solid var(--border);
border-left: 3px solid var(--brand);
border-radius: var(--r-control);
padding: var(--s5);
margin-block: var(--s6);
}
.callout p:last-child {
margin-bottom: 0;
}
.doc-toc {
background: var(--card);
border: 1px solid var(--border);
border-radius: var(--r-card);
padding: var(--s5) var(--s6);
margin-bottom: var(--s10);
}
.doc-toc h2 {
border: 0;
padding: 0;
margin: 0 0 var(--s3);
font-size: 13px;
font-family: var(--font-body);
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--text-muted);
}
.doc-toc ol {
margin: 0;
padding-left: var(--s5);
}
.doc-toc li {
margin-bottom: var(--s2);
font-size: 15px;
}
.contact-grid {
display: grid;
gap: var(--s4);
margin-bottom: var(--s8);
}
@media (min-width: 720px) {
.contact-grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}
.contact-card {
background: var(--card);
border: 1px solid var(--border);
border-radius: var(--r-card);
padding: var(--s5);
}
.contact-card h3 {
font-size: 17px;
margin-bottom: var(--s1);
}
.contact-card p {
font-size: 15px;
margin-bottom: var(--s3);
}
.contact-card a {
font-weight: 600;
word-break: break-word;
}
/* ------------------------------------------------------- scroll reveal --
Gated on .js, which a one-line inline script in sets. If scripting
is off — or app.js simply never arrives — the selector never matches and
every section renders visible. Content must never depend on JS to be seen. */
.js .reveal {
opacity: 0;
transform: translateY(14px);
transition: opacity 0.7s var(--ease), transform 0.7s var(--ease);
}
.js .reveal.is-visible {
opacity: 1;
transform: none;
}