as final child. */
.product-figure { margin: 0; }
.product-figure > figcaption {
margin-top: 16px;
font-size: 0.9375rem;
line-height: 1.6;
color: var(--rs-text-secondary);
}
.product-figure > figcaption strong {
display: block;
font-family: var(--sans);
font-size: 0.6875rem;
font-weight: 700;
letter-spacing: 0.22em;
text-transform: uppercase;
color: var(--rs-teal-500);
margin-bottom: 6px;
}
.section--navy .product-figure > figcaption { color: var(--rs-text-on-brand-muted); }
.section--navy .product-figure > figcaption strong { color: var(--rs-teal-300); }
.product-figure--caption-top { display: flex; flex-direction: column-reverse; }
.product-figure--caption-top > figcaption { margin: 0 0 16px; }
/* .hero--split — two-column hero variant with screenshot beside copy.
Wrap contents in two children: text + image. */
.hero--split .hero__inner { max-width: var(--container); }
.hero--split .hero__grid {
display: grid;
grid-template-columns: 5fr 7fr;
gap: clamp(32px, 5vw, 80px);
align-items: center;
}
.hero--split .hero__title { font-size: clamp(2rem, 4vw, 3.5rem); }
.hero--split .hero__copy { max-width: 540px; }
.hero--split .hero__lead { font-size: clamp(1.0625rem, 1.4vw, 1.25rem); }
.hero--split .hero__image .product-frame {
transform: perspective(1800px) rotateY(-2deg) rotateX(0.5deg);
transform-origin: left center;
}
@media (max-width: 880px) {
.hero--split .hero__grid { grid-template-columns: 1fr; gap: 40px; }
.hero--split .hero__image .product-frame { transform: none; }
}
/* .outputs-gallery — 2x2 grid of deliverable thumbnails, used on /product/qsra/. */
.outputs-gallery { display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px; }
.outputs-gallery .product-frame { aspect-ratio: 16/10; }
.outputs-gallery .product-frame > img { height: 100%; object-fit: cover; object-position: top center; }
@media (max-width: 880px) { .outputs-gallery { grid-template-columns: 1fr; } }
/* .annotated-figure — for the Schedule Lens annotation overlay pattern.
Position absolute children with .anno class to label parts of the image. */
.annotated-figure { position: relative; }
.annotated-figure .anno {
position: absolute;
font-family: var(--sans);
font-size: 0.6875rem;
font-weight: 700;
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--rs-teal-500);
background: var(--rs-surface-card);
padding: 4px 8px;
border-radius: var(--r-sm);
box-shadow: var(--rs-shadow-1);
white-space: nowrap;
}
.annotated-figure .anno::before {
content: "";
position: absolute;
background: var(--rs-teal-500);
height: 1px;
width: 24px;
}
.annotated-figure .anno--right::before { right: -24px; top: 50%; }
.annotated-figure .anno--left::before { left: -24px; top: 50%; }
/* Hide overlay labels below 720px — the figure becomes too small for them to align cleanly. */
@media (max-width: 720px) {
.annotated-figure .anno { display: none; }
}
/* ---------- Skip link (a11y) ---------- */
.skip-link {
position: absolute;
left: 0; top: 0;
background: var(--rs-surface-brand);
color: var(--rs-text-on-brand);
padding: 12px 18px;
font-weight: 600;
font-size: 0.9375rem;
text-decoration: none;
border-radius: 0 0 var(--r-sm) 0;
transform: translateY(-110%);
transition: transform 140ms var(--ease-out);
z-index: 999;
}
.skip-link:focus { transform: translateY(0); }
/* ---------- Page-specific helpers ---------- */
/* Print */
@media print {
.nav, .footer__base, .nav__toggle { display: none; }
.hero { background: #FFFFFF; color: var(--rs-text-brand); padding: 24px 0; }
.hero::before, .hero::after { display: none; }
.hero__title, .hero__lead { color: var(--rs-text-brand); }
.hero--split .hero__grid { grid-template-columns: 1fr; }
.hero--split .hero__image .product-frame { transform: none; }
.section { padding: 32px 0; break-inside: avoid; }
.section--navy { background: #FFFFFF; color: var(--rs-text-brand); }
.section--navy h1, .section--navy h2, .section--navy h3 { color: var(--rs-text-brand); }
.card, .module, .framework, .price, .product-frame { break-inside: avoid; box-shadow: none; }
a[href^="http"]::after,
a[href^="https"]::after {
content: " (" attr(href) ")";
font-size: 0.75rem;
color: var(--rs-text-secondary);
word-break: break-all;
}
/* Suppress noisy URL annotations for the nav brand, button arrows, etc. */
.nav a[href]::after, .btn[href]::after, .skip-link::after { content: ""; }
}
/* ============== Interactive S-curve toy ============== */
.scurve-toy { margin: 40px auto 0; max-width: 1080px; display: grid;
grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr);
gap: 32px; align-items: center; background: var(--rs-surface-card);
border: 1px solid var(--rs-teal-100); border-radius: 8px; padding: 28px;
box-shadow: 0 6px 24px -16px rgba(0,51,102,0.25); }
.scurve-toy figcaption { grid-column: 1 / -1; margin-top: 8px; padding-top: 16px;
border-top: 1px solid var(--rs-teal-100); color: var(--rs-text-secondary); font-size: 0.85rem; line-height: 1.5; }
.scurve-toy figcaption strong { display: block; color: var(--rs-text-brand); margin-bottom: 4px;
font-family: var(--serif); font-weight: 400; letter-spacing: -0.005em; font-size: 0.95rem; }
.scurve-toy__chart { position: relative; cursor: ew-resize; user-select: none;
-webkit-tap-highlight-color: transparent; border-radius: 4px; }
.scurve-toy__chart:focus-visible { outline: 2px solid var(--rs-border-focus); outline-offset: 4px; }
.scurve-toy__chart svg { display: block; width: 100%; height: auto; touch-action: pan-y; }
[data-scurve-marker] { transition: transform 0.12s ease-out; will-change: transform; }
.scurve-toy__panel { display: flex; flex-direction: column; gap: 24px; }
.scurve-toy__readout { padding: 20px; background: var(--rs-surface-tinted);
border-left: 4px solid var(--rs-teal-500); border-radius: 4px; }
.scurve-toy__readout-num { font-family: var(--serif); font-weight: 400;
font-size: clamp(1.75rem, 3.4vw, 2.6rem); color: var(--rs-text-brand);
letter-spacing: -0.015em; line-height: 1.1; font-feature-settings: "tnum" 1, "lnum" 1; }
.scurve-toy__readout-delta { margin-top: 8px; color: var(--rs-teal-500);
font-weight: 600; font-size: 0.95rem; }
.scurve-toy__controls { display: flex; flex-direction: column; gap: 12px; }
.scurve-toy__toggle { display: inline-flex; align-items: center; gap: 10px;
cursor: pointer; font-size: 0.95rem; color: var(--rs-text-brand); }
.scurve-toy__toggle input { width: 18px; height: 18px; accent-color: var(--rs-teal-500);
cursor: pointer; margin: 0; }
.scurve-toy__hint { margin: 0; color: var(--rs-text-secondary); font-size: 0.85rem;
font-style: italic; }
@media (max-width: 760px) {
.scurve-toy { grid-template-columns: 1fr; padding: 20px; gap: 24px; }
.scurve-toy__chart { cursor: pointer; }
}
@media (prefers-reduced-motion: reduce) {
[data-scurve-marker] { transition: none; }
}
/* === Trust strip === */
.trust-strip {
background: var(--rs-surface-page);
border-top: 1px solid var(--rs-graphite-100);
border-bottom: 1px solid var(--rs-graphite-100);
padding: 32px 0;
}
.trust-strip__label {
font-size: 0.75rem; font-weight: 700; letter-spacing: 0.22em;
text-transform: uppercase; color: var(--rs-text-secondary);
text-align: center; margin-bottom: 20px;
}
.trust-strip__logos {
display: flex; flex-wrap: wrap; justify-content: center; align-items: center;
gap: clamp(20px, 4vw, 48px);
}
.trust-strip__logos img {
height: 56px; width: auto; opacity: 0.85;
transition: opacity 200ms var(--ease-out);
}
.trust-strip__logos img:hover { opacity: 1; }
.trust-strip__disclaimer {
margin: 20px auto 0; font-size: 0.75rem; color: var(--rs-text-secondary);
text-align: center; max-width: 60ch; line-height: 1.55;
}
.trust-strip__disclaimer .link { color: var(--rs-text-link); }
@media (max-width: 560px) {
.trust-strip__logos { gap: 18px; }
.trust-strip__logos img { height: 44px; }
}
/* ============== BOOK-A-SLOT (Cal.com / Calendly embed scaffold) ============== */
.book-slot {
background: var(--rs-surface-card);
border: 1px solid var(--rs-border);
border-radius: var(--r-lg);
padding: 0;
overflow: hidden;
box-shadow: var(--rs-shadow-2);
margin-top: 32px;
}
.book-slot iframe { display: block; }
.contact-options {
display: flex;
gap: 16px;
align-items: center;
flex-wrap: wrap;
margin-bottom: 32px;
padding: 20px;
background: var(--rs-surface-tinted);
border-radius: var(--r-md);
}
.contact-options__primary { flex: 0 0 auto; }
.contact-options__or {
font-size: 0.875rem;
color: var(--rs-text-secondary);
font-style: italic;
}
/* =========================================================================
Visual Devices + Typography signature classes (Phase C — 2026-05-17)
Specs:
- D2 underline-accent .num : _Design/2026-05-17_RS_Visual_Devices.md §D2
- D4 fingerprint watermark : _Design/2026-05-17_RS_Visual_Devices.md §D4
- D5 sentence-finding cap. : _Design/2026-05-17_RS_Visual_Devices.md §D5
- D6 audit-hash footer : _Design/2026-05-17_RS_Visual_Devices.md §D6
- .num-inline (Plex Mono) : _Design/2026-05-17_RS_Typography.md §3.4
========================================================================= */
/* D2 — canonical .num (FT-VV big-number, Georgia + teal-soft underline).
Aliases the existing .kpi__big / .stat__num / .metric-strip__num so
"5,869" and "5,869"
render identically. */
.num {
font-family: var(--serif);
font-weight: 400;
font-size: clamp(2.5rem, 5vw, 4rem);
letter-spacing: -0.02em;
line-height: 1;
color: var(--rs-text-brand);
border-bottom: 2px solid var(--rs-accent-underline);
padding-bottom: 4px;
display: inline-block;
font-variant-numeric: tabular-nums lining-nums;
font-feature-settings: "tnum", "lnum", "kern";
}
.section--navy .num,
.hero--accent .num { color: var(--rs-text-on-brand); border-bottom-color: var(--rs-teal-300); }
/* D2 modifiers — peer suffix (Visual Devices) and unit (Typography §3.3). */
.num__suffix {
font-family: var(--sans);
font-weight: 400;
font-size: 0.5em;
color: var(--rs-teal-500);
vertical-align: super;
margin-left: 0.12em;
letter-spacing: 0;
}
.num__unit {
font-family: var(--sans);
font-weight: 300;
font-size: 0.42em;
color: var(--rs-text-secondary);
margin-left: 0.35em;
letter-spacing: 0;
text-transform: lowercase;
}
/* Typography §3.4 — .num-inline: Plex Mono inline-in-prose numbers
(audit hashes, activity IDs, WBS codes, P-value chips inside paragraphs). */
.num-inline {
font-family: var(--mono);
font-variant-numeric: tabular-nums lining-nums;
font-feature-settings: "tnum", "lnum", "kern";
font-size: 0.95em;
}
/* D6 — audit-hash footer (build-time hash injection target). */
.audit-hash {
font-family: var(--mono);
font-size: 0.78rem;
letter-spacing: 0.04em;
color: var(--rs-text-secondary);
font-feature-settings: "tnum", "lnum";
}
/* D5 — sentence-finding caption (italic narrative above charts). */
.sentence-caption {
font-family: var(--serif);
font-style: italic;
font-size: 1.06rem;
line-height: 1.5;
color: var(--rs-text-secondary);
margin: 0 0 12px;
max-width: 70ch;
}
/* D4 — PDF/web cover watermark hooks (opacity per spec: 12% light, 22% navy). */
.fingerprint--watermark { opacity: 0.12; }
.fingerprint--watermark--on-navy { opacity: 0.22; }