@linguanahq/cli 0.1.0

package/dist/templates/blog/vue/src/styles.css

@@ -0,0 +1,1159 @@
+* {
+	box-sizing: border-box;
+}
+html {
+	scroll-behavior: smooth;
+	scroll-padding-top: 6rem;
+}
+body {
+	margin: 0;
+	background: #f7f8f9;
+	color: #203d4c;
+	font-family: Arial, Helvetica, sans-serif;
+	font-size: 16px;
+	line-height: 1.6;
+}
+button,
+input,
+select {
+	font: inherit;
+}
+button,
+a,
+input,
+select,
+summary {
+	-webkit-tap-highlight-color: transparent;
+}
+button,
+a,
+summary {
+	touch-action: manipulation;
+}
+button {
+	cursor: pointer;
+}
+a {
+	color: inherit;
+	text-decoration: none;
+}
+a:hover {
+	text-decoration: underline;
+	text-underline-offset: 5px;
+}
+button:hover {
+	filter: brightness(0.94);
+}
+:focus-visible {
+	outline: 3px solid #dd684e;
+	outline-offset: 5px;
+}
+img {
+	display: block;
+	max-width: 100%;
+	height: auto;
+}
+h1,
+h2,
+h3,
+p {
+	margin: 0;
+}
+h1,
+h2,
+h3 {
+	line-height: 1.12;
+	letter-spacing: -0.045em;
+}
+h1 {
+	font-size: clamp(2.8rem, 5.7vw, 5.4rem);
+	font-weight: 500;
+}
+h2 {
+	font-size: clamp(2rem, 3.4vw, 3rem);
+	font-weight: 500;
+}
+h3 {
+	font-size: 1.55rem;
+}
+p {
+	max-width: 65ch;
+}
+button {
+	color: inherit;
+}
+input,
+select {
+	border: 1px solid #c6cdd0;
+	background: transparent;
+	border-radius: 5px;
+	color: inherit;
+	padding: 0.7rem 0.85rem;
+	min-width: 0;
+}
+select {
+	max-width: 100%;
+}
+.site {
+	--accent: #254e65;
+	--paper: #eff3f5;
+	--ink: #203d4c;
+	--line: #d5dfe4;
+	--warm: #de7658;
+	max-width: 1600px;
+	margin: auto;
+	min-height: 100vh;
+	color: var(--ink);
+}
+.site-header,
+.site-footer,
+.section,
+.hero {
+	padding-inline: clamp(1.2rem, 5.5vw, 6rem);
+}
+.site-header {
+	min-height: 98px;
+	display: flex;
+	align-items: center;
+	justify-content: space-between;
+	border-bottom: 1px solid var(--line);
+	gap: 2rem;
+}
+.brand {
+	font-size: 1.55rem;
+	font-weight: 700;
+	letter-spacing: -0.065em;
+	display: inline-flex;
+	align-items: center;
+	gap: 0.55rem;
+	white-space: nowrap;
+}
+.brand-mark {
+	color: var(--warm);
+	font-size: 2rem;
+	font-family: Georgia, serif;
+}
+.site-header nav {
+	display: flex;
+	align-items: center;
+	gap: 2rem;
+	font-size: 0.85rem;
+	font-weight: 500;
+}
+.locale-picker select {
+	border: 0;
+	padding: 0.5rem 0.2rem;
+	max-width: 120px;
+	font-size: 0.85rem;
+}
+.hero {
+	padding-block: 4.5rem 5rem;
+	display: grid;
+	grid-template-columns: 1fr 1fr;
+	align-items: center;
+	gap: 5rem;
+}
+.hero-copy h1 {
+	margin-block: 1.1rem 1.8rem;
+}
+.eyebrow {
+	text-transform: uppercase;
+	letter-spacing: 0.17em;
+	font-size: 0.69rem;
+	font-weight: 700;
+	color: var(--accent);
+	margin-bottom: 1rem;
+}
+.intro {
+	font-size: 1.07rem;
+	line-height: 1.8;
+	color: #586d77;
+	margin-bottom: 2rem;
+}
+.hero-image {
+	width: 100%;
+	height: 510px;
+	object-fit: cover;
+}
+.image-caption {
+	display: flex;
+	justify-content: space-between;
+	font-size: 0.68rem;
+	font-weight: 600;
+	letter-spacing: 0.13em;
+	padding-top: 1rem;
+}
+.text-link {
+	font-weight: 600;
+	font-size: 0.88rem;
+	border-bottom: 1px solid;
+	padding-bottom: 0.3rem;
+}
+.button {
+	background: var(--accent);
+	color: white;
+	border: 1px solid var(--accent);
+	border-radius: 4px;
+	padding: 0.95rem 1.5rem;
+	display: inline-flex;
+	gap: 1rem;
+	align-items: center;
+	justify-content: center;
+	line-height: 1.4;
+	font-size: 0.86rem;
+	font-weight: 600;
+	text-align: center;
+}
+.button:hover {
+	text-decoration: none;
+}
+.small {
+	padding: 0.65rem 1rem;
+}
+.section {
+	padding-block: 4.5rem;
+}
+.section-heading {
+	display: flex;
+	justify-content: space-between;
+	gap: 2rem;
+	align-items: baseline;
+	margin-bottom: 2rem;
+}
+.section-heading .muted {
+	font-size: 0.78rem;
+}
+.muted {
+	color: #647570;
+}
+.fine {
+	font-size: 0.75rem;
+}
+.filters {
+	display: flex;
+	gap: 1rem;
+	flex-wrap: wrap;
+	align-items: center;
+	margin-bottom: 2.5rem;
+	padding-bottom: 1.3rem;
+	border-bottom: 1px solid var(--line);
+}
+.filter-buttons {
+	display: flex;
+	gap: 0.35rem;
+	flex-wrap: wrap;
+	flex: 1;
+}
+.chip {
+	border: 0;
+	background: transparent;
+	font-size: 0.8rem;
+	padding: 0.6rem 0.9rem;
+	border-radius: 3px;
+}
+.chip.active {
+	background: var(--accent);
+	color: white;
+}
+.search input {
+	width: 190px;
+}
+.article-grid {
+	display: grid;
+	grid-template-columns: repeat(3, 1fr);
+	gap: 3.5rem 2rem;
+}
+.article-card img {
+	aspect-ratio: 4 / 3;
+	width: 100%;
+	object-fit: cover;
+}
+.article-card .meta {
+	margin-block: 1.2rem 0.8rem;
+}
+.meta {
+	display: flex;
+	gap: 1rem;
+	align-items: center;
+	font-size: 0.68rem;
+	color: #697b84;
+	text-transform: uppercase;
+	letter-spacing: 0.08em;
+}
+.article-card h3 {
+	font-size: 1.85rem;
+	font-weight: 500;
+}
+.article-card p {
+	font-size: 0.86rem;
+	color: #5e717c;
+	margin-block: 1rem;
+}
+.article-card > a:last-child {
+	font-size: 0.77rem;
+	font-weight: 600;
+}
+.site-footer {
+	border-top: 1px solid var(--line);
+	padding-block: 3rem;
+	display: flex;
+	justify-content: space-between;
+	align-items: flex-end;
+	gap: 3rem;
+}
+.site-footer p {
+	font-size: 0.82rem;
+	color: #61716e;
+	margin-top: 1rem;
+	max-width: 390px;
+}
+.site-footer > .fine {
+	font-size: 0.7rem;
+	max-width: 220px;
+}
+.site-footer .fine a {
+	display: block;
+	margin-top: 0.65rem;
+}
+.empty {
+	padding-block: 4rem;
+	text-align: center;
+	max-width: 800px;
+	margin: auto;
+}
+.empty h1 {
+	font-size: 3rem;
+}
+.empty h3,
+.empty p {
+	margin: 1rem auto;
+}
+.empty > a {
+	display: inline-block;
+	margin-top: 1rem;
+	text-decoration: underline;
+}
+.article-detail {
+	max-width: 1100px;
+	margin: auto;
+}
+.article-detail > .eyebrow {
+	margin-top: 2rem;
+}
+.article-detail > h1 {
+	max-width: 850px;
+	margin-bottom: 1.5rem;
+}
+.detail-image {
+	margin-block: 2rem;
+	aspect-ratio: 16 / 10;
+	object-fit: cover;
+	width: 100%;
+}
+.prose {
+	max-width: 680px;
+	margin: 3rem auto;
+	line-height: 1.9;
+}
+.prose p {
+	margin-bottom: 1.7rem;
+	font-size: 1.05rem;
+}
+.prose .lead {
+	font-size: 1.35rem;
+	color: #526d7b;
+}
+.blog h1,
+.blog h2,
+.blog h3 {
+	font-family: Georgia, "Times New Roman", serif;
+}
+.blog .brand {
+	font-family: Georgia, serif;
+	font-style: italic;
+	font-size: 1.85rem;
+}
+.blog #journal {
+	background: #eff3f5;
+}
+.storefront {
+	--accent: #285144;
+	--ink: #223e33;
+	--line: #d9ddd2;
+	--warm: #b89460;
+	background: #f7f7f1;
+}
+.storefront h1,
+.storefront h2 {
+	font-family: Georgia, serif;
+}
+.store-hero {
+	background: #edf0e5;
+	gap: 2rem;
+}
+.store-hero .hero-image {
+	object-fit: contain;
+}
+.product-grid {
+	display: grid;
+	grid-template-columns: repeat(4, 1fr);
+	gap: 3rem 1.3rem;
+}
+.product-card img {
+	width: 100%;
+	aspect-ratio: 1;
+	object-fit: cover;
+	background: #eeeede;
+	transition: transform 0.2s;
+}
+.product-card > a {
+	display: block;
+	overflow: hidden;
+}
+.product-card > a:hover img {
+	transform: scale(1.025);
+}
+.product-heading {
+	display: flex;
+	justify-content: space-between;
+	gap: 0.5rem;
+	align-items: baseline;
+	margin-top: 1.1rem;
+}
+.product-heading h3 {
+	font-size: 0.95rem;
+	font-weight: 600;
+	letter-spacing: -0.02em;
+}
+.product-heading > span {
+	font-size: 0.85rem;
+	white-space: nowrap;
+}
+.product-card p {
+	font-size: 0.73rem;
+	margin-top: 0.4rem;
+}
+.add-button {
+	border: 0;
+	border-bottom: 1px solid #819787;
+	background: transparent;
+	padding: 0.45rem 0;
+	font-size: 0.76rem;
+	margin-top: 0.5rem;
+}
+.cart-count {
+	display: inline-grid;
+	place-items: center;
+	background: var(--accent);
+	color: white;
+	width: 23px;
+	height: 23px;
+	border-radius: 50%;
+	font-size: 0.66rem;
+	margin-inline-start: 0.4rem;
+}
+.product-detail {
+	display: grid;
+	grid-template-columns: 1fr 1fr;
+	gap: 5rem;
+	align-items: center;
+}
+.product-detail h1 {
+	font-size: 3.2rem;
+}
+.product-detail .eyebrow {
+	margin-top: 2rem;
+}
+.product-detail .price {
+	font-size: 1.4rem;
+	margin-block: 1rem;
+}
+.quantity {
+	display: flex;
+	gap: 1rem;
+	align-items: center;
+	margin-block: 1.5rem;
+}
+.quantity input {
+	width: 75px;
+}
+.product-detail .fine {
+	margin-top: 1.5rem;
+}
+.basket {
+	max-width: 1150px;
+	margin: auto;
+	min-height: 65vh;
+}
+.cart-row {
+	display: flex;
+	align-items: center;
+	gap: 2rem;
+	border-bottom: 1px solid var(--line);
+	padding-block: 1.5rem;
+}
+.cart-row > img {
+	width: 100px;
+}
+.cart-row > div {
+	flex: 1;
+}
+.cart-row h2 {
+	font-family: Arial, sans-serif;
+	font-size: 1.2rem;
+	letter-spacing: -0.02em;
+	margin-bottom: 0.4rem;
+}
+.text-button {
+	border: 0;
+	background: none;
+	text-decoration: underline;
+	font-size: 0.85rem;
+}
+.cart-total {
+	display: flex;
+	justify-content: space-between;
+	font-size: 1.5rem;
+	margin-block: 2rem;
+}
+.basket > p {
+	margin-top: 1.3rem;
+}
+.toast {
+	position: fixed;
+	inset-inline: 1rem;
+	bottom: 1.5rem;
+	margin: auto;
+	width: fit-content;
+	max-width: calc(100% - 2rem);
+	padding: 1rem 1.4rem;
+	background: var(--accent);
+	color: white;
+	box-shadow: 0 8px 35px #0002;
+	font-size: 0.85rem;
+	z-index: 5;
+	display: flex;
+	gap: 2rem;
+	flex-wrap: wrap;
+}
+.toast a {
+	text-decoration: underline;
+}
+.saas {
+	--accent: #494fbd;
+	--ink: #222544;
+	--line: #dddeeb;
+	--warm: #5a60cc;
+	background: #fafafd;
+}
+.saas h1,
+.saas h2 {
+	font-weight: 600;
+	letter-spacing: -0.065em;
+}
+.saas-hero {
+	padding-block: 6rem;
+	gap: 4rem;
+}
+.saas-hero h1 {
+	font-size: clamp(2.7rem, 4.8vw, 4.8rem);
+}
+.saas .intro {
+	color: #71718b;
+}
+.hero-actions {
+	display: flex;
+	gap: 2rem;
+	align-items: center;
+}
+.handover-art {
+	height: 410px;
+	background: #e9e9fa;
+	border-radius: 8px;
+	position: relative;
+	display: grid;
+	place-items: center;
+	overflow: hidden;
+}
+.handover-art:before {
+	content: "";
+	position: absolute;
+	inset: 3rem;
+	border: 1px solid #c1c2e1;
+	border-radius: 50%;
+	transform: rotate(-25deg) scaleX(1.4);
+}
+.orbit-label {
+	position: absolute;
+	top: 2rem;
+	inset-inline-start: 2rem;
+	font-size: 0.75rem;
+	color: var(--accent);
+	letter-spacing: 0.1em;
+}
+.paper {
+	position: relative;
+	transform: rotate(-6deg);
+	padding: 2rem;
+	background: white;
+	width: 75%;
+	box-shadow: 0 15px 35px #3b39821a;
+	border: 1px solid #d9d9ed;
+	border-radius: 8px;
+}
+.paper strong {
+	display: block;
+	margin-top: 1.5rem;
+	font-size: 0.85rem;
+}
+.avatar,
+.avatars span {
+	width: 34px;
+	height: 34px;
+	background: #e4dbcc;
+	border-radius: 50%;
+	display: inline-grid;
+	place-items: center;
+	font-size: 0.7rem;
+	font-weight: 600;
+}
+.paper-line {
+	height: 7px;
+	border-radius: 4px;
+	background: #ebebf4;
+	margin-top: 1rem;
+}
+.paper-line.short {
+	width: 70%;
+	margin-top: 0.5rem;
+}
+.avatars {
+	margin-top: 2rem;
+	display: flex;
+}
+.avatars span + span {
+	margin-inline-start: -7px;
+	border: 2px solid white;
+	background: #dae6e1;
+}
+.avatars span:last-child {
+	background: #dcd5ef;
+}
+.art-stamp {
+	position: absolute;
+	bottom: 2rem;
+	inset-inline-end: 2rem;
+	display: grid;
+	place-items: center;
+	background: var(--accent);
+	color: white;
+	font-size: 3rem;
+	width: 80px;
+	height: 80px;
+	border-radius: 12px;
+	transform: rotate(9deg);
+}
+.workflow {
+	background: #f0f0f8;
+	display: grid;
+	grid-template-columns: 1fr 1fr;
+	gap: 5rem;
+	align-items: center;
+}
+.workflow h2 {
+	font-size: 2.6rem;
+}
+.workflow-steps {
+	display: grid;
+	gap: 0.8rem;
+	margin-top: 2rem;
+}
+.workflow-step {
+	display: flex;
+	gap: 1rem;
+	border: 1px solid transparent;
+	background: transparent;
+	padding: 1rem;
+	border-radius: 6px;
+	text-align: start;
+}
+.workflow-step.selected {
+	background: white;
+	border-color: #dedfed;
+}
+.step-number {
+	font-size: 0.75rem;
+	color: var(--accent);
+	padding-top: 0.1rem;
+}
+.workflow-step strong {
+	display: block;
+	font-size: 0.92rem;
+}
+.workflow-step span span {
+	display: block;
+	font-size: 0.81rem;
+	color: #73768a;
+	margin-top: 0.4rem;
+	line-height: 1.7;
+}
+.preview-board {
+	background: white;
+	border: 1px solid #dadbea;
+	box-shadow: 0 18px 35px #3632630a;
+	border-radius: 7px;
+	min-height: 340px;
+}
+.board-header {
+	border-bottom: 1px solid #e7e7ef;
+	padding: 1rem;
+	font-size: 0.66rem;
+	display: flex;
+	gap: 0.5rem;
+	align-items: center;
+}
+.dot {
+	width: 6px;
+	height: 6px;
+	background: var(--accent);
+	border-radius: 50%;
+}
+.board-content {
+	padding: 2rem;
+}
+.board-content h3 {
+	font-size: 1.25rem;
+	font-weight: 500;
+	letter-spacing: -0.025em;
+	line-height: 1.5;
+}
+.owner {
+	display: flex;
+	gap: 0.6rem;
+	align-items: center;
+	font-size: 0.8rem;
+	margin-block: 1.5rem;
+}
+.features {
+	display: grid;
+	grid-template-columns: 1fr 1fr;
+	gap: 6rem;
+}
+.features h2 {
+	font-size: 2.3rem;
+	margin-block: 1.3rem;
+}
+.features p {
+	font-size: 0.94rem;
+	color: #73738a;
+}
+.feature-icon {
+	display: inline-block;
+	color: var(--accent);
+	font-size: 2rem;
+}
+.pricing {
+	text-align: center;
+	background: #f2f2fa;
+}
+.pricing > .eyebrow {
+	margin-inline: auto;
+}
+.pricing h2 {
+	margin-bottom: 1.8rem;
+}
+.billing-toggle {
+	display: inline-flex;
+	background: #e1e2ef;
+	border-radius: 5px;
+	padding: 4px;
+	margin-bottom: 2.5rem;
+}
+.billing-toggle button {
+	background: none;
+	border: 0;
+	border-radius: 3px;
+	padding: 0.65rem 1rem;
+	font-size: 0.8rem;
+}
+.billing-toggle button[aria-pressed="true"] {
+	background: white;
+	box-shadow: 0 1px 3px #2221;
+}
+.pricing-grid {
+	display: grid;
+	grid-template-columns: repeat(3, 1fr);
+	gap: 1.2rem;
+	text-align: start;
+}
+.plan {
+	background: white;
+	border: 1px solid #dcdceb;
+	padding: 2rem;
+	border-radius: 6px;
+	position: relative;
+}
+.plan.popular {
+	border: 2px solid var(--accent);
+}
+.plan h3 {
+	font-size: 1.2rem;
+	letter-spacing: -0.03em;
+	margin-bottom: 1rem;
+}
+.plan p {
+	font-size: 0.82rem;
+	color: #6b6e82;
+}
+.plan .plan-price {
+	font-size: 3rem;
+	letter-spacing: -0.05em;
+	color: var(--ink);
+	margin-top: 1.5rem;
+}
+.plan .billing-note {
+	height: 1.8rem;
+	margin-bottom: 1rem;
+}
+.plan .button {
+	width: 100%;
+}
+.plan ul {
+	list-style: none;
+	padding: 0;
+	font-size: 0.78rem;
+	line-height: 2.5;
+	margin-top: 1.5rem;
+}
+.plan li:before {
+	content: "✓";
+	color: var(--accent);
+	margin-inline-end: 0.6rem;
+}
+.plan-badge {
+	position: absolute;
+	top: -0.85rem;
+	inset-inline: 1.5rem;
+	background: var(--accent);
+	color: white;
+	font-size: 0.65rem;
+	padding: 0.2rem 0.8rem;
+	border-radius: 4px;
+	width: fit-content;
+}
+.faq {
+	max-width: 1100px;
+	margin: auto;
+}
+.faq h2 {
+	margin-bottom: 2rem;
+}
+.faq details {
+	border-bottom: 1px solid var(--line);
+	padding-block: 1.4rem;
+}
+.faq summary {
+	cursor: pointer;
+	font-weight: 600;
+	font-size: 0.95rem;
+}
+.faq p {
+	margin-top: 1rem;
+	font-size: 0.9rem;
+	color: #6b6e82;
+}
+.contact {
+	display: grid;
+	grid-template-columns: 1fr 1fr;
+	gap: 6rem;
+	background: #ececf8;
+}
+.demo-form {
+	display: grid;
+	gap: 1rem;
+}
+.demo-form label {
+	display: grid;
+	gap: 0.4rem;
+	font-size: 0.8rem;
+}
+.demo-form input {
+	background: #fff8;
+}
+.demo-form .button {
+	justify-self: start;
+}
+.success {
+	color: #26674b;
+	background: #e4f3e9;
+	padding: 1rem;
+	margin-block: 1rem;
+	font-size: 0.85rem;
+	border-radius: 4px;
+}
+.sr-only {
+	position: absolute;
+	width: 1px;
+	height: 1px;
+	padding: 0;
+	margin: -1px;
+	overflow: hidden;
+	clip: rect(0, 0, 0, 0);
+	white-space: nowrap;
+	border: 0;
+}
+.skip-link {
+	position: fixed;
+	top: -6rem;
+	inset-inline-start: 1rem;
+	z-index: 20;
+	background: white;
+	color: #203d4c;
+	padding: 1rem;
+}
+.skip-link:focus {
+	top: 1rem;
+}
+[dir="rtl"] .blog h1,
+[dir="rtl"] .blog h2,
+[dir="rtl"] .blog h3,
+[dir="rtl"] .storefront h1,
+[dir="rtl"] .storefront h2 {
+	font-family: Tahoma, Arial, sans-serif;
+	line-height: 1.4;
+	letter-spacing: 0;
+}
+[dir="rtl"] .eyebrow {
+	letter-spacing: 0;
+}
+[dir="rtl"] h1,
+[dir="rtl"] h2,
+[dir="rtl"] h3 {
+	letter-spacing: 0;
+	line-height: 1.5;
+}
+@media (max-width: 1000px) {
+	.hero {
+		gap: 2rem;
+	}
+	.hero-image {
+		height: 420px;
+	}
+	.site-header nav {
+		gap: 1rem;
+	}
+	.article-grid {
+		gap: 2rem 1.4rem;
+	}
+	.product-grid {
+		grid-template-columns: repeat(3, 1fr);
+	}
+	.workflow,
+	.features,
+	.contact {
+		gap: 2.5rem;
+	}
+	.plan {
+		padding: 1.5rem;
+	}
+	.product-detail {
+		gap: 2rem;
+	}
+}
+@media (max-width: 760px) {
+	.site-header {
+		min-height: 85px;
+		gap: 0.8rem;
+		flex-wrap: wrap;
+		padding-block: 1rem;
+	}
+	.brand {
+		font-size: 1.25rem;
+	}
+	.site-header nav {
+		gap: 0.8rem;
+	}
+	.site-header nav > a {
+		font-size: 0.72rem;
+	}
+	.site-header nav > .small {
+		display: none;
+	}
+	.hero {
+		grid-template-columns: 1fr;
+		padding-block: 3rem;
+		gap: 2.5rem;
+	}
+	.hero h1 {
+		max-width: 12ch;
+	}
+	.hero-image {
+		height: auto;
+		max-height: 470px;
+		object-fit: cover;
+	}
+	.blog-hero > a {
+		display: block;
+	}
+	.intro {
+		font-size: 0.95rem;
+	}
+	.section {
+		padding-block: 3rem;
+	}
+	.section-heading {
+		display: block;
+	}
+	.section-heading .muted {
+		display: block;
+		margin-top: 0.7rem;
+	}
+	.article-grid {
+		grid-template-columns: repeat(2, 1fr);
+	}
+	.article-card h3 {
+		font-size: 1.5rem;
+	}
+	.meta {
+		flex-wrap: wrap;
+		gap: 0.3rem 0.7rem;
+		font-size: 0.6rem;
+	}
+	.filters {
+		gap: 0.8rem;
+	}
+	.filter-buttons {
+		flex-basis: 100%;
+	}
+	.search {
+		flex: 1;
+	}
+	.search input {
+		width: 100%;
+	}
+	.product-grid {
+		grid-template-columns: repeat(2, 1fr);
+		gap: 2rem 1rem;
+	}
+	.product-heading {
+		display: block;
+	}
+	.product-heading > span {
+		display: block;
+		margin-top: 0.3rem;
+	}
+	.site-footer {
+		display: block;
+	}
+	.site-footer > .fine {
+		margin-top: 2rem;
+	}
+	.product-detail {
+		grid-template-columns: 1fr;
+	}
+	.product-detail h1 {
+		font-size: 2.5rem;
+	}
+	.cart-row {
+		gap: 0.8rem;
+		flex-wrap: wrap;
+	}
+	.cart-row > img {
+		width: 65px;
+	}
+	.cart-row h2 {
+		font-size: 1rem;
+	}
+	.cart-row .quantity {
+		margin: 0;
+	}
+	.cart-row .quantity input {
+		width: 55px;
+		padding: 0.5rem;
+	}
+	.cart-row > button {
+		margin-inline-start: auto;
+	}
+	.workflow,
+	.features,
+	.contact {
+		grid-template-columns: 1fr;
+	}
+	.handover-art {
+		height: 330px;
+	}
+	.pricing-grid {
+		grid-template-columns: 1fr;
+		gap: 2rem;
+	}
+	.plan {
+		max-width: 440px;
+		width: 100%;
+		margin: auto;
+	}
+	.plan .plan-price {
+		font-size: 2.5rem;
+	}
+	.contact h2 {
+		font-size: 2.4rem;
+	}
+	.article-detail h1 {
+		font-size: 2.8rem;
+	}
+	.article-detail .detail-image {
+		aspect-ratio: 4 / 3;
+	}
+	.prose p {
+		font-size: 1rem;
+	}
+	.locale-picker select {
+		max-width: 90px;
+	}
+	.saas .site-header nav > a {
+		display: none;
+	}
+	.saas .brand {
+		font-size: 1.5rem;
+	}
+}
+@media (max-width: 430px) {
+	.blog .site-header nav > a {
+		display: none;
+	}
+	.article-grid {
+		grid-template-columns: 1fr;
+	}
+	.article-card img {
+		aspect-ratio: 16 / 10;
+	}
+	.site-header {
+		gap: 0.5rem;
+	}
+	.site-header nav {
+		gap: 0.6rem;
+	}
+	.storefront .site-header nav > a:first-child {
+		display: none;
+	}
+	.product-card .product-heading h3 {
+		font-size: 0.86rem;
+	}
+	.hero-actions {
+		gap: 1.2rem;
+	}
+}
+@media (prefers-reduced-motion: reduce) {
+	html {
+		scroll-behavior: auto;
+	}
+	* {
+		transition: none;
+	}
+}
+
+fieldset {
+	border: 0;
+	padding: 0;
+	margin: 0;
+	min-width: 0;
+}