/* =========================================================================
   Studio Variant — Creators page

   Page-scoped layer, class-prefixed .cr-*, loaded after sv.css and the
   shared page chrome in scanning.css. It cannot reach the landing page,
   the five approved capability chapters or the Commercial page.

   Where Commercial draws industrial context — a stopped line, a process
   bay, an installation — Creators draws the distance between a rough
   human input and a finished object. That is the whole proposition of
   the page, so it is also the whole visual device: on the left a sketch,
   a photo, a broken thing, a description; on the right something that
   exists.

   Commercial is titanium-led, because business is. Creators uses brass
   more freely — it is the colour this system already reserves for the
   moment something is being worked on, and on this page almost
   everything is being worked on. It is still a dark graphite engineering
   environment. It is not a craft marketplace.
   ========================================================================= */

/* ------------------------------- 1. Hero ------------------------------- */

.cr-hero {
	position: relative;
	overflow: hidden;
	padding: var(--sv-10) 0 var(--sv-8);
	background: radial-gradient(120% 90% at 78% 12%, rgba(195, 160, 106, 0.07) 0%, transparent 62%),
		var(--sv-bg);
}

.cr-hero-inner {
	position: relative;
	display: grid;
	grid-template-columns: minmax(0, 0.84fr) minmax(0, 1.16fr);
	gap: var(--sv-7);
	align-items: center;
}

.cr-hero-text {
	max-width: 48ch;
}

.cr-hero h1 {
	margin: var(--sv-5) 0 0;
	font-family: var(--sv-font-display);
	font-size: var(--sv-display-xl);
	line-height: 0.96;
	letter-spacing: -0.028em;
	color: var(--sv-text);
}

.cr-hero h1 span {
	display: block;
}

.cr-hero h1 span + span {
	color: var(--sv-text-secondary);
}

/* The supporting headline. Mono and bracketed, so it reads as a second
   voice rather than a subtitle. */
.cr-sub {
	margin: var(--sv-5) 0 0;
	font-family: var(--sv-font-mono);
	font-size: var(--sv-body-s);
	line-height: 1.75;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--sv-brass);
	border-left: 2px solid var(--sv-brass-line);
	padding-left: var(--sv-4);
	max-width: 42ch;
}

/* The shared .sc-* hero rules assume a capability chapter, where no mono
   sub-headline exists. Everything below it needs its own air. */
.cr-hero-text .sc-lede {
	margin-top: var(--sv-5);
}

/* Four short reassurances, set as their own block rather than a
   paragraph — they are the most important sentences in the hero. */
.cr-nots {
	margin: var(--sv-5) 0 0;
	padding: 0;
	list-style: none;
	display: grid;
	gap: var(--sv-2);
}

.cr-nots li {
	position: relative;
	padding-left: var(--sv-5);
	font-size: var(--sv-body-s);
	line-height: 1.6;
	color: var(--sv-text-secondary);
}

.cr-nots li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0.62em;
	width: 12px;
	height: 1px;
	background: var(--sv-border-strong);
}

.cr-nots li:last-child {
	color: var(--sv-text);
	font-family: var(--sv-font-mono);
	font-size: var(--sv-label);
	letter-spacing: 0.1em;
	text-transform: uppercase;
	margin-top: var(--sv-2);
}

.cr-nots li:last-child::before {
	background: var(--sv-brass);
	width: 18px;
}

.cr-hero-text .sc-actions {
	margin-top: var(--sv-6);
}

.cr-hero-text > .sv-micro {
	margin-top: var(--sv-5);
	letter-spacing: 0.16em;
	color: var(--sv-text-muted);
}

.cr-hero-art {
	position: relative;
	min-width: 0;
}

.cr-hero-svg {
	display: block;
	width: 100%;
	height: auto;
	border: 1px solid var(--sv-border);
	border-radius: var(--sv-radius-md);
}

/* --------------------------- 2. Hero motion ---------------------------- */

.cr-in,
.cr-out {
	stroke-dasharray: 5 7;
	stroke-dashoffset: 0;
}

.cr-hero-svg.is-running .cr-in,
.cr-hero-svg.is-running .cr-out {
	animation: cr-draw 2.8s linear infinite;
}

@keyframes cr-draw {
	to {
		stroke-dashoffset: -48;
	}
}

.cr-core-pulse {
	opacity: 0.24;
}

.cr-hero-svg.is-running .cr-core-pulse {
	animation: cr-pulse 3.6s var(--sv-ease-precision) infinite;
}

@keyframes cr-pulse {
	0%,
	100% {
		opacity: 0.14;
	}
	50% {
		opacity: 0.58;
	}
}

/* The finished creations arriving around the design environment. */
.cr-made {
	opacity: 0;
}

/* The finished creations arrive one after another and then stay. They
   are the argument the hero is making, so they do not cycle away. */
.cr-hero-svg.is-running .cr-made {
	animation: cr-arrive 760ms var(--sv-ease-precision) forwards;
}

@keyframes cr-arrive {
	from {
		opacity: 0;
		transform: translateY(7px);
	}
	to {
		opacity: 1;
		transform: none;
	}
}

@media (prefers-reduced-motion: reduce) {
	.cr-in,
	.cr-out,
	.cr-core-pulse,
	.cr-made {
		animation: none !important;
		opacity: 1;
	}
	.cr-core-pulse {
		opacity: 0.34;
	}
}

/* --------------------------- 3. Hero motif ----------------------------- */

.cr-motif {
	position: relative;
	margin-top: var(--sv-7);
	padding-top: var(--sv-5);
	border-top: 1px solid var(--sv-border-hairline);
}

.cr-motif-list {
	margin: 0;
	padding: 0;
	list-style: none;
	display: flex;
	flex-wrap: wrap;
	gap: var(--sv-3) var(--sv-6);
}

.cr-motif-item {
	display: flex;
	align-items: center;
	gap: var(--sv-2);
	font-family: var(--sv-font-mono);
	font-size: var(--sv-micro);
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--sv-text-muted);
}

.cr-motif-item i {
	width: 5px;
	height: 5px;
	border-radius: 50%;
	background: var(--sv-brass);
	opacity: 0.7;
}

/* ------------------------ 4. Section furniture ------------------------- */

.cr-section {
	position: relative;
	padding: var(--sv-9) 0;
}

.cr-section.is-sunken {
	background: var(--sv-bg-sunken);
	border-top: 1px solid var(--sv-border-hairline);
	border-bottom: 1px solid var(--sv-border-hairline);
}

/* The memorial section. Quieter, wider spacing, no brass wash — the
   restraint is the point. */
.cr-section.is-quiet {
	background: linear-gradient(180deg, var(--sv-void) 0%, var(--sv-bg) 100%);
	padding: var(--sv-10) 0;
}

/* The header is fixed, so anything the navigator jumps to has to stop
   clear of it — otherwise the headline somebody asked for is the one
   piece of the section they cannot read. */
.cr-section[id],
.cr-app[id],
.cr-weird[id],
.cr-close[id] {
	scroll-margin-top: 108px;
}

/* Focus is moved to the jumped-to section for screen readers and
   keyboards; that must not draw a box around half the page. */
.cr-section[tabindex="-1"]:focus,
.cr-app[tabindex="-1"]:focus,
.cr-weird[tabindex="-1"]:focus {
	outline: none;
}

.cr-head {
	max-width: 62ch;
}

.cr-head h2 {
	margin: var(--sv-4) 0 0;
	font-family: var(--sv-font-display);
	line-height: 1.04;
	letter-spacing: -0.022em;
	color: var(--sv-text);
}

.cr-head .sv-body-l {
	margin: var(--sv-5) 0 0;
	color: var(--sv-text-secondary);
}

/* ---------------------- 5. Origins — "no CAD" -------------------------- */

.cr-origins {
	margin-top: var(--sv-7);
	display: grid;
	grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
	gap: var(--sv-7);
	align-items: center;
}

.cr-origin-list {
	margin: 0;
	padding: 0;
	list-style: none;
	display: grid;
	gap: var(--sv-2);
}

.cr-origin {
	display: flex;
	align-items: baseline;
	gap: var(--sv-3);
	padding: var(--sv-3) var(--sv-4);
	border: 1px solid var(--sv-border);
	border-radius: var(--sv-radius-sm);
	background: var(--sv-surface);
	font-family: var(--sv-font-display);
	font-size: var(--sv-body-l);
	line-height: 1.3;
	color: var(--sv-text);
}

.cr-origin i {
	flex: none;
	font-family: var(--sv-font-mono);
	font-size: var(--sv-micro);
	font-style: normal;
	letter-spacing: 0.1em;
	color: var(--sv-text-faint);
}

.cr-origin:last-child {
	border-color: var(--sv-brass-line);
	background: var(--sv-brass-wash);
}

.cr-origin:last-child i {
	color: var(--sv-brass);
}

.cr-origins-note {
	margin: var(--sv-5) 0 0;
	font-size: var(--sv-body-s);
	line-height: 1.7;
	color: var(--sv-text-muted);
}

.cr-origins-cta {
	margin-top: var(--sv-6);
}

/* ------------------------ 6. Category navigator ------------------------ */

.cr-cats {
	margin: var(--sv-7) 0 0;
	padding: 0;
	list-style: none;
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: var(--sv-3);
}

.cr-cat {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: var(--sv-3);
	min-height: 132px;
	padding: var(--sv-4);
	border: 1px solid var(--sv-border);
	border-radius: var(--sv-radius-sm);
	background: var(--sv-surface);
	color: var(--sv-text);
	text-decoration: none;
	transition: border-color 240ms var(--sv-ease-precision),
		background-color 240ms var(--sv-ease-precision), transform 240ms var(--sv-ease-precision);
}

.cr-cat i {
	font-family: var(--sv-font-mono);
	font-size: var(--sv-micro);
	font-style: normal;
	letter-spacing: 0.12em;
	color: var(--sv-text-faint);
}

.cr-cat b {
	font-family: var(--sv-font-display);
	font-size: var(--sv-h4);
	font-weight: 500;
	line-height: 1.16;
	letter-spacing: -0.012em;
}

.cr-cat span {
	margin-top: auto;
	font-size: var(--sv-body-s);
	line-height: 1.55;
	color: var(--sv-text-muted);
}

.cr-cat:hover,
.cr-cat:focus-visible {
	border-color: var(--sv-brass-line);
	background: var(--sv-surface-hover);
	transform: translateY(-2px);
}

.cr-cat:hover i,
.cr-cat:focus-visible i {
	color: var(--sv-brass);
}

/* The open category. It is deliberately the one that looks different,
   because the page ends on the same idea. */
.cr-cat.is-open {
	border-color: var(--sv-brass-line);
	background: var(--sv-brass-wash);
}

.cr-cats-note {
	margin: var(--sv-5) 0 0;
	font-size: var(--sv-body-s);
	line-height: 1.7;
	color: var(--sv-text-muted);
}

/* --------------------- 7. Applications — the cases --------------------- */

.cr-app {
	display: grid;
	grid-template-columns: 148px minmax(0, 1fr);
	gap: var(--sv-6);
	margin-top: var(--sv-9);
	padding-top: var(--sv-9);
	border-top: 1px solid var(--sv-border-hairline);
}

.cr-app:first-of-type {
	margin-top: var(--sv-8);
	padding-top: 0;
	border-top: 0;
}

.cr-app-index {
	position: sticky;
	top: 96px;
	align-self: start;
}

.cr-app-desig {
	margin: 0;
	font-family: var(--sv-font-mono);
	font-size: var(--sv-micro);
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--sv-text-faint);
}

.cr-app-desig b {
	display: block;
	margin-top: var(--sv-2);
	font-family: var(--sv-font-display);
	font-size: var(--sv-h3);
	font-weight: 500;
	letter-spacing: -0.01em;
	color: var(--sv-titanium);
}

.cr-app-rule {
	display: block;
	margin-top: var(--sv-4);
	width: 48px;
	height: 1px;
	background: var(--sv-border-strong);
}

.cr-app-body {
	min-width: 0;
}

.cr-app-body h3 {
	margin: 0;
	font-family: var(--sv-font-display);
	line-height: 1.06;
	letter-spacing: -0.022em;
	color: var(--sv-text);
}

.cr-app-copy {
	margin: var(--sv-5) 0 0;
	max-width: 64ch;
	color: var(--sv-text-secondary);
}

/* ------------------------- 8. Drawn plates ----------------------------- */

/* The drawings keep the width they were drawn at and pan rather than
   scaling their annotations down to nothing on a phone. The .cr-flow
   below every plate carries the same sequence as text, so nobody has to
   pan to follow the point. */
.cr-plate {
	position: relative;
	margin-top: var(--sv-6);
	border: 1px solid var(--sv-border);
	border-radius: var(--sv-radius-md);
	background: linear-gradient(180deg, var(--sv-graphite-850) 0%, var(--sv-void) 100%);
	overflow-x: auto;
	overflow-y: hidden;
	-webkit-overflow-scrolling: touch;
}

.cr-plate::-webkit-scrollbar {
	height: 6px;
}

.cr-plate::-webkit-scrollbar-thumb {
	background: var(--sv-border-strong);
	border-radius: var(--sv-radius-pill);
}

.cr-plate-svg {
	display: block;
	width: 100%;
	height: auto;
}

/* ---------------------- 9. The sequence, as text ----------------------- */

.cr-flow {
	margin: var(--sv-5) 0 0;
	padding: 0;
	list-style: none;
	display: grid;
	grid-auto-flow: column;
	grid-auto-columns: minmax(0, 1fr);
	gap: var(--sv-2);
}

.cr-flow li {
	position: relative;
	padding: var(--sv-3);
	border: 1px solid var(--sv-border);
	border-radius: var(--sv-radius-xs);
	background: var(--sv-surface);
	font-family: var(--sv-font-mono);
	font-size: var(--sv-micro);
	letter-spacing: 0.1em;
	text-transform: uppercase;
	line-height: 1.5;
	color: var(--sv-text-secondary);
}

.cr-flow li.is-start {
	border-color: var(--sv-border-strong);
	color: var(--sv-text-muted);
}

.cr-flow li.is-end {
	border-color: var(--sv-brass-line);
	background: var(--sv-brass-wash);
	color: var(--sv-text);
}

/* A second sequence in the same section — several sections carry more
   than one possible workflow. */
.cr-flow-label {
	margin: var(--sv-6) 0 0;
	font-family: var(--sv-font-mono);
	font-size: var(--sv-micro);
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--sv-text-faint);
}

.cr-flow-label + .cr-flow {
	margin-top: var(--sv-3);
}

/* ------------------------- 10. Possibility tags ------------------------ */

.cr-tags-label {
	margin: var(--sv-6) 0 var(--sv-3);
	font-family: var(--sv-font-mono);
	font-size: var(--sv-micro);
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--sv-text-faint);
}

.cr-tags {
	margin: 0;
	padding: 0;
	list-style: none;
	display: flex;
	flex-wrap: wrap;
	gap: var(--sv-2);
}

.cr-tags li {
	padding: 6px var(--sv-3);
	border: 1px solid var(--sv-border);
	border-radius: var(--sv-radius-pill);
	background: var(--sv-surface);
	font-size: var(--sv-micro);
	letter-spacing: 0.04em;
	color: var(--sv-text-secondary);
}

/* ------------------------- 11. Capability links ------------------------ */

.cr-caps {
	margin-top: var(--sv-6);
}

.cr-caps-list {
	margin: var(--sv-3) 0 0;
	padding: 0;
	list-style: none;
	display: flex;
	flex-wrap: wrap;
	gap: var(--sv-2);
}

.cr-cap {
	display: inline-flex;
	align-items: center;
	gap: var(--sv-2);
	padding: 8px var(--sv-3);
	border: 1px solid var(--sv-border);
	border-radius: var(--sv-radius-xs);
	background: var(--sv-surface);
	font-family: var(--sv-font-mono);
	font-size: var(--sv-micro);
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--sv-text-secondary);
	text-decoration: none;
	transition: border-color 200ms var(--sv-ease-precision), color 200ms var(--sv-ease-precision);
}

.cr-cap i {
	font-style: normal;
	color: var(--sv-text-faint);
}

.cr-cap:hover,
.cr-cap:focus-visible {
	border-color: var(--sv-titanium-line);
	color: var(--sv-text);
}

/* --------------------- 12. Standing notes and lines -------------------- */

/* What is and is not being promised. Every application carries one. */
.cr-standing {
	margin: var(--sv-6) 0 0;
	padding: var(--sv-4) var(--sv-5);
	border-left: 2px solid var(--sv-border-strong);
	background: var(--sv-surface);
	border-radius: 0 var(--sv-radius-sm) var(--sv-radius-sm) 0;
	font-size: var(--sv-body-s);
	line-height: 1.7;
	color: var(--sv-text-muted);
	max-width: 72ch;
}

/* A statement, not a paragraph. */
.cr-line {
	margin: var(--sv-7) 0 0;
	padding-top: var(--sv-5);
	border-top: 1px solid var(--sv-border-hairline);
	font-family: var(--sv-font-display);
	font-size: var(--sv-h3);
	line-height: 1.28;
	letter-spacing: -0.012em;
	color: var(--sv-text);
	max-width: 36ch;
}

.cr-app-cta {
	margin-top: var(--sv-6);
}

/* ----------------------- 13. One to many — names ----------------------- */

.cr-names {
	margin: var(--sv-6) 0 0;
	padding: 0;
	list-style: none;
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(112px, 1fr));
	gap: var(--sv-2);
}

.cr-names li {
	padding: var(--sv-3);
	border: 1px solid var(--sv-border);
	border-radius: var(--sv-radius-xs);
	background: var(--sv-surface);
	text-align: center;
	font-family: var(--sv-font-display);
	font-size: var(--sv-body);
	letter-spacing: 0.02em;
	color: var(--sv-text);
}

.cr-names li i {
	display: block;
	margin-bottom: var(--sv-1);
	font-family: var(--sv-font-mono);
	font-size: var(--sv-micro);
	font-style: normal;
	letter-spacing: 0.1em;
	color: var(--sv-text-faint);
}

/* ----------------------- 14. Mixed process routes ---------------------- */

.cr-routes {
	margin: var(--sv-7) 0 0;
	display: grid;
	gap: var(--sv-4);
}

.cr-route {
	padding: var(--sv-5);
	border: 1px solid var(--sv-border);
	border-radius: var(--sv-radius-md);
	background: var(--sv-surface);
}

.cr-route h3 {
	margin: 0;
	font-family: var(--sv-font-mono);
	font-size: var(--sv-label);
	font-weight: 500;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--sv-titanium);
}

.cr-route .cr-flow {
	margin-top: var(--sv-4);
}

.cr-routes-line {
	margin: var(--sv-7) 0 0;
	padding-top: var(--sv-5);
	border-top: 1px solid var(--sv-border-hairline);
	font-family: var(--sv-font-display);
	font-size: var(--sv-h3);
	line-height: 1.28;
	letter-spacing: -0.012em;
	color: var(--sv-text);
	max-width: 34ch;
}

/* --------------------------- 15. Tool band ----------------------------- */

.cr-tool-band {
	margin-top: var(--sv-7);
}

.cr-tool-note {
	margin: var(--sv-5) 0 0;
	font-size: var(--sv-body-s);
	line-height: 1.7;
	color: var(--sv-text-muted);
	max-width: 72ch;
}

/* --------------------------- 16. Weird idea ---------------------------- */

.cr-weird {
	position: relative;
	padding: var(--sv-9) 0;
	background: radial-gradient(90% 120% at 18% 50%, rgba(195, 160, 106, 0.09) 0%, transparent 62%),
		var(--sv-bg-sunken);
	border-top: 1px solid var(--sv-border-hairline);
	border-bottom: 1px solid var(--sv-border-hairline);
	overflow: hidden;
}

.cr-weird-inner {
	position: relative;
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 0.9fr);
	gap: var(--sv-7);
	align-items: center;
}

.cr-weird h2 {
	margin: var(--sv-4) 0 0;
	max-width: 22ch;
	font-family: var(--sv-font-display);
	font-size: var(--sv-display-m);
	line-height: 1.02;
	letter-spacing: -0.024em;
	color: var(--sv-text);
}

/* The single word the section turns on. */
.cr-good {
	display: block;
	margin-top: var(--sv-3);
	color: var(--sv-brass);
}

.cr-weird p {
	margin: var(--sv-5) 0 0;
	max-width: 58ch;
	color: var(--sv-text-secondary);
}

.cr-weird .sc-actions {
	margin-top: var(--sv-6);
}

/* ----------------------------- 17. Cost -------------------------------- */

.cr-factors {
	margin: var(--sv-6) 0 0;
	padding: 0;
	list-style: none;
	display: grid;
	grid-template-columns: repeat(5, minmax(0, 1fr));
	gap: var(--sv-2);
}

.cr-factors li {
	padding: var(--sv-4) var(--sv-3);
	border: 1px solid var(--sv-border);
	border-radius: var(--sv-radius-sm);
	background: var(--sv-surface);
	font-family: var(--sv-font-mono);
	font-size: var(--sv-micro);
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--sv-text-secondary);
	text-align: center;
}

/* ---------------------------- 18. Closing ------------------------------ */

.cr-close {
	position: relative;
	padding: var(--sv-10) 0 var(--sv-9);
	background: radial-gradient(100% 90% at 50% 0%, rgba(185, 192, 196, 0.06) 0%, transparent 60%),
		var(--sv-bg);
	overflow: hidden;
}

.cr-close h2 {
	margin: var(--sv-4) 0 0;
	font-family: var(--sv-font-display);
	font-size: var(--sv-display-l);
	line-height: 0.98;
	letter-spacing: -0.026em;
	color: var(--sv-text);
	max-width: 24ch;
}

.cr-close-list {
	margin: var(--sv-6) 0 0;
	padding: 0;
	list-style: none;
	display: flex;
	flex-wrap: wrap;
	gap: var(--sv-2) var(--sv-5);
	max-width: 74ch;
}

.cr-close-list li {
	font-family: var(--sv-font-display);
	font-size: var(--sv-body-l);
	line-height: 1.4;
	color: var(--sv-text-secondary);
}

.cr-close-list li:last-child {
	color: var(--sv-brass);
}

.cr-close-actions {
	margin-top: var(--sv-7);
}

/* The route across to Commercial. Peers, not a hierarchy — so it gets
   the same treatment the Commercial page gives the route back here. */
.cr-commercial-route {
	display: inline-flex;
	align-items: center;
	gap: var(--sv-4);
	margin-top: var(--sv-8);
	padding: var(--sv-5) var(--sv-6);
	border: 1px solid var(--sv-border);
	border-radius: var(--sv-radius-md);
	background: var(--sv-surface);
	text-decoration: none;
	transition: border-color 240ms var(--sv-ease-precision),
		background-color 240ms var(--sv-ease-precision);
}

.cr-commercial-route:hover,
.cr-commercial-route:focus-visible {
	border-color: var(--sv-titanium-line);
	background: var(--sv-surface-hover);
}

.cr-commercial-title {
	display: block;
}

.cr-commercial-title i {
	display: block;
	font-family: var(--sv-font-mono);
	font-size: var(--sv-micro);
	font-style: normal;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--sv-text-faint);
}

.cr-commercial-title b {
	display: block;
	margin-top: var(--sv-2);
	font-family: var(--sv-font-display);
	font-size: var(--sv-h4);
	font-weight: 500;
	letter-spacing: -0.01em;
	color: var(--sv-text);
}

.cr-commercial-arrow {
	flex: none;
	color: var(--sv-titanium);
}

/* ============================ Responsive ============================== */

@media (max-width: 1180px) {
	.cr-hero-inner {
		grid-template-columns: minmax(0, 1fr);
		gap: var(--sv-6);
	}

	.cr-hero-text {
		max-width: 56ch;
	}

	.cr-origins {
		grid-template-columns: minmax(0, 1fr);
	}

	.cr-cats {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}

	.cr-weird-inner {
		grid-template-columns: minmax(0, 1fr);
	}

	.cr-factors {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

@media (max-width: 1040px) {
	.cr-app {
		grid-template-columns: minmax(0, 1fr);
		gap: var(--sv-5);
	}

	.cr-app-index {
		position: static;
		display: flex;
		align-items: baseline;
		gap: var(--sv-3);
	}

	.cr-app-desig b {
		margin-top: 0;
	}

	.cr-app-rule {
		display: none;
	}

	.cr-flow {
		grid-auto-flow: row;
		grid-auto-columns: auto;
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 760px) {
	.cr-section,
	.cr-weird {
		padding: var(--sv-8) 0;
	}

	.cr-section.is-quiet {
		padding: var(--sv-9) 0;
	}

	.cr-hero {
		padding: var(--sv-8) 0 var(--sv-7);
	}

	.cr-cats {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.cr-cat {
		min-height: 112px;
	}

	.cr-factors {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.cr-close h2 {
		max-width: none;
	}

	.cr-commercial-route {
		width: 100%;
		justify-content: space-between;
	}
}

@media (max-width: 460px) {
	/* "Explore what's possible" and "I need several, each one different"
	   held on one line are wider than a narrow phone, so these buttons
	   may wrap. */
	.cr-hero-text .sc-actions .sv-btn,
	.cr-app-cta .sv-btn {
		white-space: normal;
		text-align: center;
	}

	.cr-flow {
		grid-template-columns: minmax(0, 1fr);
	}

	.cr-cats {
		grid-template-columns: minmax(0, 1fr);
	}

	.cr-cat {
		min-height: 0;
	}

	.cr-names {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.cr-app-index {
		flex-direction: column;
		align-items: flex-start;
		gap: var(--sv-1);
	}
}