* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
html {
/* Match body — iOS shows default white in overscroll / safe-area gaps if html has no fill */
background-color: var(--canvas);
color-scheme: dark;
scroll-behavior: smooth;
overflow-x: clip;
max-width: 100%;
min-height: 100%;
min-height: -webkit-fill-available;
/* Large viewport: reduces short-page gaps when the URL bar resizes (Safari) */
min-height: 100lvh;
/* Lets html::before z-index: -1 sit behind body but still paint */
isolation: isolate;
}
:root {
/* Type: 3 sizes — display, subdisplay, body (Handjet 400) */
--type-display: 240px;
--type-subdisplay: 60px;
--type-body: 20px;
/* Headlines: tiered (display/sub) by default; uniform mode overrides on */
--headline-display-size: var(--type-display);
--headline-sub-size: var(--type-subdisplay);
/* Uniform headlines = body × this (matches ~iPhone landscape feel); tiered mode ignores */
--headline-body-scale: 2.0;
--pricing-gap: 20px;
--canvas: #0a0514;
/* Dark: lilac — align with scroll-face SVG (#bbb4ff) */
--accent: #bbb4ff;
--text: var(--accent);
--rule-line: color-mix(in srgb, var(--accent) 42%, transparent);
--page-gutter: 40px;
--bg-hero: var(--canvas);
--bg-hiw: var(--canvas);
--bg-pricing: var(--canvas);
--divider-line: 1px;
/* HIW + pricing: match hero .brand-line (1px solid text, not --rule-line) */
--pricing-hiw-divider: 1px;
--work-carousel-gap: 96px;
--work-slide-width: min(280px, 42vw);
/* Shared column: one inset on .main-content / .pricing-main; display titles use a small sidebear nudge */
--content-align-inset: 4px;
--handjet-optical-shift: 0.12em;
/* Desktop-only bump via media query — keeps display lines untouched */
--body-tracking: 0em;
--impact-display-sidebear: clamp(5px, 0.55vw, 11px);
/* Hero row: Handjet letters read a few px lower than lining figures in the 0/1/2 buttons */
--hero-header-copy-nudge-y: -0.09em;
/* FX: gap between digit buttons only */
--hero-toggle-gap: 8px;
/* 0/1/2 and AZ slider: wider hit target + track (JS measures actual row width) */
--hero-fx-btn-min-width: 2.25em;
--hero-fx-btn-padding-x: 12px;
/* Legacy: was label–control gap; FX+AZ row has no visible labels */
--hero-fx-label-button-gap: 0px;
/* Slider step indicators (filled circles at start / middle / end) */
--hero-font-slider-dot-size: 5px;
--hero-font-slider-thumb-size: 22px;
/*
* Horizontal gap between FX buttons and slider wrap.
* Thumb is ~22px and centers on the track ends (translate -50%), so ~half the thumb
* sits left of the wrap — need extra space or it overlaps the “2” button.
*/
--hero-fx-font-gap: clamp(28px, 7vw, 48px);
/* FX 0/1/2 buttons: one line of body type + 1px top/bottom border (border-box) */
--hero-fx-toggle-outer-height: calc(var(--type-body) + 2px);
/* Space between FX row and AZ row (touch: avoid one tap hitting both) */
--hero-fx-panel-row-gap: clamp(20px, 5.5vw, 32px);
/* Space between toolbox, FX switch, and theme switch (horizontal) */
--hero-fx-toolbox-gap: clamp(6px, 1.2vw, 12px);
/* Underline-style links → high-contrast pills */
--link-pill-fg: var(--canvas);
--link-pill-bg: var(--accent);
/* FX / theme toggles: filled “on” state */
--fx-toggle-on-bg: var(--accent);
--fx-toggle-on-fg: var(--canvas);
--fx-toggle-on-border: var(--accent);
--ui-focus-ring: color-mix(in srgb, var(--accent) 65%, transparent);
/* Swappable page font (Handjet, Bebas Neue, Courier Prime) */
--font-site: 'Handjet', ui-monospace, monospace;
/* Glitch keyframes (glitch-paths.css): pale flash; light theme overrides to white */
--glitch-demo-font-pale: var(--accent);
/* Scroll glitch: page column + bar jitter + demo polygon glitch (durations re-rolled in JS) */
--glitch-chaos-ms: 520ms;
--glitch-page-ms: 520ms;
--glitch-page-steps: 5;
--glitch-demo-paths-ms: 5000ms;
--glitch-demo-opacity-ms: 5000ms;
--glitch-demo-font-before-ms: 8000ms;
--glitch-demo-font-after-ms: 7000ms;
--glitch-demo-move-before-ms: 10000ms;
--glitch-demo-move-after-ms: 8000ms;
}
html[data-typography="uniform"] {
--headline-display-size: calc(var(--type-body) * var(--headline-body-scale));
--headline-sub-size: calc(var(--type-body) * var(--headline-body-scale));
}
html[data-font-face="1"] {
--font-site: 'Bebas Neue', sans-serif;
}
html[data-font-face="2"] {
/* Tighter set: Courier Prime has no width axis — font-stretch is ignored; use tracking + word-spacing */
--font-site: 'Courier Prime', 'Courier New', Courier, ui-monospace, monospace;
--body-tracking: -0.09em;
word-spacing: -0.06em;
}
@media (min-width: 769px) {
html[data-font-face="2"] {
/* Other faces get +0.035em here — negative values read as clearly “pulled in” on desktop */
--body-tracking: -0.055em;
word-spacing: -0.04em;
}
}
html[data-theme="light"] {
color-scheme: light;
--canvas: #fff5f2;
/* Light scroll-face SVGs (FACE/OKAY-FACE_*.svg, not -LILAC) use this same fill */
--text: #270c0c;
--rule-line: rgba(0, 0, 0, 0.38);
--bg-hero: var(--canvas);
--bg-hiw: var(--canvas);
--bg-pricing: var(--canvas);
--link-pill-fg: #fff5f2;
--link-pill-bg: #270c0c;
--fx-toggle-on-bg: #270c0c;
--fx-toggle-on-fg: #fff5f2;
--fx-toggle-on-border: #270c0c;
--ui-focus-ring: rgba(0, 0, 0, 0.5);
--glitch-demo-font-pale: #ffffff;
}
/* RUOK? — after glitch burst: alternate palette (toggle off by tapping RUOK? again) */
html[data-ruok-palette="alt"][data-theme="light"] {
color-scheme: light;
--canvas: #00ff00;
--accent: #ff0000;
--text: #ff0000;
--rule-line: rgba(255, 0, 0, 0.48);
--bg-hero: var(--canvas);
--bg-hiw: var(--canvas);
--bg-pricing: var(--canvas);
--link-pill-fg: #00ff00;
--link-pill-bg: #ff0000;
--fx-toggle-on-bg: #ff0000;
--fx-toggle-on-fg: #00ff00;
--fx-toggle-on-border: #ff0000;
--ui-focus-ring: rgba(255, 0, 0, 0.6);
--glitch-demo-font-pale: #ffffff;
}
html[data-ruok-palette="alt"]:not([data-theme="light"]) {
color-scheme: dark;
--canvas: #12040c;
--accent: #ff00ff;
--text: #ff00ff;
--rule-line: color-mix(in srgb, var(--accent) 42%, transparent);
--bg-hero: var(--canvas);
--bg-hiw: var(--canvas);
--bg-pricing: var(--canvas);
--link-pill-fg: #12040c;
--link-pill-bg: #ff00ff;
--fx-toggle-on-bg: #ff00ff;
--fx-toggle-on-fg: #12040c;
--fx-toggle-on-border: #ff00ff;
--ui-focus-ring: color-mix(in srgb, var(--accent) 58%, transparent);
--glitch-demo-font-pale: #ffffff;
}
/* Bleed into notch / home indicator — plain inset:0 leaves gaps on iOS Safari. */
html.ruok-palette-flash::after,
html.ruok-palette-flash body::before {
position: fixed;
top: calc(0px - env(safe-area-inset-top, 0px));
right: calc(0px - env(safe-area-inset-right, 0px));
bottom: calc(0px - env(safe-area-inset-bottom, 0px));
left: calc(0px - env(safe-area-inset-left, 0px));
width: auto;
height: auto;
}
html.ruok-palette-flash::after {
content: "";
z-index: 200000;
pointer-events: none;
background: var(--canvas);
}
/* RUOK? fills the viewport; --ruok-flash-sx/sy set in script from measured glyph box. */
html.ruok-palette-flash body::before {
content: "RUOK?";
z-index: 200001;
box-sizing: border-box;
margin: 0;
padding: 0;
display: flex;
align-items: center;
justify-content: center;
font-family: var(--font-site);
font-weight: 500;
font-size: 100vh;
line-height: 0.72;
letter-spacing: -0.14em;
color: var(--text);
pointer-events: none;
white-space: nowrap;
transform-origin: center center;
transform: scaleX(var(--ruok-flash-sx, 1)) scaleY(var(--ruok-flash-sy, 1));
}
/*
* iOS Safari: rubber-band and safe-area “gutters” can briefly show the UA default (white)
* above/below the page. A large fixed plane behind everything keeps #121212 visible.
*/
html::before {
content: "";
position: fixed;
z-index: -1;
left: 50%;
top: 50%;
width: 250vmax;
height: 250vmax;
transform: translate(-50%, -50%);
background-color: var(--canvas);
pointer-events: none;
}
body {
background-color: var(--canvas);
font-family: var(--font-site);
font-size: var(--type-body);
font-weight: 400;
color: var(--text);
min-height: 100vh;
min-height: 100dvh;
min-height: 100lvh;
min-height: -webkit-fill-available;
position: relative;
overflow-x: clip;
max-width: 100%;
}
/*
* Scroll glitch: translate main column only while scrolling — no overlays, filters, or blend.
* html.scroll-glitch-active toggled in script.js; --glitch-* durations/steps updated there.
*/
@media (prefers-reduced-motion: no-preference) {
html.scroll-glitch-active .container {
animation: page-glitch-shift var(--glitch-page-ms) steps(var(--glitch-page-steps), jump-end) infinite;
}
}
@keyframes page-glitch-shift {
0%, 100% {
transform: translate3d(0, 0, 0);
}
22% {
transform: translate3d(-0.5px, 0, 0);
}
44% {
transform: translate3d(0.5px, 0, 0);
}
66% {
transform: translate3d(0, -0.5px, 0);
}
88% {
transform: translate3d(0, 0.5px, 0);
}
}
@media (prefers-reduced-motion: reduce) {
html.scroll-glitch-active .container {
animation: none;
transform: none;
}
}
.container {
width: 100%;
max-width: 100%;
min-height: 100vh;
position: relative;
display: flex;
flex-direction: column;
padding: var(--page-gutter);
padding-bottom: 0;
overflow-x: clip;
}
/* Full-bleed section bands (offset .container horizontal padding) */
.page-band--hero {
position: relative;
background-color: var(--bg-hero);
color: var(--text);
margin: calc(-1 * var(--page-gutter)) calc(-1 * var(--page-gutter)) 0 calc(-1 * var(--page-gutter));
padding: var(--page-gutter) var(--page-gutter) 0 var(--page-gutter);
}
/* Hero controls: FX/AZ toolbox + two hardware-style switches, row aligned to the end */
.hero-fx-cluster {
position: relative;
z-index: 1;
display: flex;
align-items: flex-start;
gap: 10px 16px;
width: 100%;
margin-top: 12px;
}
.hero-fx-cluster__controls {
flex: 1;
min-width: 0;
max-width: 100%;
}
.hero-fx-cluster__controls-grid {
display: flex;
justify-content: flex-end;
width: 100%;
min-width: 0;
align-items: flex-start;
}
.hero-fx-cluster__group {
display: flex;
align-items: flex-end;
gap: 8px;
}
/* Bar only right-aligns the tray; toolbox is out of flow so the hero band height does not jump */
.hero-fx-switches-bar {
display: flex;
justify-content: flex-end;
width: 100%;
min-width: 0;
max-width: 100%;
position: relative;
z-index: 2;
}
/* Narrow positioning context: panel uses right:100% so it sits to the left of the two switches */
.hero-fx-switches-tray {
position: relative;
display: flex;
flex-direction: row;
flex-wrap: wrap;
align-items: flex-start;
gap: var(--hero-fx-toolbox-gap);
flex: 0 0 auto;
min-width: 0;
}
.hero-fx-panel {
display: none;
position: absolute;
top: 0;
right: 100%;
z-index: 3;
flex-direction: column;
align-items: flex-start;
gap: var(--hero-fx-panel-row-gap);
box-sizing: border-box;
border: 1px solid var(--text);
padding: 16px 18px;
min-width: 0;
width: max-content;
max-width: min(560px, calc(100vw - 2 * var(--page-gutter)));
margin-right: var(--hero-fx-toolbox-gap);
background-color: var(--bg-hero);
}
.hero-fx-panel.is-open {
display: flex;
}
.hero-fx-control-row {
display: inline-flex;
align-items: center;
gap: var(--hero-fx-font-gap);
}
.hero-fx-cluster__group--theme {
align-items: flex-start;
box-sizing: border-box;
width: 100%;
max-width: 100%;
display: flex;
justify-content: flex-end;
flex-shrink: 0;
}
.theme-toggle-btn {
appearance: none;
margin: 0;
padding: 0;
border: none;
background: transparent;
color: var(--text);
cursor: pointer;
display: inline-flex;
align-items: center;
justify-content: center;
line-height: 0;
font-family: var(--font-site);
font-size: var(--type-body);
-webkit-tap-highlight-color: transparent;
}
/* ~1.5px stroke on viewBox edge: small inset so line caps are not sheared by overflow-x: clip (html) / glitch host */
#hero-fx-panel-toggle.theme-toggle-btn,
#hero-theme-toggle.theme-toggle-btn {
padding-inline: 3px;
}
.theme-toggle-btn:focus-visible {
outline: 2px solid var(--text);
outline-offset: 2px;
}
#hero-theme-toggle .theme-switch-icon,
#hero-fx-panel-toggle .theme-switch-icon {
display: none;
height: calc(var(--hero-fx-toggle-outer-height) * 1.5 * 1.3);
width: auto;
aspect-ratio: 80.21 / 107;
flex-shrink: 0;
}
/* Same --text as borders, but thick antialiased SVG strokes on the warm canvas can read a hair lighter than 1px hairlines */
#hero-theme-toggle .theme-switch-icon :is(line, polyline),
#hero-fx-panel-toggle .theme-switch-icon :is(line, polyline) {
stroke: var(--text);
}
/* Optical nudge for warm canvas + brown text only; RUOK green/red should stay #ff0000 (no black mix) */
html[data-theme="light"]:not([data-ruok-palette="alt"]) #hero-theme-toggle .theme-switch-icon :is(line, polyline),
html[data-theme="light"]:not([data-ruok-palette="alt"]) #hero-fx-panel-toggle .theme-switch-icon :is(line, polyline) {
stroke: color-mix(in srgb, var(--text) 90%, #000 10%);
}
html[data-theme="light"] #hero-theme-toggle .theme-switch-icon--on {
display: block;
}
html:not([data-theme="light"]) #hero-theme-toggle .theme-switch-icon--off {
display: block;
}
/* FX toolbox: same art as theme; state is open/closed, not color theme */
#hero-fx-panel-toggle[aria-expanded="true"] .theme-switch-icon--on {
display: block;
}
#hero-fx-panel-toggle[aria-expanded="false"] .theme-switch-icon--off {
display: block;
}
.hero-fx-cluster__group--audio {
align-self: flex-end;
flex-shrink: 0;
/* Temporary: hide sound control — remove this line to show again */
display: none;
}
.hero-audio-toggle {
appearance: none;
margin: 0;
padding: 0;
width: 2.25em;
min-height: calc(1em + 2px);
box-sizing: border-box;
border: none;
background: transparent;
color: var(--text);
cursor: pointer;
display: inline-flex;
align-items: center;
justify-content: center;
line-height: 1;
transition:
background-color 0.15s ease,
color 0.15s ease;
}
.hero-audio-toggle:hover {
opacity: 1;
}
.hero-audio-toggle:focus-visible {
outline: 2px solid var(--text);
outline-offset: 2px;
}
.hero-audio-toggle[aria-pressed="true"] {
background-color: transparent;
color: var(--text);
}
.hero-audio-toggle.headline-glitch.text-glitch-demo .glitch-core {
display: inline-flex;
align-items: center;
justify-content: center;
}
/* Glitch host defaults overflow-x: clip and clips SVG line caps at the left edge of the left switch */
.theme-toggle-btn.headline-glitch.text-glitch-demo {
overflow: visible;
overflow-x: visible;
max-width: none;
}
.theme-toggle-btn.headline-glitch.text-glitch-demo .glitch-core {
display: inline-flex;
align-items: center;
justify-content: center;
}
.page-band--hero .top-section-row__logo.headline-glitch.text-glitch-demo .glitch-core {
display: flex;
align-items: center;
justify-content: center;
}
.hero-audio-toggle__icon {
display: block;
flex-shrink: 0;
fill: currentColor;
}
.hero-audio-toggle__icon--sound {
display: none;
}
.hero-audio-toggle__icon--muted {
display: block;
}
.hero-audio-toggle[aria-pressed="true"] .hero-audio-toggle__icon--sound {
display: block;
}
.hero-audio-toggle[aria-pressed="true"] .hero-audio-toggle__icon--muted {
display: none;
}
.hero-fx-cluster__label {
font-family: var(--font-site);
font-size: var(--type-body);
font-weight: 400;
line-height: 1;
letter-spacing: normal;
text-transform: uppercase;
color: var(--text);
-webkit-font-smoothing: antialiased;
user-select: none;
}
.page-band--hero .ruok,
.page-band--hero .header-okay-stack,
.page-band--hero .okay-brand,
.page-band--hero .human-design {
color: var(--text);
}
.page-band--hero .brand-line {
background-color: var(--text);
}
.page-section--hiw {
background-color: var(--bg-hiw);
color: var(--text);
margin-left: calc(-1 * var(--page-gutter));
margin-right: calc(-1 * var(--page-gutter));
}
/* Top Section */
.top-section {
position: relative;
width: 100%;
padding-top: 0;
}
.top-section-row {
display: grid;
grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
align-items: end;
gap: 10px 16px;
margin-bottom: 10px;
}
.top-section-row .ruok {
grid-column: 1;
justify-self: start;
}
.top-section-row__logo {
grid-column: 2;
justify-self: center;
font-size: var(--type-body);
}
.top-section-row__logo-mark {
display: block;
/* 1.96× body: .top-section-row__logo uses var(--type-body) so 1em = body size */
width: min(calc(1.96em * 2055.33 / 800), min(84vw, 400px));
aspect-ratio: 2055.33 / 800;
height: auto;
background-color: var(--text);
-webkit-mask-image: url("OKAY-LOGO-02.svg");
mask-image: url("OKAY-LOGO-02.svg");
-webkit-mask-size: contain;
mask-size: contain;
-webkit-mask-repeat: no-repeat;
mask-repeat: no-repeat;
-webkit-mask-position: center;
mask-position: center;
}
.top-section-row__end {
grid-column: 3;
justify-self: end;
display: flex;
align-items: center;
flex-shrink: 0;
}
@supports (align-items: last baseline) {
.top-section-row {
align-items: last baseline;
}
}
/*
* One typographic lock for the hero header row (UA button styles otherwise skew size).
*/
.page-band--hero .ruok,
.page-band--hero .header-okay-stack {
font-family: var(--font-site);
font-size: var(--type-body);
font-weight: 400;
font-style: normal;
line-height: 1;
letter-spacing: normal;
text-transform: uppercase;
-webkit-font-smoothing: antialiased;
}
/*
* Scroll effect toggle: not scoped under .page-band--hero so trail ghosts (cloned to body)
* still get full button chrome and typography.
*/
.scroll-effect-toggle,
.scroll-effect-toggle__btn {
font-family: var(--font-site);
font-size: var(--type-body);
font-weight: 400;
font-style: normal;
line-height: 1;
letter-spacing: normal;
text-transform: uppercase;
-webkit-font-smoothing: antialiased;
}
/* Optically match button digits (lining figures sit high in the em box vs caps) */
.page-band--hero .ruok,
.page-band--hero .header-okay-stack {
transform: translateY(var(--hero-header-copy-nudge-y));
}
/* OKAY mark: same nudge as header copy, plus shift down by 28.5% of logo box height */
.page-band--hero .top-section-row__logo {
transform: translateY(calc(var(--hero-header-copy-nudge-y) + 28.5%));
}
.scroll-effect-toggle {
display: flex;
align-items: flex-end;
gap: var(--hero-toggle-gap);
color: var(--text);
}
.scroll-effect-toggle__btn {
appearance: none;
margin: 0;
padding: 0 var(--hero-fx-btn-padding-x);
min-width: var(--hero-fx-btn-min-width);
border: 1px solid var(--text);
background: transparent;
color: var(--text);
cursor: pointer;
opacity: 1;
transition:
background-color 0.15s ease,
color 0.15s ease,
border-color 0.15s ease;
/* Pin glyph to the bottom of the line box so baselines meet copy after nudge */
display: inline-flex;
align-items: flex-end;
justify-content: center;
line-height: 1;
}
.scroll-effect-toggle__btn[aria-pressed="true"] {
background-color: var(--fx-toggle-on-bg);
color: var(--fx-toggle-on-fg);
border-color: var(--fx-toggle-on-border);
opacity: 1;
}
.scroll-effect-toggle__btn:hover {
opacity: 1;
}
.scroll-effect-toggle__btn[aria-pressed="true"]:hover {
opacity: 1;
}
.scroll-effect-toggle__btn:focus-visible {
outline: 2px solid var(--text);
outline-offset: 2px;
}
/* Font face: line + circular thumb (3 discrete steps); thumb position is --font-face-pos (JS), not native range geometry */
/* Width matches .scroll-effect-toggle (three FX buttons); --hero-fx-three-btn-width set in script */
.font-face-slider-wrap {
--font-face-pos: 0;
flex: 0 0 var(
--hero-fx-three-btn-width,
calc(3 * var(--hero-fx-btn-min-width) + 2 * var(--hero-toggle-gap))
);
min-width: 0;
max-width: none;
display: flex;
align-items: center;
height: var(--hero-fx-toggle-outer-height);
position: relative;
overflow: visible;
direction: ltr;
cursor: grab;
touch-action: none;
-webkit-tap-highlight-color: transparent;
}
.font-face-slider-wrap.font-face-slider-wrap--dragging {
cursor: grabbing;
}
/* Keyboard only (Tab): soft ring; pointer drag does not focus the hidden input */
.font-face-slider-wrap:has(.font-face-slider:focus-visible) {
outline: 2px solid var(--ui-focus-ring);
outline-offset: 3px;
}
.font-face-slider-thumb {
position: absolute;
z-index: 2;
left: calc(var(--font-face-pos) * 100%);
top: 50%;
transform: translate(-50%, -50%);
width: var(--hero-font-slider-thumb-size);
height: var(--hero-font-slider-thumb-size);
border-radius: 50%;
background-color: var(--text);
pointer-events: none;
box-sizing: border-box;
}
/* Baseline: full wrap width (native range track stays transparent so thumb travel matches) */
.font-face-slider-wrap::after {
content: '';
position: absolute;
left: 0;
right: 0;
top: 50%;
transform: translateY(-50%);
height: var(--pricing-hiw-divider);
background-color: var(--text);
pointer-events: none;
z-index: 0;
}
/*
* Step indicators: % positions use CSS background semantics — (area − image) × %,
* so 50% / 100% truly center / right-align the dot on the line (not calc(50% − half)).
* Left uses 0 so the circle stays inside the track (overflow-x: clip on html/body).
*/
.font-face-slider-wrap::before {
content: '';
position: absolute;
left: 0;
right: 0;
top: 50%;
transform: translateY(-50%);
height: var(--hero-font-slider-dot-size);
pointer-events: none;
z-index: 1;
background-repeat: no-repeat;
background-image:
radial-gradient(
circle closest-side,
var(--text) 100%,
transparent 100%
),
radial-gradient(
circle closest-side,
var(--text) 100%,
transparent 100%
),
radial-gradient(
circle closest-side,
var(--text) 100%,
transparent 100%
);
background-size:
var(--hero-font-slider-dot-size) var(--hero-font-slider-dot-size),
var(--hero-font-slider-dot-size) var(--hero-font-slider-dot-size),
var(--hero-font-slider-dot-size) var(--hero-font-slider-dot-size);
background-position:
0 50%,
50% 50%,
100% 50%;
}
/* Invisible range: keyboard / AT only; pointer hit-testing is on the wrap (script maps x → value) */
.font-face-slider {
position: absolute;
z-index: 3;
inset: 0;
width: 100%;
height: 100%;
margin: 0;
padding: 0;
box-sizing: border-box;
border: none;
opacity: 0;
pointer-events: none;
background: transparent;
background-color: transparent;
box-shadow: none;
-webkit-appearance: none;
appearance: none;
cursor: inherit;
color: var(--text);
font: inherit;
accent-color: transparent;
-webkit-tap-highlight-color: transparent;
-webkit-user-select: none;
user-select: none;
}
.font-face-slider:focus,
.font-face-slider:focus-visible,
.font-face-slider:focus-within,
.font-face-slider:active {
outline: none !important;
outline-offset: 0 !important;
box-shadow: none !important;
background-color: transparent;
}
.font-face-slider::-webkit-slider-runnable-track {
height: var(--pricing-hiw-divider);
background-color: transparent;
border-radius: 0;
border: none;
margin: 0;
-webkit-tap-highlight-color: transparent;
}
.font-face-slider::-webkit-slider-thumb {
-webkit-appearance: none;
width: var(--hero-font-slider-thumb-size);
height: var(--hero-font-slider-thumb-size);
margin-top: calc(
(var(--hero-font-slider-thumb-size) - var(--pricing-hiw-divider)) / -2
);
border-radius: 50%;
background-color: transparent;
border: none;
outline: none;
box-shadow: none;
box-sizing: border-box;
-webkit-tap-highlight-color: transparent;
}
.font-face-slider::-moz-range-track {
height: var(--pricing-hiw-divider);
background-color: transparent;
border-radius: 0;
border: none;
}
.font-face-slider::-moz-range-progress {
background-color: transparent;
}
.font-face-slider::-moz-range-thumb {
-moz-appearance: none;
width: var(--hero-font-slider-thumb-size);
height: var(--hero-font-slider-thumb-size);
margin-top: calc(
(var(--hero-font-slider-thumb-size) - var(--pricing-hiw-divider)) / -2
);
border-radius: 50%;
background-color: transparent;
border: none;
outline: none;
box-shadow: none;
box-sizing: border-box;
}
/* Trail ghosts (mode 2): avoid full-viewport fixed inset on iOS — it leaves solid bars in safe areas until reload */
.scroll-trail-layer {
position: fixed;
left: 0;
right: 0;
top: env(safe-area-inset-top, 0px);
bottom: env(safe-area-inset-bottom, 0px);
pointer-events: none;
z-index: 2;
overflow: hidden;
background: transparent;
background-color: transparent;
}
.scroll-trail-ghost {
/* paint only — `strict` layout containment breaks flex (e.g. pricing cards: flex-grow on list + CTA at bottom) */
contain: paint;
}
.header-okay-stack {
display: flex;
flex-direction: column;
align-items: flex-end;
justify-content: flex-end;
gap: 0.06em;
flex-shrink: 0;
}
.header-okay-stack__line {
display: block;
}
.ruok {
text-align: left;
color: var(--text);
}
.page-band--hero .ruok {
cursor: pointer;
user-select: none;
-webkit-tap-highlight-color: transparent;
}
a.ruok-link {
text-decoration: none;
color: inherit;
}
a.ruok-link:hover {
opacity: 1.0;
}
.brand-line {
width: 100vw;
margin-left: calc(50% - 50vw);
height: var(--divider-line);
background-color: var(--rule-line);
margin-top: 0;
margin-bottom: 0;
}
/* Scroll glitch: line paint lives inside .glitch-core so clip-path affects the rule */
.brand-line.headline-glitch {
background-color: transparent;
}
/* .text-glitch-demo sets max-width:100% — that caps full-bleed 100vw rules to the content column */
.brand-line.headline-glitch.text-glitch-demo {
max-width: none;
width: 100vw;
margin-left: calc(50% - 50vw);
}
.brand-line.headline-glitch .glitch-core {
display: block;
width: 100%;
height: 100%;
}
.brand-line__fill {
display: block;
width: 100%;
height: 100%;
background-color: var(--rule-line);
}
.page-band--hero .brand-line .brand-line__fill {
background-color: var(--text);
}
.section-pixel-rule.headline-glitch .glitch-core {
display: block;
width: 100%;
height: 100%;
}
/*
* Pixels per divider: Pong-style — discrete 4px hops, hard reversals (script sets --pixel-steps / --pixel-travel-px).
* Five on narrow viewports; ten on desktop (extra dots use .section-pixel-rule__dot--desktop).
*/
.section-pixel-rule-mount {
margin-block: 40px;
flex-shrink: 0;
}
.section-pixel-rule {
--section-pixel-size: 4px;
/* Fallbacks until script measures width */
--pixel-travel-px: 400px;
--pixel-steps: 100;
/* Desync (set per instance / dot in script) */
--pixel-row-phase: 0s;
--pixel-row-duration-scale: 1;
--pixel-dot-jitter: 0s;
width: 100vw;
min-width: 100vw;
margin-left: calc(50% - 50vw);
height: var(--section-pixel-size);
overflow: hidden;
position: relative;
}
@keyframes section-pixel-bounce {
from {
transform: translateX(0);
}
to {
transform: translateX(var(--pixel-travel-px));
}
}
.section-pixel-rule__dot {
position: absolute;
top: 0;
left: 0;
width: var(--section-pixel-size);
height: var(--section-pixel-size);
background-color: var(--text);
animation-name: section-pixel-bounce;
/* No easing: each hop is one step; alternate = instant direction flip at the paddles */
animation-timing-function: steps(var(--pixel-steps), end);
animation-iteration-count: infinite;
animation-direction: alternate;
}
/* Slower hops + wide base phase spread; script adds row phase, duration scale, per-dot jitter */
.section-pixel-rule__dot:nth-child(1) {
animation-duration: calc(var(--pixel-steps) * 118ms * var(--pixel-row-duration-scale, 1));
animation-delay: calc(var(--pixel-row-phase, 0s) + var(--pixel-dot-jitter, 0s) - 0s);
}
.section-pixel-rule__dot:nth-child(2) {
animation-duration: calc(var(--pixel-steps) * 168ms * var(--pixel-row-duration-scale, 1));
animation-delay: calc(var(--pixel-row-phase, 0s) + var(--pixel-dot-jitter, 0s) - 8.5s);
}
.section-pixel-rule__dot:nth-child(3) {
animation-duration: calc(var(--pixel-steps) * 96ms * var(--pixel-row-duration-scale, 1));
animation-delay: calc(var(--pixel-row-phase, 0s) + var(--pixel-dot-jitter, 0s) - 17s);
}
.section-pixel-rule__dot:nth-child(4) {
animation-duration: calc(var(--pixel-steps) * 188ms * var(--pixel-row-duration-scale, 1));
animation-delay: calc(var(--pixel-row-phase, 0s) + var(--pixel-dot-jitter, 0s) - 25.5s);
}
.section-pixel-rule__dot:nth-child(5) {
animation-duration: calc(var(--pixel-steps) * 138ms * var(--pixel-row-duration-scale, 1));
animation-delay: calc(var(--pixel-row-phase, 0s) + var(--pixel-dot-jitter, 0s) - 34s);
}
.section-pixel-rule__dot:nth-child(6) {
animation-duration: calc(var(--pixel-steps) * 152ms * var(--pixel-row-duration-scale, 1));
animation-delay: calc(var(--pixel-row-phase, 0s) + var(--pixel-dot-jitter, 0s) - 42.5s);
}
.section-pixel-rule__dot:nth-child(7) {
animation-duration: calc(var(--pixel-steps) * 110ms * var(--pixel-row-duration-scale, 1));
animation-delay: calc(var(--pixel-row-phase, 0s) + var(--pixel-dot-jitter, 0s) - 51s);
}
.section-pixel-rule__dot:nth-child(8) {
animation-duration: calc(var(--pixel-steps) * 176ms * var(--pixel-row-duration-scale, 1));
animation-delay: calc(var(--pixel-row-phase, 0s) + var(--pixel-dot-jitter, 0s) - 59.5s);
}
.section-pixel-rule__dot:nth-child(9) {
animation-duration: calc(var(--pixel-steps) * 128ms * var(--pixel-row-duration-scale, 1));
animation-delay: calc(var(--pixel-row-phase, 0s) + var(--pixel-dot-jitter, 0s) - 68s);
}
.section-pixel-rule__dot:nth-child(10) {
animation-duration: calc(var(--pixel-steps) * 198ms * var(--pixel-row-duration-scale, 1));
animation-delay: calc(var(--pixel-row-phase, 0s) + var(--pixel-dot-jitter, 0s) - 76.5s);
}
@media (max-width: 768px) {
.section-pixel-rule__dot--desktop {
display: none;
}
}
@media (prefers-reduced-motion: reduce) {
.section-pixel-rule__dot {
animation: none;
transform: none;
}
.section-pixel-rule__dot:nth-child(1) {
left: 6%;
}
.section-pixel-rule__dot:nth-child(2) {
left: 28%;
}
.section-pixel-rule__dot:nth-child(3) {
left: 52%;
}
.section-pixel-rule__dot:nth-child(4) {
left: 71%;
}
.section-pixel-rule__dot:nth-child(5) {
left: 89%;
}
}
@media (prefers-reduced-motion: reduce) and (min-width: 769px) {
.section-pixel-rule__dot:nth-child(1) {
left: 4%;
}
.section-pixel-rule__dot:nth-child(2) {
left: 14%;
}
.section-pixel-rule__dot:nth-child(3) {
left: 24%;
}
.section-pixel-rule__dot:nth-child(4) {
left: 34%;
}
.section-pixel-rule__dot:nth-child(5) {
left: 44%;
}
.section-pixel-rule__dot:nth-child(6) {
left: 54%;
}
.section-pixel-rule__dot:nth-child(7) {
left: 64%;
}
.section-pixel-rule__dot:nth-child(8) {
left: 74%;
}
.section-pixel-rule__dot:nth-child(9) {
left: 84%;
}
.section-pixel-rule__dot:nth-child(10) {
left: 93%;
}
}
/* Main Content (below .hero-fx-cluster so overlap paints under the floating FX toolbox) */
.main-content {
margin-top: 80px;
position: relative;
z-index: 0;
padding-bottom: 160px;
padding-inline-start: var(--content-align-inset);
display: flex;
flex-direction: column;
gap: 60px;
min-width: 0;
}
/*
* .hed-line wraps each headline line. Put .hed-prefix only on the first line (uniform “> ”).
* display:contents in tiered mode avoids extra box around legacy giant type.
*/
.hed-line {
display: contents;
}
/*
* Inline + existing
: block +
stacked two breaks (double line spacing).
*/
html[data-typography="uniform"] .hed-line {
display: inline;
line-height: inherit;
}
/* First-line prefix only; in DOM so scroll-glitch data-text matches; hidden in tiered mode */
.hed-prefix {
display: none;
}
html[data-typography="uniform"] .hed-prefix {
display: inline;
}
html[data-typography="uniform"] .main-content {
gap: 80px;
}
.okay-brand {
font-size: var(--headline-display-size);
font-weight: 400;
text-transform: uppercase;
color: var(--text);
font-family: var(--font-site);
line-height: 0.9;
margin-bottom: 0;
padding-inline-start: 0;
margin-inline-start: calc(-1 * var(--impact-display-sidebear));
}
/* Display headlines share --type-display; glitch wrapper defaults clip overflow-x */
.okay-brand.headline-glitch.text-glitch-demo,
.pricing-title.headline-glitch.text-glitch-demo,
.extras-item__title.headline-glitch.text-glitch-demo {
overflow-x: visible;
max-width: none;
}
html[data-typography="uniform"] .okay-brand {
line-height: 1;
margin-inline-start: 0;
}
.sub-content {
margin-left: 0;
padding-inline-start: 0;
}
.human-design {
font-size: var(--type-body);
font-weight: 400;
text-transform: uppercase;
color: var(--text);
font-family: var(--font-site);
letter-spacing: var(--body-tracking);
margin-bottom: 16px;
}
/* Hero: flex avoids collapse OKAY BRAND → line (60px gap); line → nav matches 16px rhythm */
.main-content > .sub-content {
display: flex;
flex-direction: column;
align-items: flex-start;
}
.main-content > .sub-content > .human-design {
margin-bottom: 0;
}
.main-content > .sub-content > .anchor-nav-row {
margin-top: 60px;
}
.email {
font-size: var(--type-body);
color: var(--link-pill-fg);
background-color: var(--link-pill-bg);
text-decoration: none;
font-family: var(--font-site);
font-weight: 400;
text-transform: uppercase;
letter-spacing: var(--body-tracking);
display: inline-block;
width: fit-content;
max-width: 100%;
padding: 0.14em 0.4em;
box-decoration-break: clone;
-webkit-box-decoration-break: clone;
transition: opacity 0.15s ease, filter 0.15s ease;
}
.email:hover {
opacity: 0.92;
filter: brightness(0.97);
}
.email:focus-visible {
outline: 2px solid var(--text);
outline-offset: 3px;
}
.email-cta {
text-transform: none;
}
.sub-content .email + .email {
margin-top: 16px;
}
.anchor-nav-row {
display: flex;
flex-direction: column;
align-items: flex-start;
margin-top: 0;
margin-bottom: 0;
/* padding avoids margin collapse with block .email children eating the gap above OKAY, GO */
padding-bottom: 16px;
}
.anchor-nav-row .email + .email {
margin-top: 16px;
}
.page-section {
padding: 160px 0;
}
/* Must follow .page-section: its padding shorthand would otherwise clear side padding */
.page-section.page-section--hiw {
padding-left: var(--page-gutter);
padding-right: var(--page-gutter);
}
.page-section.page-section--work {
background-color: var(--canvas);
color: var(--text);
margin-left: calc(-1 * var(--page-gutter));
margin-right: calc(-1 * var(--page-gutter));
padding-left: var(--page-gutter);
padding-right: var(--page-gutter);
}
.page-section--work .pricing-main {
margin-top: 0;
max-width: none;
width: 100%;
}
.page-section--work .sub-content {
color: var(--text);
}
.page-section--work .pricing-title {
color: var(--text);
}
.work-carousel {
--work-slide-width: 100vw;
--work-carousel-gap: 0px;
width: 100vw;
margin-left: calc(-1 * (var(--page-gutter) + var(--content-align-inset)));
margin-right: 0;
}
.work-slide__copy {
padding-left: var(--page-gutter);
padding-right: var(--page-gutter);
}
.work-carousel__viewport {
overflow-x: auto;
overflow-y: hidden;
width: 100%;
scroll-snap-type: x mandatory;
scroll-behavior: smooth;
-webkit-overflow-scrolling: touch;
scrollbar-width: none;
overscroll-behavior-x: contain;
}
.work-carousel__viewport::-webkit-scrollbar {
display: none;
}
.work-carousel__viewport:focus-visible {
outline: 2px solid var(--ui-focus-ring);
outline-offset: 4px;
}
.work-carousel__track {
display: flex;
flex-direction: row;
flex-wrap: nowrap;
align-items: flex-start;
gap: var(--work-carousel-gap);
width: max-content;
padding-bottom: 4px;
box-sizing: border-box;
}
.work-slide {
flex: 0 0 var(--work-slide-width);
width: var(--work-slide-width);
max-width: 100%;
box-sizing: border-box;
scroll-snap-align: start;
}
.work-slide__card {
width: 100%;
display: flex;
flex-direction: column;
box-sizing: border-box;
background-color: transparent;
}
.work-slide__frame {
aspect-ratio: 1 / 1;
width: 100%;
max-width: 100%;
border: none;
border-bottom: var(--divider-line) solid var(--rule-line);
display: flex;
align-items: center;
justify-content: center;
background-color: transparent;
box-sizing: border-box;
}
.work-slide__logo {
display: block;
width: min(55%, 140px);
max-width: 100%;
height: auto;
max-height: 50%;
margin: 0 auto;
object-fit: contain;
opacity: 1.0;
}
/* Tile-grid frame: grid drives height (aspect-ratio per breakpoint), no centering box */
.work-slide__frame:has(.work-tile-grid) {
border-bottom: 0;
aspect-ratio: auto;
height: auto;
display: block;
}
/*
* Tile grid: explicit borders on each tile (right + bottom) for crisp 1px dividers.
* Default (desktop / large): 6 equal squares in one row.
* iPad-ish (max 1199): 3x2.
* Mobile (max 599): 3x4 with two big (2x2) tiles.
*/
.work-tile-grid {
display: grid;
grid-template-columns: repeat(6, 1fr);
grid-template-rows: 1fr;
aspect-ratio: 6 / 1;
gap: 0;
border-top: var(--pricing-hiw-divider) solid var(--text);
border-left: var(--pricing-hiw-divider) solid var(--text);
width: 100%;
}
@media (max-width: 1199px) {
.work-tile-grid {
grid-template-columns: repeat(3, 1fr);
grid-template-rows: repeat(2, 1fr);
aspect-ratio: 3 / 2;
}
}
@media (max-width: 599px) {
.work-tile-grid {
grid-template-columns: repeat(3, 1fr);
grid-template-rows: repeat(4, 1fr);
aspect-ratio: 3 / 4;
}
.work-tile--big {
grid-column: 1 / span 2;
grid-row: 1 / span 2;
}
.work-tile--big-2 {
grid-column: 2 / span 2;
grid-row: 3 / span 2;
}
}
.work-tile {
position: relative;
width: 100%;
height: 100%;
overflow: hidden;
min-width: 0;
min-height: 0;
cursor: pointer;
-webkit-tap-highlight-color: transparent;
touch-action: manipulation;
border-right: var(--pricing-hiw-divider) solid var(--text);
border-bottom: var(--pricing-hiw-divider) solid var(--text);
}
/* Selected tile: inset frame in --text color. Real element (not ::after) so it survives the glitch wrap, which uses ::before/::after for chroma layers */
.work-tile__frame {
display: none;
position: absolute;
inset: 0;
border: 4px solid var(--text);
box-sizing: border-box;
pointer-events: none;
z-index: 3;
}
.work-tile.is-selected .work-tile__frame {
display: block;
}
/* Glitch wrap on tiles: glitch-core fills the tile so polygon-clip carves the logo */
.work-tile.headline-glitch.text-glitch-demo .glitch-core {
position: absolute;
inset: 0;
display: block;
}
@media (prefers-reduced-motion: no-preference) {
/* Mirror header logo / theme toggle: hide the chroma pseudos (no text to duplicate) */
html.scroll-glitch-active .work-tile.headline-glitch.text-glitch-demo::before,
html.scroll-glitch-active .work-tile.headline-glitch.text-glitch-demo::after {
display: none;
}
html.scroll-glitch-active .work-tile.headline-glitch.text-glitch-demo .glitch-core {
animation:
glitch-demo-paths var(--glitch-demo-paths-ms) step-end infinite,
headline-chaos-burst var(--glitch-chaos-ms) linear infinite;
animation-delay: var(--glitch-phase, 0ms), var(--glitch-phase, 0ms);
}
}
/* Tile logo: SVG rendered as a mask, painted with --text so it adapts to theme */
.work-tile__logo {
position: absolute;
inset: 0;
background-color: var(--text);
-webkit-mask-image: var(--logo-url);
mask-image: var(--logo-url);
-webkit-mask-size: 60% auto;
mask-size: 60% auto;
-webkit-mask-repeat: no-repeat;
mask-repeat: no-repeat;
-webkit-mask-position: center;
mask-position: center;
pointer-events: none;
}
/* Tile overlay: optional second image layered on top of the masked logo, kept at original colors. Hidden until JS sets src. */
.work-tile__overlay {
display: none;
position: absolute;
top: 50%;
left: 50%;
width: 60%;
height: 60%;
transform: translate(-50%, -50%);
object-fit: contain;
object-position: center;
pointer-events: none;
z-index: 2;
}
.work-tile__overlay[src] {
display: block;
}
.work-tile:focus-visible {
outline: 2px solid var(--ui-focus-ring);
outline-offset: 4px;
}
.work-slide__copy {
padding: 12px;
text-align: left;
box-sizing: border-box;
}
.work-slide__copy p {
margin: 0;
}
.work-slide__name {
font-family: var(--font-site);
font-size: calc(var(--type-body) * var(--headline-body-scale));
font-weight: 400;
line-height: 0.9;
text-transform: uppercase;
letter-spacing: 0.03em;
color: var(--text);
margin: 0 0 8px;
}
.work-slide__desc {
font-family: var(--font-site);
font-size: var(--type-body);
font-weight: 400;
line-height: 1.35;
letter-spacing: var(--body-tracking);
text-transform: uppercase;
color: var(--text);
margin: 4px 0 0;
max-width: 40em;
}
.work-slide__scope,
.work-slide__year {
font-family: var(--font-site);
font-size: var(--type-body);
font-weight: 400;
line-height: 1.4;
text-transform: uppercase;
letter-spacing: 0.02em;
color: var(--text);
}
.work-slide__scope {
margin-top: 8px;
}
.work-slide__year {
margin-top: 4px;
}
@media (prefers-reduced-motion: reduce) {
.work-carousel__viewport {
scroll-behavior: auto;
}
}
@media (min-width: 900px) {
:root {
--work-slide-width: 280px;
}
}
@media (max-width: 520px) {
:root {
--work-slide-width: min(240px, 78vw);
}
}
#pricing,
#extras,
#how-it-works,
#selected-work {
scroll-margin-top: 48px;
}
.page-section > .pricing-main {
margin-top: 0;
}
.page-section--pre-footer {
background-color: var(--bg-pricing);
margin-left: calc(-1 * var(--page-gutter));
margin-right: calc(-1 * var(--page-gutter));
padding-left: var(--page-gutter);
padding-right: var(--page-gutter);
padding-bottom: 96px;
}
.site-footer {
margin-top: auto;
flex-shrink: 0;
background-color: var(--bg-pricing);
margin-left: calc(-1 * var(--page-gutter));
margin-right: calc(-1 * var(--page-gutter));
padding-left: var(--page-gutter);
padding-right: var(--page-gutter);
padding-bottom: var(--page-gutter);
}
.site-footer .bottom-section {
margin-top: 0;
}
/* Final tagline inside the PDF417 band — paired tightly under the barcode */
.page-tagline {
font-family: var(--font-site);
font-size: var(--type-body);
font-weight: 400;
line-height: 1;
letter-spacing: var(--body-tracking);
text-transform: uppercase;
color: var(--text);
margin: 8px 0 0;
}
/* Bottom Section */
.bottom-section {
display: flex;
justify-content: space-between;
align-items: flex-end;
}
.footer-wordmark {
font-family: var(--font-site);
font-weight: 400;
font-size: calc(var(--type-body) * 1.00);
line-height: 1;
text-transform: uppercase;
letter-spacing: 0.04em;
color: var(--text);
flex-shrink: 0;
}
.copyright {
font-size: var(--type-body);
line-height: 1;
font-weight: 400;
text-transform: uppercase;
letter-spacing: var(--body-tracking);
color: var(--text);
font-family: var(--font-site);
text-align: right;
}
/* Pixel face + back-to-top: stacked fixed corner (face always visible) */
.floating-corner {
position: fixed;
z-index: 100;
bottom: max(72px, calc(env(safe-area-inset-bottom, 0px) + 56px));
right: max(32px, calc(env(safe-area-inset-right, 0px) + 20px));
display: flex;
flex-direction: column;
align-items: flex-end;
gap: 12px;
pointer-events: none;
}
.scroll-face-glitch-wrap {
display: inline-block;
line-height: 0;
vertical-align: bottom;
cursor: pointer;
pointer-events: auto;
}
.scroll-face-glitch-wrap.headline-glitch.text-glitch-demo {
overflow-x: visible;
max-width: none;
}
.scroll-face {
display: block;
width: calc(72px * 0.7);
height: calc(72px * 0.7);
flex-shrink: 0;
pointer-events: auto;
cursor: pointer;
user-select: none;
-webkit-user-drag: none;
image-rendering: pixelated;
image-rendering: crisp-edges;
}
.back-to-top {
position: static;
bottom: auto;
right: auto;
z-index: 0;
display: inline-flex;
align-items: center;
justify-content: center;
margin: 0;
padding: 10px 14px;
appearance: none;
background-color: var(--text);
border: 2px solid var(--text);
cursor: pointer;
touch-action: manipulation;
font-family: var(--font-site);
font-size: var(--type-body);
font-weight: 400;
letter-spacing: 0.06em;
text-align: right;
line-height: 1.15;
text-transform: uppercase;
color: var(--canvas);
opacity: 0;
visibility: hidden;
pointer-events: none;
transition: opacity 0.2s ease, visibility 0.2s ease;
}
.back-to-top.is-visible {
opacity: 1;
visibility: visible;
pointer-events: auto;
}
.back-to-top:focus-visible {
outline: 2px solid var(--text);
outline-offset: 3px;
}
@media (prefers-reduced-motion: reduce) {
.back-to-top {
transition: none;
}
}
/* Pricing / how-it-works column */
.pricing-main {
flex: 1 1 auto;
margin-top: 80px;
min-height: 0;
display: flex;
flex-direction: column;
width: 100%;
max-width: none;
margin-left: 0;
margin-right: 0;
position: relative;
padding-inline-start: var(--content-align-inset);
}
.pricing-title {
font-family: var(--font-site);
font-size: var(--headline-display-size);
font-weight: 400;
text-transform: uppercase;
line-height: 0.9;
color: var(--text);
margin-bottom: 60px;
padding-inline-start: 0;
margin-inline-start: calc(-1 * var(--impact-display-sidebear));
}
html[data-typography="uniform"] .pricing-title {
line-height: 1;
margin-bottom: 72px;
margin-inline-start: 0;
}
/*
* Text glitch (reference: polygon clip + RGB offset pseudos + stepped opacity/font/move).
* Keyframes live in glitch-paths.css. Active only while html.scroll-glitch-active (scroll).
*/
.headline-glitch {
position: relative;
--glitch-phase: 0ms;
}
.headline-glitch.text-glitch-demo,
.text-glitch-host {
max-width: 100%;
overflow-x: clip;
}
.headline-glitch.text-glitch-demo .glitch-core {
position: relative;
z-index: 2;
clip-path: none;
}
.headline-glitch.text-glitch-demo::before,
.headline-glitch.text-glitch-demo::after {
content: attr(data-text);
position: absolute;
left: 0;
top: 0;
width: 100%;
max-width: 100%;
box-sizing: border-box;
z-index: 0;
pointer-events: none;
white-space: pre-line;
overflow: hidden;
font: inherit;
font-size: inherit;
font-family: inherit;
font-weight: inherit;
letter-spacing: inherit;
text-transform: inherit;
text-align: inherit;
line-height: inherit;
color: inherit;
/* Chroma layers only while scrolling — otherwise they sit on top as static tint */
visibility: hidden;
opacity: 0;
}
.headline-glitch.text-glitch-demo::before {
color: #ff0000;
top: 5px;
left: 5px;
}
.headline-glitch.text-glitch-demo::after {
color: #00ff00;
top: 3px;
left: -4px;
}
.headline-glitch--block .glitch-core {
display: block;
width: 100%;
max-width: 100%;
}
/* Inner host so parent keeps its ::before bullet */
.text-glitch-host {
display: block;
width: 100%;
max-width: 100%;
}
.headline-glitch--flex-col-end .glitch-core {
display: flex;
flex-direction: column;
align-items: flex-end;
gap: 0.06em;
line-height: 1;
}
/* Glitch sets position: relative — anchor via .floating-corner; keep fixed if markup ever omits wrapper */
.back-to-top.headline-glitch {
position: fixed;
}
.floating-corner .back-to-top.headline-glitch {
position: static;
}
.back-to-top.headline-glitch .glitch-core {
display: inline-flex;
flex-direction: column;
align-items: flex-end;
justify-content: center;
text-align: right;
max-width: 100%;
}
@media (prefers-reduced-motion: no-preference) {
html.scroll-glitch-active .headline-glitch.text-glitch-demo::before,
html.scroll-glitch-active .headline-glitch.text-glitch-demo::after {
visibility: visible;
}
html.scroll-glitch-active .headline-glitch.text-glitch-demo .glitch-core {
animation: glitch-demo-paths var(--glitch-demo-paths-ms) step-end infinite;
animation-delay: var(--glitch-phase, 0ms);
}
html.scroll-glitch-active .headline-glitch.text-glitch-demo::before {
animation:
glitch-demo-paths var(--glitch-demo-paths-ms) step-end infinite,
glitch-demo-opacity var(--glitch-demo-opacity-ms) step-end infinite,
glitch-demo-font var(--glitch-demo-font-before-ms) step-end infinite,
glitch-demo-move var(--glitch-demo-move-before-ms) step-end infinite;
animation-delay:
var(--glitch-phase, 0ms),
var(--glitch-phase, 0ms),
var(--glitch-phase, 0ms),
var(--glitch-phase, 0ms);
animation-fill-mode: none, backwards, backwards, backwards;
}
html.scroll-glitch-active .headline-glitch.text-glitch-demo::after {
animation:
glitch-demo-paths var(--glitch-demo-paths-ms) step-end infinite,
glitch-demo-opacity var(--glitch-demo-opacity-ms) step-end infinite,
glitch-demo-font var(--glitch-demo-font-after-ms) step-end infinite,
glitch-demo-move var(--glitch-demo-move-after-ms) step-end infinite;
animation-delay:
var(--glitch-phase, 0ms),
var(--glitch-phase, 0ms),
var(--glitch-phase, 0ms),
var(--glitch-phase, 0ms);
animation-fill-mode: none, backwards, backwards, backwards;
}
/* Solid bars & pixel row: light jitter only */
html.scroll-glitch-active .headline-glitch--bar.headline-glitch {
animation: headline-chaos-burst var(--glitch-chaos-ms) linear infinite;
animation-delay: var(--glitch-phase, 0ms);
}
/*
* Moving pixel row: text polygon clip-paths assume tall boxes and wipe ~4px strips.
* Inset chops (horizontal only) + row jitter keep dots visible while scrolling glitch is on.
*/
html.scroll-glitch-active .section-pixel-rule.headline-glitch.text-glitch-demo .glitch-core {
animation: glitch-pixel-row-paths var(--glitch-demo-paths-ms) step-end infinite;
animation-delay: var(--glitch-phase, 0ms);
}
html.scroll-glitch-active .section-pixel-rule.headline-glitch {
animation: headline-chaos-burst var(--glitch-chaos-ms) linear infinite;
animation-delay: var(--glitch-phase, 0ms);
}
html.scroll-glitch-active .section-pixel-rule.headline-glitch.text-glitch-demo::before,
html.scroll-glitch-active .section-pixel-rule.headline-glitch.text-glitch-demo::after {
display: none;
}
/*
* Scroll face: same stack as other text (glitch-demo-paths + ::before/::after). Chaos is em-based —
* large font-size on .glitch-core only so headline-chaos-burst matches the rest of the page.
*/
html.scroll-glitch-active .scroll-face-glitch-wrap.headline-glitch.text-glitch-demo .glitch-core {
font-size: calc(144px * 0.7);
line-height: 0;
animation:
glitch-demo-paths var(--glitch-demo-paths-ms) step-end infinite,
headline-chaos-burst var(--glitch-chaos-ms) linear infinite;
animation-delay: var(--glitch-phase, 0ms), var(--glitch-phase, 0ms);
}
/* Hero sound control: SVG-only — same polygon clip on icons as FX toggles; no text chroma layers */
html.scroll-glitch-active .hero-audio-toggle.headline-glitch.text-glitch-demo::before,
html.scroll-glitch-active .hero-audio-toggle.headline-glitch.text-glitch-demo::after {
display: none;
}
html.scroll-glitch-active .hero-audio-toggle.headline-glitch.text-glitch-demo .glitch-core {
animation:
glitch-demo-paths var(--glitch-demo-paths-ms) step-end infinite,
headline-chaos-burst var(--glitch-chaos-ms) linear infinite;
animation-delay: var(--glitch-phase, 0ms), var(--glitch-phase, 0ms);
}
/* Theme switch + header logo: SVG / mask only — same polygon clip + chaos as audio + FX buttons */
html.scroll-glitch-active .theme-toggle-btn.headline-glitch.text-glitch-demo::before,
html.scroll-glitch-active .theme-toggle-btn.headline-glitch.text-glitch-demo::after,
html.scroll-glitch-active .page-band--hero .top-section-row__logo.headline-glitch.text-glitch-demo::before,
html.scroll-glitch-active .page-band--hero .top-section-row__logo.headline-glitch.text-glitch-demo::after {
display: none;
}
html.scroll-glitch-active .theme-toggle-btn.headline-glitch.text-glitch-demo .glitch-core,
html.scroll-glitch-active .page-band--hero .top-section-row__logo.headline-glitch.text-glitch-demo .glitch-core {
animation:
glitch-demo-paths var(--glitch-demo-paths-ms) step-end infinite,
headline-chaos-burst var(--glitch-chaos-ms) linear infinite;
animation-delay: var(--glitch-phase, 0ms), var(--glitch-phase, 0ms);
}
}
/* Smaller jitter + no horizontal page nudge on narrow screens (avoids sideways scroll) */
@media (prefers-reduced-motion: no-preference) and (max-width: 640px) {
html.scroll-glitch-active .container {
animation: page-glitch-shift-tight var(--glitch-page-ms) steps(var(--glitch-page-steps), jump-end) infinite;
}
html.scroll-glitch-active .headline-glitch.text-glitch-demo::before {
animation:
glitch-demo-paths var(--glitch-demo-paths-ms) step-end infinite,
glitch-demo-opacity var(--glitch-demo-opacity-ms) step-end infinite,
glitch-demo-font var(--glitch-demo-font-before-ms) step-end infinite,
glitch-demo-move-tight var(--glitch-demo-move-before-ms) step-end infinite;
animation-delay:
var(--glitch-phase, 0ms),
var(--glitch-phase, 0ms),
var(--glitch-phase, 0ms),
var(--glitch-phase, 0ms);
animation-fill-mode: none, backwards, backwards, backwards;
}
html.scroll-glitch-active .headline-glitch.text-glitch-demo::after {
animation:
glitch-demo-paths var(--glitch-demo-paths-ms) step-end infinite,
glitch-demo-opacity var(--glitch-demo-opacity-ms) step-end infinite,
glitch-demo-font var(--glitch-demo-font-after-ms) step-end infinite,
glitch-demo-move-tight var(--glitch-demo-move-after-ms) step-end infinite;
animation-delay:
var(--glitch-phase, 0ms),
var(--glitch-phase, 0ms),
var(--glitch-phase, 0ms),
var(--glitch-phase, 0ms);
animation-fill-mode: none, backwards, backwards, backwards;
}
}
@keyframes page-glitch-shift-tight {
0%, 100% {
transform: translate3d(0, 0, 0);
}
25% {
transform: translate3d(0, -0.5px, 0);
}
50% {
transform: translate3d(0, 0.5px, 0);
}
75% {
transform: translate3d(0, -0.5px, 0);
}
}
@keyframes headline-chaos-burst {
0%, 100% {
transform: translateX(0) skew(0deg);
opacity: 1;
}
6% {
transform: translateX(0.01em) skew(0.07deg);
opacity: 0.98;
}
17% {
transform: translateX(-0.014em) skew(-0.26deg);
opacity: 1;
}
29% {
transform: translateX(0.008em) skew(0.3deg);
opacity: 0.975;
}
41% {
transform: translateX(-0.006em) skew(0deg);
opacity: 1;
}
52% {
transform: translateX(0.015em) skew(0.24deg);
opacity: 0.97;
}
63% {
transform: translateX(-0.009em) skew(-0.15deg);
opacity: 1;
}
76% {
transform: translateX(0.012em) skew(-0.34deg);
opacity: 0.98;
}
88% {
transform: translateX(-0.005em) skew(0.12deg);
opacity: 0.992;
}
95% {
transform: translateX(0.003em) skew(0deg);
opacity: 1;
}
}
@keyframes glitch-pixel-row-paths {
0%, 100% {
clip-path: inset(0 0 0 0);
}
8% {
clip-path: inset(0 14% 0 22%);
}
16% {
clip-path: inset(0 4% 0 9%);
}
24% {
clip-path: inset(0 38% 0 3%);
}
32% {
clip-path: inset(0 0 0 41%);
}
40% {
clip-path: inset(0 21% 0 17%);
}
48% {
clip-path: inset(0 9% 0 31%);
}
56% {
clip-path: inset(0 28% 0 6%);
}
64% {
clip-path: inset(0 2% 0 24%);
}
72% {
clip-path: inset(0 33% 0 11%);
}
80% {
clip-path: inset(0 16% 0 29%);
}
88% {
clip-path: inset(0 7% 0 4%);
}
94% {
clip-path: inset(0 25% 0 19%);
}
}
@media (prefers-reduced-motion: reduce) {
.headline-glitch.text-glitch-demo::before,
.headline-glitch.text-glitch-demo::after {
display: none;
}
.headline-glitch.text-glitch-demo .glitch-core {
animation: none;
clip-path: none;
}
html.scroll-glitch-active .headline-glitch--bar {
animation: none;
}
html.scroll-glitch-active .section-pixel-rule.headline-glitch {
animation: none;
}
}
/* Nudge Handjet body copy so it lines up optically with display subheads in cards / HIW */
.pricing-lede,
.pricing-card__tagline,
.hiw-step .pricing-card__tagline,
.pricing-note {
padding-inline-start: var(--handjet-optical-shift);
}
.pricing-lede {
font-size: var(--type-body);
line-height: 1.35;
font-weight: 400;
text-transform: uppercase;
letter-spacing: var(--body-tracking);
color: var(--text);
max-width: 36em;
}
.pricing-lede--pricing {
margin-bottom: 36px;
}
.pricing-lede--addon-intro {
margin-top: 0;
margin-bottom: 28px;
max-width: 40em;
}
.sub-content h3.pricing-title {
margin-top: 48px;
margin-bottom: 16px;
margin-inline-start: 0;
padding-inline-start: 0;
}
html[data-typography="uniform"] .sub-content h3.pricing-title {
margin-top: 56px;
margin-bottom: 20px;
}
/* How it works */
.hiw-steps {
list-style: none;
margin: 0;
padding: 0;
}
.hiw-step {
display: flex;
flex-direction: row;
align-items: baseline;
gap: clamp(10px, 1.5vw, 20px);
padding: 28px 0;
border-bottom: none;
position: relative;
}
.hiw-step:not(:last-child)::after {
content: '';
position: absolute;
bottom: 0;
left: calc(-1 * (var(--page-gutter) + 4px));
width: 100vw;
height: var(--pricing-hiw-divider);
background-color: var(--text);
}
.hiw-step:first-child {
padding-top: 0;
}
.hiw-step:last-child {
padding-bottom: 0;
}
.hiw-step__num {
flex: 0 0 auto;
flex-shrink: 0;
font-family: var(--font-site);
font-size: var(--headline-sub-size);
font-weight: 400;
line-height: 1;
color: var(--text);
text-transform: uppercase;
/* Tight column: ~two digit widths at this display size (2.5em was 2.5× font-size → massive gap) */
min-width: 1.35em;
text-align: left;
font-variant-numeric: tabular-nums;
}
.hiw-step__body {
flex: 1;
min-width: 0;
}
.hiw-step .human-design {
margin-top: 0;
margin-bottom: 12px;
font-family: var(--font-site);
font-size: var(--headline-sub-size);
font-weight: 400;
line-height: 1;
text-transform: uppercase;
}
html[data-typography="uniform"] .hiw-step .human-design {
margin-bottom: 16px;
}
.hiw-step__link {
color: var(--link-pill-fg);
background-color: var(--link-pill-bg);
text-decoration: none;
padding: 0.1em 0.32em;
box-decoration-break: clone;
-webkit-box-decoration-break: clone;
transition: opacity 0.15s ease, filter 0.15s ease;
}
.hiw-step__link:hover {
opacity: 0.92;
filter: brightness(0.97);
}
.hiw-step__link:focus-visible {
outline: 2px solid var(--text);
outline-offset: 3px;
}
.hiw-step .pricing-card__tagline {
margin-bottom: 0;
}
.pricing-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 0;
align-items: start;
position: relative;
padding-bottom: 32px;
}
.pricing-grid > .pricing-card {
background-color: transparent;
border: none;
border-right: var(--pricing-hiw-divider) solid var(--text);
padding: 20px 0 24px;
display: flex;
flex-direction: column;
}
.pricing-grid::after {
content: '';
position: absolute;
bottom: 0;
left: calc(-1 * (var(--page-gutter) + 4px));
width: 100vw;
height: var(--pricing-hiw-divider);
background-color: var(--text);
pointer-events: none;
}
.pricing-grid > .pricing-card:nth-child(3n) {
border-right: none;
}
.pricing-grid--single {
grid-template-columns: 1fr;
}
/* Full-bleed rule above the base package (OKAY LOGO) — matches add-on / note line alignment */
.pricing-grid--single::before {
content: '';
position: absolute;
z-index: 0;
left: calc(-1 * (var(--page-gutter) + var(--content-align-inset)));
top: 0;
width: 100vw;
height: var(--pricing-hiw-divider);
background-color: var(--text);
pointer-events: none;
}
.pricing-grid--single > .pricing-card {
border-right: none;
padding-left: 0;
padding-right: 0;
width: 100%;
max-width: 100%;
display: grid;
grid-template-columns: minmax(0, 1fr) auto;
column-gap: clamp(12px, 3vw, 28px);
row-gap: 24px;
align-items: start;
}
.pricing-grid--single > .pricing-card .pricing-card__name {
grid-column: 1;
grid-row: 1;
align-self: baseline;
min-width: 0;
}
.pricing-grid--single > .pricing-card .pricing-card__range-row {
grid-column: 2;
grid-row: 1;
justify-self: end;
align-self: baseline;
margin-top: 0;
margin-bottom: 0;
}
.pricing-grid--single > .pricing-card .pricing-card__range-row .pricing-card__range {
font-size: var(--headline-sub-size);
margin-top: 0;
margin-bottom: 0;
text-align: right;
}
.pricing-grid--single > .pricing-card .pricing-card__tagline {
grid-column: 1 / -1;
grid-row: 2;
}
.pricing-grid--single > .pricing-card .pricing-card__list {
grid-column: 1 / -1;
grid-row: 3;
}
.pricing-grid--single > .pricing-card .pricing-card__cta {
grid-column: 1 / -1;
grid-row: 4;
width: fit-content;
max-width: 100%;
justify-self: end;
}
/* Space around vertical rules: inset from line on both sides without doubling total gap */
@media (min-width: 961px) {
/* Equal row height so .pricing-card__list flex-grow pins CTA to the bottom */
.pricing-grid {
align-items: stretch;
}
.pricing-grid > .pricing-card:nth-child(1),
.pricing-grid > .pricing-card:nth-child(2) {
padding-right: 12px;
}
.pricing-grid > .pricing-card:nth-child(2),
.pricing-grid > .pricing-card:nth-child(3) {
padding-left: 12px;
}
.pricing-grid--single > .pricing-card {
padding-left: 0;
padding-right: 0;
}
}
.pricing-card__badge {
font-size: var(--type-body);
letter-spacing: 0.06em;
text-transform: uppercase;
color: var(--text);
margin-bottom: 12px;
}
.pricing-card__name {
font-family: var(--font-site);
font-size: var(--headline-sub-size);
font-weight: 400;
text-transform: uppercase;
line-height: 1;
color: var(--text);
/* Stack like a two-line headline: no extra margin between name and price */
margin-bottom: 0;
}
.pricing-card__range-row {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 0.2em;
margin-top: 0;
margin-bottom: 24px;
}
.pricing-card__range-row .pricing-card__range {
margin-bottom: 0;
}
.pricing-card__range {
font-family: var(--font-site);
font-size: var(--type-body);
font-weight: 400;
text-transform: uppercase;
line-height: 1;
color: var(--text);
margin-top: 0;
margin-bottom: 24px;
}
.pricing-card__range--was {
display: none;
}
.pricing-card__range--was::after {
content: '';
position: absolute;
left: 0;
right: 0;
top: 50%;
height: 0.24em;
transform: translateY(-50%) rotate(-6deg);
transform-origin: center center;
background: var(--text);
pointer-events: none;
}
.pricing-card__tagline {
font-size: var(--type-body);
font-weight: 400;
line-height: 1.4;
letter-spacing: var(--body-tracking);
color: var(--text);
opacity: 1.0;
margin-bottom: 20px;
text-transform: uppercase;
}
.pricing-card__list {
list-style: none;
margin-bottom: 28px;
flex-grow: 1;
}
.pricing-card__list li {
font-size: var(--type-body);
font-weight: 400;
line-height: 1.45;
letter-spacing: var(--body-tracking);
color: var(--text);
padding-left: calc(1.1em + var(--handjet-optical-shift));
position: relative;
margin-bottom: 10px;
text-transform: uppercase;
}
.pricing-card__list li::before {
content: '-';
position: absolute;
left: 0;
color: var(--text);
}
.pricing-card__cta {
display: block;
width: 50%;
max-width: 100%;
align-self: flex-end;
text-align: right;
text-decoration: none;
text-transform: uppercase;
font-size: var(--type-body);
font-weight: 400;
letter-spacing: var(--body-tracking);
font-family: var(--font-site);
color: var(--canvas);
background-color: var(--text);
padding: 14px 20px;
border: 0 solid var(--text);
}
.pricing-card__cta:hover {
opacity: 1.0;
}
.page-section--extras {
background-color: var(--bg-pricing);
color: var(--text);
margin-left: calc(-1 * var(--page-gutter));
margin-right: calc(-1 * var(--page-gutter));
padding-left: var(--page-gutter);
padding-right: var(--page-gutter);
}
.page-section--extras .pricing-main {
margin-top: 0;
}
.extras__lede {
margin-bottom: 48px;
}
.page-section--extras .pricing-lede,
.page-section--extras .pricing-note,
.extras-item__desc {
padding-inline-start: max(0px, calc(var(--type-body) * 0.12 - 1px));
}
.page-section--extras .pricing-note {
margin-top: 48px;
}
.extras-list {
display: flex;
flex-direction: column;
gap: 40px;
max-width: 40em;
}
.extras-list--addon-rows {
max-width: none;
gap: 0;
}
.extras-item {
margin: 0;
}
.extras-item--row {
display: grid;
/* Fixed name column width so descriptions share one vertical edge (price length no longer shifts col 2) */
grid-template-columns: 15rem minmax(0, 1fr) auto;
gap: 12px 24px;
align-items: start;
padding: 20px 0;
border-bottom: var(--pricing-hiw-divider) solid var(--text);
}
.extras-item--row:first-child {
border-top: var(--pricing-hiw-divider) solid var(--text);
}
/* Add-on list: full-bleed rules; layout = name + price on one line (price right), blurb below — all viewports */
.extras-list--addon-rows .extras-item--row {
position: relative;
border-top: 0;
border-bottom: 0;
display: grid;
grid-template-columns: minmax(0, 1fr) auto;
grid-template-rows: auto auto;
row-gap: 10px;
column-gap: 12px;
align-items: baseline;
padding: 32px 0;
}
.extras-list--addon-rows .extras-item--row:first-child {
border-top: 0;
}
.extras-list--addon-rows .extras-item--row .extras-item__title {
grid-column: 1;
grid-row: 1;
}
.extras-list--addon-rows .extras-item--row .pricing-card__range {
grid-column: 2;
grid-row: 1;
text-align: right;
justify-self: end;
}
.extras-list--addon-rows .extras-item--row .extras-item__desc {
grid-column: 1 / -1;
grid-row: 2;
}
.extras-list--addon-rows .extras-item--row::after {
content: '';
position: absolute;
left: calc(-1 * (var(--page-gutter) + var(--content-align-inset)));
bottom: 0;
width: 100vw;
height: var(--pricing-hiw-divider);
background-color: var(--text);
pointer-events: none;
}
.extras-list--addon-rows .extras-item--row:first-child::before {
content: '';
position: absolute;
left: calc(-1 * (var(--page-gutter) + var(--content-align-inset)));
top: 0;
width: 100vw;
height: var(--pricing-hiw-divider);
background-color: var(--text);
pointer-events: none;
}
.extras-item--row .extras-item__title {
margin-bottom: 0;
font-size: var(--headline-sub-size);
line-height: 1;
}
html[data-typography="uniform"] .extras-item--row .extras-item__title {
margin-block-end: 0;
}
.extras-item--row .extras-item__desc {
max-width: none;
padding-inline-start: 0;
}
.extras-item--row .pricing-card__range {
margin-top: 0;
margin-bottom: 0;
text-align: right;
justify-self: end;
}
.extras-item__title {
font-family: var(--font-site);
font-size: var(--headline-sub-size);
font-weight: 400;
line-height: 1;
letter-spacing: var(--body-tracking);
color: var(--text);
text-transform: uppercase;
margin: 0 0 12px;
padding-inline-start: 0;
}
html[data-typography="uniform"] .extras-item__title {
margin-block-end: 16px;
}
.extras-item__desc {
font-size: var(--type-body);
font-weight: 400;
line-height: 1.5;
letter-spacing: var(--body-tracking);
color: var(--text);
text-transform: uppercase;
margin: 0;
max-width: 40em;
}
.pricing-note {
margin-top: 28px;
padding-top: 28px;
border-top: none;
position: relative;
font-size: var(--type-body);
font-weight: 400;
line-height: 1.45;
letter-spacing: var(--body-tracking);
text-transform: uppercase;
color: var(--text);
max-width: 40em;
}
.pricing-note::before {
content: '';
position: absolute;
top: 0;
left: calc(-1 * (var(--page-gutter) + 4px));
width: 100vw;
height: var(--pricing-hiw-divider);
background-color: var(--text);
}
.pricing-note a {
color: var(--link-pill-fg);
background-color: var(--link-pill-bg);
text-decoration: none;
padding: 0.1em 0.32em;
box-decoration-break: clone;
-webkit-box-decoration-break: clone;
transition: opacity 0.15s ease, filter 0.15s ease;
}
.pricing-note a:hover {
opacity: 0.92;
filter: brightness(0.97);
}
@media (max-width: 960px) {
.pricing-grid {
grid-template-columns: 1fr;
padding-bottom: 0;
}
/* One full-width rule under the stack (mobile); desktop uses .pricing-grid::after */
.pricing-grid::after {
display: none;
}
.pricing-grid > .pricing-card {
border-right: none;
border-bottom: none;
position: relative;
padding-bottom: 28px;
}
.pricing-grid > .pricing-card::after {
content: '';
position: absolute;
bottom: 0;
left: calc(-1 * (var(--page-gutter) + 4px));
width: 100vw;
height: var(--pricing-hiw-divider);
background-color: var(--text);
}
}
@media (min-width: 769px) {
:root {
--body-tracking: 0.035em;
}
}
/*
* iPhone-scale viewports: keep hero + .pricing-title matched via --type-display,
* but well below desktop 240px. Landscape uses short-height query (width is often > 480).
*/
@media (max-width: 480px) {
:root {
--type-display: 120px;
}
}
@media (orientation: landscape) and (max-height: 480px) and (max-width: 932px) {
:root {
--type-display: 140px;
}
}
/*
* Tablet portrait (iPad, etc.): width is usually >480 so phone rules don’t apply;
* keep one --type-display for hero + section titles.
*/
@media (orientation: portrait) and (min-width: 481px) and (max-width: 1024px) {
:root {
--type-display: clamp(132px, 19.5vw, 188px);
}
}
/* Responsive Design */
@media (max-width: 768px) {
:root {
--page-gutter: 20px;
}
.page-section {
padding: 120px 0;
}
.page-section.page-section--hiw {
padding-left: var(--page-gutter);
padding-right: var(--page-gutter);
}
.page-section.page-section--work {
padding-left: var(--page-gutter);
padding-right: var(--page-gutter);
}
.page-section--pre-footer {
padding-bottom: 120px;
padding-left: var(--page-gutter);
padding-right: var(--page-gutter);
}
.page-section--extras {
padding-left: var(--page-gutter);
padding-right: var(--page-gutter);
}
.hiw-step {
flex-direction: column;
align-items: flex-start;
gap: 12px;
padding: 24px 0;
}
.hiw-step__num {
line-height: 1;
min-width: 0;
padding-top: 0;
text-align: left;
}
.floating-corner {
bottom: max(64px, calc(env(safe-area-inset-bottom, 0px) + 48px));
right: max(20px, calc(env(safe-area-inset-right, 0px) + 16px));
}
.back-to-top {
bottom: auto;
right: auto;
}
}
/* /all-else-will-be-forgotten/ — poem blurs; RUOK? stays sharp, links home; all caps, left */
html.is-forgotten,
html.is-forgotten[data-theme="light"] {
background-color: #141414;
color-scheme: dark;
--canvas: #141414;
}
.forgotten-page {
--canvas: #141414;
--text: #ffffff;
--rule-line: rgba(255, 255, 255, 0.38);
background-color: #141414;
margin: 0;
min-height: 100vh;
min-height: 100dvh;
display: flex;
flex-direction: row;
justify-content: flex-start;
align-items: center;
box-sizing: border-box;
padding: var(--page-gutter);
}
.forgotten-page__main {
display: flex;
flex-direction: column;
align-items: flex-start;
text-align: left;
max-width: 100%;
width: 100%;
}
.forgotten-poem {
text-align: left;
text-transform: uppercase;
color: var(--text);
font-size: var(--type-body);
line-height: 1.2;
letter-spacing: var(--body-tracking);
font-family: var(--font-site);
font-weight: 400;
max-width: 40em;
margin: 0;
will-change: filter, opacity;
}
.forgotten-ruok {
font-family: var(--font-site);
font-size: var(--type-body);
font-weight: 400;
line-height: 1;
letter-spacing: normal;
text-transform: uppercase;
color: var(--text);
text-decoration: underline;
text-underline-offset: 2px;
-webkit-font-smoothing: antialiased;
-webkit-tap-highlight-color: transparent;
cursor: pointer;
}
.forgotten-ruok:hover,
.forgotten-ruok:focus-visible {
text-decoration: underline;
text-underline-offset: 2px;
}
/*
* Permanent layout: pixels sit above RUOK?/OKAY. Wrapper margin + flex gap reproduce
* RUOK?'s original 2.5em offset from the poem (gap 0.6em + pixel row 4px subtracted).
*/
.forgotten-bottom {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 0.6em;
margin-top: calc(2.5em - 0.6em - 4px);
width: 100%;
}
.forgotten-bottom .section-pixel-rule-mount {
margin-block: 0;
}
.forgotten-okay {
display: none;
font-family: var(--font-site);
font-size: var(--type-body);
font-weight: 400;
line-height: 1;
letter-spacing: normal;
text-transform: uppercase;
color: var(--text);
-webkit-font-smoothing: antialiased;
}
.forgotten-page.is-leaving .forgotten-ruok {
display: none;
}
.forgotten-page.is-leaving .forgotten-okay {
display: block;
}
.forgotten-page.is-leaving .forgotten-poem {
visibility: hidden;
}
.forgotten-poem p {
margin: 0;
}
.forgotten-poem p:last-child {
margin-bottom: 0;
}
/*
* Digital decay: Handjet's pixel strokes thin (font-weight 400 → 100) in stepped jumps,
* opacity drops in chunks. Combined with step-end timing = hard cuts, no smooth interpolation.
*
* To revert to the previous gradual blur, swap the animation name below to forgotten-poem-blur
* (keyframes for both are preserved).
*/
@media (prefers-reduced-motion: no-preference) {
.forgotten-poem {
animation: forgotten-poem-blur 300s linear forwards;
}
}
@keyframes forgotten-poem-decay {
0% { font-weight: 400; opacity: 1; }
8% { font-weight: 400; opacity: 1; }
20% { font-weight: 320; opacity: 0.92; }
35% { font-weight: 240; opacity: 0.78; }
50% { font-weight: 180; opacity: 0.6; }
65% { font-weight: 130; opacity: 0.42; }
78% { font-weight: 100; opacity: 0.25; }
90% { font-weight: 100; opacity: 0.12; }
100% { font-weight: 100; opacity: 0; }
}
/* Previous behavior — kept for easy revert (see comment above) */
@keyframes forgotten-poem-blur {
0% {
filter: blur(0);
opacity: 1;
}
100% {
filter: blur(22px);
opacity: 0.08;
}
}
@media (prefers-reduced-motion: reduce) {
.forgotten-poem {
animation: none;
filter: blur(16px);
opacity: 0.35;
}
}
/* PDF417 — main page only, full-bleed strip below site footer (scans to /all-else-will-be-forgotten/) */
.home-pdf417 {
text-align: left;
background-color: var(--bg-pricing);
margin-left: calc(-1 * var(--page-gutter));
margin-right: calc(-1 * var(--page-gutter));
padding: 32px var(--page-gutter) 48px;
border-top: var(--pricing-hiw-divider) solid var(--text);
}
.home-pdf417 img {
display: block;
margin: 0;
width: min(100%, 200px);
height: auto;
}