:root {
	color-scheme: light;
	--bg: #f5f8fd;
	--bg-2: #edf2fb;
	--panel: #ffffff;
	--line: #d7e0ee;
	--ink: #1f2733;
	--muted: #556070;
	--accent: #5a86d8;
	--accent-deep: #345ea8;
	--key-top: #ffffff;
	--key-bot: #edf1f8;
	--radius: 24px;
	--feedback-panel-width: min(420px, 92vw);
	--section-gap: 5.875rem;
}

* {
	box-sizing: border-box;
}

html {
	scroll-behavior: smooth;
}

html,
body {
	margin: 0;
	padding: 0;
}

body {
	font-family: 'Manrope', sans-serif;
	color: var(--ink);
	line-height: 1.45;
	background:
		radial-gradient(circle at 84% 4%, #dfeafe 0, transparent 28%),
		radial-gradient(circle at 10% 18%, #ffffff 0, transparent 40%),
		linear-gradient(180deg, var(--bg), var(--bg-2));
	scrollbar-gutter: stable;
}

body.features-mode {
	overflow: hidden;
}

.grain {
	position: fixed;
	inset: 0;
	background-image: radial-gradient(#00000011 0.5px, transparent 0.5px);
	background-size: 3px 3px;
	opacity: 0.2;
	pointer-events: none;
	z-index: 1;
}

header,
main,
.feedback-tab,
.feedback-panel {
	position: relative;
}

header {
	padding: 24px clamp(16px, 4vw, 48px);
}

.top-nav {
	display: flex;
	justify-content: space-between;
	align-items: center;
}

.brand {
	font-family: 'Plus Jakarta Sans', sans-serif;
	font-size: clamp(1.05rem, 2.5vw, 1.45rem);
	font-weight: 800;
}

.nav-link {
	text-decoration: none;
	border: 0;
	border-radius: 999px;
	padding: 0.5rem 1.1rem;
	background: #162338;
	color: #fff;
	font-weight: 700;
	letter-spacing: 0.04em;
	transition: transform 130ms ease;
}

.nav-link:hover {
	transform: translateY(-1px);
}

.hero-copy {
	max-width: 760px;
	padding-top: min(10vh, 84px);
	margin-bottom: 2.5rem;
}

.eyebrow {
	margin: 0;
	text-transform: uppercase;
	letter-spacing: 0.14em;
	color: #68766d;
	font-size: 0.78rem;
}

h1 {
	margin: 0.5rem 0 0.95rem;
	font-family: 'Plus Jakarta Sans', sans-serif;
	line-height: 1.02;
	font-size: clamp(2.05rem, 8vw, 5.6rem);
}

.hero-copy p {
	margin: 0;
	max-width: 62ch;
	color: #344961;
	font-size: clamp(1rem, 2.2vw, 1.18rem);
}

.hero-stage {
	position: relative;
	padding: 4vh 0;
	display: grid;
	place-items: center;
	z-index: 6;
}

body.features-mode .hero-stage {
	position: fixed;
	inset: 0;
	height: 100dvh;
	padding: 0;
	pointer-events: none;
}

body.features-mode .keyboard-shell {
	animation: none;
	transform: perspective(1400px) scale(1.12);
}

.keyboard-shell {
	width: min(880px, 76vw);
	aspect-ratio: 16 / 5;
	border-radius: 28px;
	border: 1px solid #d5deeb;
	background: linear-gradient(160deg, #fefefe 0%, #eef3fb 100%);
	box-shadow: 0 30px 66px rgba(42, 69, 50, 0.16);
	overflow: hidden;
	position: relative;
	transform-style: preserve-3d;
	container-type: inline-size;
}

.shell-reflection {
	position: absolute;
	inset: 0;
	background:
		radial-gradient(circle at 16% 10%, #ffffffd4 0, transparent 44%),
		linear-gradient(120deg, transparent 30%, #ffffff8a 41%, transparent 54%);
	z-index: 0;
}

.hero-mini {
	position: absolute;
	inset: 2.27cqi 2.27cqi 4.09cqi;
	display: grid;
	gap: 0.57cqi;
	z-index: 2;
}

.hero-row {
	display: grid;
	gap: 0.57cqi;
}

.hero-row.hero-numbers-row {
	grid-template-columns: repeat(13, minmax(0, 1.08fr));
}

.hero-row.hero-upper-row {
	grid-template-columns: repeat(12, minmax(0, 1fr));
}

.hero-row.hero-home-row {
	grid-template-columns: repeat(12, minmax(0, 1fr));
}

.hero-row.hero-lower-row {
	grid-template-columns:
		minmax(0, 1fr)
		repeat(10, minmax(0, 1fr));
}

.shell-title {
	position: absolute;
	z-index: 3;
	bottom: 1.36cqi;
	right: 2.05cqi;
	font-family: 'Plus Jakarta Sans', sans-serif;
	font-size: 0.84rem;
	color: #637189;
}

.story-grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: clamp(14px, 2.2vw, 30px);
	margin-top: var(--section-gap);
	padding: 0 clamp(16px, 4vw, 48px);
}

.story-card {
	background: #ffffffd4;
	backdrop-filter: blur(7px);
	border-radius: var(--radius);
	border: 1px solid #d9e2ef;
	padding: clamp(18px, 2.2vw, 28px);
	box-shadow: 0 12px 30px rgba(44, 61, 49, 0.08);
}

.story-index {
	margin: 0;
	color: var(--accent-deep);
	font-weight: 800;
	font-family: 'Plus Jakarta Sans', sans-serif;
}

.story-card h2,
.download-copy h2,
.section-head h2 {
	margin: 0.32rem 0 0.7rem;
	line-height: 1.14;
	font-size: clamp(1.3rem, 2.9vw, 2.08rem);
}

.story-card p {
	margin: 0;
	color: var(--muted);
}

.download {
	margin-top: var(--section-gap);
	margin-bottom: var(--section-gap);
	padding: 0 clamp(16px, 4vw, 48px);
	display: grid;
	justify-items: center;
	text-align: center;
	gap: 22px;
}

.download-copy {
	max-width: 32rem;
}

.status {
	margin: 0;
	color: #3c5f9a;
	font-weight: 700;
}

.claim-form {
	max-width: 40rem;
	width: 100%;
	display: grid;
	justify-items: center;
	gap: 12px;
}

.claim-form input,
.claim-form select,
.claim-form button {
	width: 100%;
	font: inherit;
	border-radius: 17px;
}

.claim-form input,
.claim-form select {
	font-size: clamp(1.15rem, 2.9vw, 1.5rem);
	border: 1px solid #cfd8e8;
	padding: 1.05rem 1.16rem;
	background: #ffffffdb;
	text-align: center;
}

.claim-form button {
	border: 0;
	background: linear-gradient(135deg, #6ea0ee, #4c7fd7);
	color: #fff;
	font-size: clamp(1.1rem, 2.5vw, 1.34rem);
	font-weight: 800;
	padding: 1rem 1.2rem;
	cursor: pointer;
	box-shadow: 0 12px 30px rgba(64, 108, 186, 0.28);
	transition: transform 130ms ease;
}

.claim-form button:hover:not(:disabled) {
	transform: translateY(-1px);
}

.claim-form button:disabled {
	opacity: 0.5;
	cursor: default;
	box-shadow: none;
}

.platform-note {
	margin: 0;
	padding: 0 1rem;
	font-size: 0.84rem;
	color: #5f6f8a;
}

.email-confirmation {
	margin: 0;
	font-size: clamp(1.1rem, 2.5vw, 1.34rem);
	color: #5f6f8a;
}

.form-note {
	margin: 0;
	min-height: 1.2rem;
	color: #59677f;
}

.feedback-prompt {
	margin: 0;
	font-size: 0.84rem;
	color: #5f6f8a;
}

.feedback-prompt a {
	color: #4c7fd7;
}

.keyboard-section {
	margin-top: var(--section-gap);
	padding: 0 clamp(8px, 2.5vw, 20px);
}

.site-footer {
	padding: 0 16px 28px;
	text-align: center;
}

.site-footer p {
	margin: 0;
	color: #5f6f89;
	font-size: 0.78rem;
	line-height: 1.45;
}

.section-head {
	max-width: 730px;
	margin: 0 auto 20px;
	text-align: center;
}

.section-head p:last-child {
	margin: 0;
	color: var(--muted);
}

.keyboard {
	margin: 0 auto;
	max-width: 1240px;
	width: 100%;
	border-radius: clamp(12px, 2.2vw, 28px);
	border: 1px solid #d2dceb;
	background: linear-gradient(165deg, #f8faff, #edf2fb);
	padding: clamp(12px, 2.6vw, 28px);
	box-shadow: 0 24px 60px rgba(45, 71, 53, 0.14);
	position: relative;
}

.iso-enter {
	pointer-events: none;
}

.iso-enter-body {
	cursor: default;
	z-index: 1;
	pointer-events: visiblePainted;
	filter: drop-shadow(0 7px 5px rgba(58, 58, 58, 0.14));
	transition:
		transform 90ms ease,
		filter 90ms ease;
}

.iso-enter-body:hover {
	transform: translateY(3px);
	filter: drop-shadow(0 4px 2px rgba(58, 58, 58, 0.11));
}

.iso-enter-label {
	pointer-events: none;
	user-select: none;
	transition:
		transform 90ms ease,
		filter 90ms ease;
}

.iso-enter-body:hover ~ .iso-enter-label {
	transform: translateY(3px);
}

.iso-enter-depth {
	transform: translateY(4px);
	transition: transform 90ms ease;
}

.key-row {
	display: grid;
	gap: clamp(3px, 0.6vw, 8px);
	margin-bottom: clamp(3px, 0.6vw, 8px);
}

.key-row.numbers-row {
	grid-template-columns:
		repeat(13, minmax(0, 1.08fr))
		minmax(0, 2.2fr);
}

.key-row.upper-row {
	grid-template-columns:
		minmax(0, 1.5fr)
		repeat(12, minmax(0, 1fr))
		minmax(0, 1.65fr);
}

.key-row.home-row {
	grid-template-columns:
		minmax(0, 1.8fr)
		repeat(12, minmax(0, 1fr))
		minmax(0, 1.35fr);
}

.key-row.lower-row {
	grid-template-columns:
		minmax(0, 1.25fr)
		minmax(0, 1fr)
		repeat(10, minmax(0, 1fr))
		minmax(0, 2.85fr);
}

.key-row.modifiers-row {
	grid-template-columns:
		repeat(3, minmax(0, 1.3fr))
		minmax(0, 6.7fr)
		repeat(3, minmax(0, 1.3fr));
}

.key {
	min-height: clamp(42px, 5vw, 66px);
	border-radius: clamp(6px, 1vw, 12px);
	border: 1px solid #cfd8e6;
	background: linear-gradient(180deg, var(--key-top), var(--key-bot));
	box-shadow:
		inset 0 2px 0 #fff,
		0 5px 0 #c2cddd,
		0 8px 16px rgba(53, 66, 55, 0.14);
	padding: clamp(3px, 0.6vw, 8px);
	display: flex;
	align-items: stretch;
	justify-content: space-between;
	transition:
		transform 90ms ease,
		box-shadow 90ms ease;
	user-select: none;
}

.key:hover {
	transform: translateY(3px);
	box-shadow:
		inset 0 1px 0 #fff,
		0 2px 0 #c2cddd,
		0 4px 8px rgba(53, 66, 55, 0.11);
}

.key.compact {
	min-height: clamp(20px, 1.8vw, 34px);
	padding: 4px;
	border-radius: 6px;
	box-shadow:
		inset 0 2px 0 #fff,
		0 2px 0 #c2cddd,
		0 3px 8px rgba(53, 66, 55, 0.11);
}

.key.mod .mod-glyph {
	height: clamp(0.9rem, 1.75vw, 1.5rem);
	width: auto;
}

.key.mod[data-align='left'] {
	justify-content: flex-start;
	align-items: flex-start;
}

.key.mod[data-align='right'] {
	justify-content: flex-end;
	align-items: flex-start;
}

.key.mod {
	justify-content: center;
	align-items: center;
	color: #5f6461;
	font-weight: 700;
	font-size: clamp(0.68rem, 1.5vw, 0.95rem);
	position: relative;
	background: linear-gradient(180deg, #eeeeee, #d9d9d9);
	border-color: #c9c9c9;
	box-shadow:
		inset 0 2px 0 #f8f8f8,
		0 5px 0 #c3c3c3,
		0 8px 16px rgba(58, 58, 58, 0.1);
}

.key.mod:hover {
	box-shadow:
		inset 0 1px 0 #f8f8f8,
		0 2px 0 #c3c3c3,
		0 4px 8px rgba(58, 58, 58, 0.1);
}

.key.mod[data-modifier] {
	cursor: pointer;
	background: linear-gradient(180deg, #fcebdc, #f2d5ba);
	border-color: #e2bc97;
	color: #8a5525;
	box-shadow:
		inset 0 2px 0 #fff4ea,
		0 4px 0 #ddb991,
		0 7px 14px rgba(122, 79, 36, 0.16);
	transition:
		transform 140ms ease,
		box-shadow 160ms ease,
		background 160ms ease,
		color 160ms ease,
		border-color 160ms ease;
}

.key.mod.is-active {
	background: linear-gradient(180deg, #ffe1c8, #f3bf92);
	border-color: #e2a977;
	color: #7a4112;
	transform: translateY(1px);
	box-shadow:
		inset 0 2px 0 #fff0e2,
		0 3px 0 #d7ac83,
		0 5px 10px rgba(122, 79, 36, 0.14);
}

.key.mod[data-modifier]:hover {
	transform: translateY(2px);
	box-shadow:
		inset 0 1px 0 #fff1e3,
		0 2px 0 #d8af87,
		0 4px 8px rgba(122, 79, 36, 0.14);
}

.key.mod[data-modifier]:active {
	transform: translateY(3px);
	box-shadow:
		inset 0 0px 0 #ffeede,
		0 1px 0 #d8af87,
		0 2px 5px rgba(122, 79, 36, 0.13);
}

.key .glyphs {
	width: 100%;
	position: relative;
	pointer-events: none;
	user-select: none;
}

.key .upper,
.key .alt-shift,
.key .lower,
.key .alt {
	display: none;
	height: clamp(0.9rem, 1.75vw, 1.5rem);
	width: auto;
	position: absolute;
}

.key .upper {
	top: 0;
	left: 0;
}

.key .alt-shift {
	top: 0;
	right: 0;
}

.key .lower {
	bottom: 0;
	left: 0;
}

.key .alt {
	bottom: 0;
	right: 0;
}

/* In features mode, all hero-mini glyphs are visible but faded via
   opacity.  The active level is driven by a data-level attribute on
   the hero-mini container. */
body.features-mode .hero-mini .key .glyphs > img {
	display: block !important;
	opacity: 0;
	transition: opacity 300ms linear;
}

body.features-mode .hero-mini[data-level='lower'] .key .lower,
body.features-mode .hero-mini[data-level='upper'] .key .upper,
body.features-mode .hero-mini[data-level='alt'] .key .alt {
	opacity: 1;
}

.hero-callout {
	position: absolute;
	pointer-events: none;
	opacity: 0;
	z-index: 4;
	overflow: visible;
	transition: opacity 550ms linear;
}

.hero-callout.active {
	opacity: 1;
	pointer-events: auto;
}

.callout-ring,
.callout-blurb,
.callout-connector {
	position: absolute;
}

.callout-blurb {
	z-index: 1;
	background: rgba(255, 255, 255, 0.88);
	backdrop-filter: blur(14px);
	-webkit-backdrop-filter: blur(14px);
	border: 1px solid #d5deeb;
	border-radius: 16px;
	padding: 14px 22px;
	width: 25rem;
	text-align: center;
	box-shadow: 0 8px 24px rgba(42, 69, 50, 0.1);
}

.callout-blurb p {
	margin: 0;
	font-size: 0.92rem;
	color: #344961;
	line-height: 1.4;
}

.callout-ring {
	border: 2px solid rgba(90, 134, 216, 0.45);
	border-radius: 10px;
}

.callout-ring-staircase {
	border: none;
	border-radius: 0;
	overflow: visible;
}

.callout-connector {
	overflow: visible;
	pointer-events: none;
}

/* Scroll-driven animation keyframes */

@keyframes hero-copy-fade {
	from {
		opacity: 1;
	}
	to {
		opacity: 0;
	}
}

@keyframes hero-tilt-flatten {
	from {
		transform: perspective(1400px) rotateX(16deg) rotateZ(-1.3deg) scale(1);
	}
	to {
		transform: perspective(1400px) rotateX(0deg) rotateZ(0deg) scale(1.12);
	}
}

/* Scroll-driven hero animations — tilt/copy use vh-based ranges so they
   work regardless of hero height. */
.hero-copy {
	animation: hero-copy-fade linear forwards;
	animation-timeline: scroll(root);
	animation-range: 20vh 50vh;
}

.keyboard-shell {
	animation: hero-tilt-flatten linear both;
	animation-timeline: scroll(root);
	animation-range: 0px 40vh;
}

/* "See features" button — lives in <main> so it doesn't affect
   hero-stage grid centering. Pulled up into the hero's trailing
   whitespace with a negative margin. */
.see-features-button {
	display: block;
	margin: 2vh auto 0;
	position: relative;
	text-decoration: none;
	border: 0;
	border-radius: 999px;
	padding: 0.6rem 1.4rem;
	background: #162338;
	color: #fff;
	font-weight: 700;
	font-size: 0.95rem;
	letter-spacing: 0.04em;
	cursor: pointer;
	transition:
		opacity 300ms ease,
		transform 130ms ease;
}

.see-features-button:hover {
	transform: translateY(-1px);
}

/* Features-mode overlay — captures touch/wheel events for phase navigation */
.features-overlay {
	position: fixed;
	inset: 0;
	visibility: hidden;
	opacity: 0;
	background: var(--bg);
	transition:
		opacity 400ms ease-out,
		visibility 0s 400ms;
	z-index: 5;
}

body.features-mode .features-overlay {
	visibility: visible;
	opacity: 1;
	transition:
		opacity 400ms ease-out,
		visibility 0s 0s;
}

/* Features-mode close button */
.features-close {
	display: flex;
	position: fixed;
	top: 24px;
	right: 24px;
	z-index: 10;
	width: 40px;
	height: 40px;
	border-radius: 50%;
	border: 1px solid #d5deeb;
	background: rgba(255, 255, 255, 0.88);
	backdrop-filter: blur(14px);
	-webkit-backdrop-filter: blur(14px);
	font-size: 1.3rem;
	line-height: 1;
	color: #344961;
	visibility: hidden;
	opacity: 0;
	cursor: pointer;
	align-items: center;
	justify-content: center;
	box-shadow: 0 4px 16px rgba(42, 69, 50, 0.1);
	transition:
		opacity 400ms ease-out,
		visibility 0s 400ms,
		transform 130ms ease;
}

.features-close:hover {
	transform: scale(1.08);
}

body.features-mode .features-close {
	visibility: visible;
	opacity: 1;
	transition:
		opacity 400ms ease-out,
		visibility 0s 0s,
		transform 130ms ease;
}

/* Scroll hint — double chevron shown at bottom of screen in features mode */
.scroll-hint {
	position: fixed;
	bottom: 32px;
	left: 50%;
	translate: -50% 0;
	z-index: 10;
	color: #344961;
	opacity: 0;
	visibility: hidden;
	transition:
		opacity 400ms ease-out,
		visibility 0s 400ms;
}

body.features-mode .scroll-hint.visible {
	opacity: 0.6;
	visibility: visible;
	animation: scroll-hint-bounce 1.6s ease-in-out infinite;
	transition:
		opacity 400ms ease-out,
		visibility 0s 0s;
}

@keyframes scroll-hint-bounce {
	0%,
	100% {
		translate: -50% 0;
	}
	50% {
		translate: -50% 10px;
	}
}

/* Phase dot navigation */
.phase-dots {
	position: fixed;
	right: 28px;
	top: 50%;
	transform: translateY(-50%);
	display: flex;
	flex-direction: column;
	gap: 14px;
	z-index: 11;
	opacity: 0;
	pointer-events: none;
	transition: opacity 400ms ease-out;
}

body.features-mode .phase-dots.visible {
	opacity: 1;
	pointer-events: auto;
}

.phase-dot {
	width: 10px;
	height: 10px;
	border-radius: 50%;
	border: 2px solid rgba(90, 134, 216, 0.45);
	background: transparent;
	padding: 0;
	cursor: pointer;
	transition:
		background 200ms ease,
		border-color 200ms ease,
		transform 200ms ease;
}

.phase-dot:hover {
	transform: scale(1.3);
	border-color: var(--accent);
}

.phase-dot.active {
	background: var(--accent);
	border-color: var(--accent);
}

.hero-mini .key:hover {
	transform: none;
	box-shadow:
		inset 0 1px 0 #fff,
		0 2px 0 #c2cddd,
		0 3px 8px rgba(53, 66, 55, 0.11);
}

.feedback-tab {
	position: fixed;
	right: 0;
	top: 44%;
	transform: translateY(-50%);
	writing-mode: vertical-rl;
	text-orientation: mixed;
	border: 1px solid var(--line);
	border-radius: 14px 0 0 14px;
	background: #ffffffa6;
	color: var(--ink);
	padding: 0.78rem 0.6rem;
	font-weight: 700;
	letter-spacing: 0.04em;
	cursor: pointer;
	transition:
		right 220ms ease,
		opacity 200ms ease-out,
		z-index 0s 400ms;
	z-index: 7;
}

.feedback-tab.open {
	right: var(--feedback-panel-width);
	transition:
		right 220ms ease,
		opacity 200ms ease-out;
}

.feedback-panel {
	position: fixed;
	right: 0;
	top: 0;
	height: 100vh;
	width: var(--feedback-panel-width);
	overflow-y: auto;
	background: #f8fbff;
	border-left: 1px solid #d5dfef;
	box-shadow: -14px 0 30px rgba(31, 43, 34, 0.18);
	transform: translateX(100%);
	transition:
		transform 220ms ease,
		z-index 0s 400ms;
	padding: 22px;
	z-index: 7;
}

.feedback-panel.open {
	transform: translateX(0);
	transition:
		transform 220ms ease,
		z-index 0s 0s;
}

body.features-mode .feedback-tab,
body.features-mode .feedback-panel {
	z-index: 0;
	transition: z-index 0s 0s;
}

.feedback-head {
	display: flex;
	justify-content: space-between;
	align-items: center;
}

.feedback-head h3 {
	margin: 0;
	font-family: 'Plus Jakarta Sans', sans-serif;
}

.feedback-close {
	border: 0;
	background: transparent;
	font-size: 1.6rem;
	cursor: pointer;
}

.feedback-panel p {
	color: #60708b;
}

.feedback-form {
	display: grid;
	gap: 10px;
}

.feedback-form input,
.feedback-form textarea,
.feedback-form button {
	font: inherit;
}

.feedback-form input,
.feedback-form textarea {
	border: 1px solid #cfd8e8;
	border-radius: 12px;
	padding: 0.75rem 0.82rem;
	background: #fff;
}

.feedback-form textarea {
	min-height: 170px;
	resize: vertical;
}

.feedback-form button {
	border: 0;
	border-radius: 12px;
	padding: 0.78rem 1rem;
	background: #4a78cf;
	color: #fff;
	font-weight: 700;
	cursor: pointer;
}

.pill-toggle {
	border: 0;
	padding: 0;
	margin: 0 0 1.5rem;
	display: grid;
	grid-template-columns: auto auto;
	justify-content: start;
	gap: 6px;
}

.pill-toggle legend {
	grid-column: 1 / -1;
	color: #5f6f8a;
	margin-bottom: 6px;
}

.pill-toggle input[type='radio'] {
	position: absolute;
	opacity: 0;
	pointer-events: none;
}

.pill-toggle label {
	display: inline-block;
	padding: 0.45rem 1.4rem;
	border: 1px solid #cfd8e8;
	border-radius: 999px;
	color: #5f6f8a;
	cursor: pointer;
	transition:
		background 120ms ease,
		color 120ms ease,
		border-color 120ms ease;
}

.pill-toggle label:hover {
	border-color: #9ab0d4;
}

.pill-toggle input[type='radio']:checked + label {
	background: #4c7fd7;
	color: #fff;
	border-color: #4c7fd7;
}

.feedback-note {
	margin: 0;
	min-height: 1.2rem;
	color: #59677f;
}

.reveal {
	opacity: 0;
	transform: translateY(16px);
	transition:
		opacity 480ms ease,
		transform 480ms ease;
}

.reveal.in {
	opacity: 1;
	transform: translateY(0);
}

@media (max-width: 980px) {
	@media (orientation: portrait) {
		.see-features-button {
			display: none;
		}

		.hero-callout,
		.phase-dots {
			display: none !important;
		}
	}

	.hero-stage {
		padding: 2vh 0;
	}

	.story-grid {
		grid-template-columns: 1fr;
	}

	.feedback-tab {
		top: auto;
		bottom: 24px;
		right: 14px;
		transform: none;
		writing-mode: horizontal-tb;
		border-radius: 999px;
		padding: 0.55rem 0.85rem;
	}

	.feedback-tab.open {
		right: calc(var(--feedback-panel-width) + 14px);
	}

	body.features-mode .keyboard-shell {
		transform: perspective(1400px) scale(0.75);
	}

	.callout-blurb {
		width: 18rem;
		padding: 10px 16px;
		border-radius: 12px;
	}

	.callout-blurb p {
		font-size: 0.78rem;
	}
}

.orientation-notice {
	display: none;
}

@media (max-width: 570px) {
	:root {
		--section-gap: 4rem;
	}

	.shell-title {
		display: none;
	}

	.hero-mini {
		inset: 2.27cqi 2.27cqi 2.27cqi;
	}

	.keyboard-shell {
		width: 89%;
	}

	@media (orientation: portrait) {
		.orientation-notice {
			position: sticky;
			top: 0;
			z-index: 7;
			display: flex;
			align-items: center;
			gap: 0.75rem;
			padding: 0.65rem clamp(16px, 4vw, 48px);
			background: #fdf6e3;
			border-bottom: 1px solid #e8d9a8;
			color: #5c4a1e;
			font-size: 0.82rem;
			line-height: 1.4;
		}

		.orientation-icon {
			flex-shrink: 0;
			width: 24px;
			height: 24px;
			animation: orientation-wiggle 2.5s ease-in-out infinite;
		}

		@keyframes orientation-wiggle {
			0%,
			100% {
				rotate: 0deg;
			}
			15% {
				rotate: -15deg;
			}
			30% {
				rotate: 12deg;
			}
			45% {
				rotate: -8deg;
			}
			60% {
				rotate: 5deg;
			}
			75% {
				rotate: 0deg;
			}
		}

		.orientation-notice p {
			margin: 0;
		}
	}
}