/*
Theme Name: Legalscript Sogyoyushi
Theme URI: https://github.com/legal-script/legalscript-sogyoyushi
Author: LegalScript
Author URI: https://sample-text.co.jp
Description: Landing page theme for the LegalScript startup financing support service.
Version: 1.0.0
Requires at least: 6.0
Requires PHP: 7.4
License: Proprietary (All Rights Reserved)
Copyright: Copyright (c) 2026 LegalScript Inc. (株式会社リーガルスクリプト)
Text Domain: legalscript-sogyoyushi
*/

/* Tokens */
:root {
	--font-family-base: "Helvetica Neue", Arial, "Hiragino Kaku Gothic ProN", "Hiragino Sans", "Noto Sans JP", sans-serif;

	--color-primary: #2563eb;
	--color-primary-hover: #1d4ed8;
	--color-primary-light: #3b82f6;
	--color-navy: #0c2340;
	--color-navy-dark: #061324;
	--color-heading: #1e293b;
	--color-body: #475569;
	--color-body-light: #73808c;
	--color-border: #e2e8f0;
	--color-white: #ffffff;
	--color-red: #ef4444;
	--color-cta: #f97316;
	--color-cta-hover: #ea580c;

	--bg-section-gray: #f5f5f5;
	--bg-section-blue: #f0f7ff;
	--bg-card: #fafafa;
	--bg-comment-card: #f8fafc;
	--bg-pill-gray: #e5e5e5;

	--radius-sm: 4px;
	--radius-md: 8px;
	--radius-lg: 12px;
	--radius-pill: 999px;

	--space-section-y: 80px;
	--container-max: 1280px;
	--container-pad: 0px;
	--gap-lg: 40px;
	--gap-md: 24px;
	--gap-sm: 16px;
	--gap-xs: 12px;
}

/* Reset */
*, *::before, *::after {
	box-sizing: border-box;
}

html {
	-webkit-text-size-adjust: 100%;
	scroll-behavior: smooth;
}

@media (prefers-reduced-motion: reduce) {
	html {
		scroll-behavior: auto;
	}
}

body {
	margin: 0;
	overflow-x: hidden;
	font-family: var(--font-family-base);
	font-size: 16px;
	line-height: 1.6;
	color: var(--color-body);
	background: var(--color-white);
}

h1, h2, h3, p, ul, figure, form {
	margin: 0;
}

ul {
	padding: 0;
	list-style: none;
}

a {
	color: inherit;
	text-decoration: none;
}

button, input, select {
	font-family: inherit;
	font-size: inherit;
	color: inherit;
}

.container {
	width: 100%;
	max-width: var(--container-max);
	margin: 0 auto;
	padding: 0 var(--container-pad);
}

.section {
	padding: var(--space-section-y) 0;
}

/* Header */
.site-header {
	border-bottom: 1px solid var(--color-border);
}

.site-header__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--gap-sm);
	padding-top: 14px;
	padding-bottom: 14px;
}

.site-logo {
	display: flex;
	align-items: center;
}

.site-logo__img {
	display: block;
	height: 32px;
	width: auto;
}

/* Buttons */
.btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	border-radius: var(--radius-md);
	font-weight: 700;
	letter-spacing: 0.5px;
	text-align: center;
	border: none;
	cursor: pointer;
	white-space: nowrap;
	transition: background-color 0.25s ease, color 0.25s ease, border-color 0.25s ease, transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.25s ease;
}

.btn:hover {
	transform: translateY(-2px);
}

.btn:active {
	transform: translateY(0);
	box-shadow: none;
}

.btn-arrow {
	display: inline-block;
	transition: transform 0.25s ease;
}

.btn:hover .btn-arrow {
	transform: translateX(3px);
}

.btn--primary {
	background: var(--color-cta);
	color: var(--color-white);
	padding: 16px 24px;
	font-size: 16px;
}

.btn--primary:hover,
.btn--block:hover {
	background: var(--color-cta-hover);
	box-shadow: 0 8px 16px -8px rgba(249, 115, 22, 0.35);
}

.btn--sm {
	padding: 12px 20px;
	font-size: 14px;
	font-weight: 900;
}

.btn--lg {
	padding: 16px 24px;
	font-size: 16px;
	font-weight: 900;
}

.btn--block {
	display: flex;
	width: 100%;
	padding: 16px;
	font-weight: 900;
}

.btn--outline-white {
	background: var(--color-primary);
	color: var(--color-white);
	border: 1px solid var(--color-white);
	padding: 16px 40px;
	font-size: 16px;
}

.btn--outline-white:hover {
	background: var(--color-primary-hover);
	border-color: var(--color-white);
}

/* Hero */
.hero {
	position: relative;
	overflow: hidden;
	padding: 48px 0 64px;
	background: var(--color-white);
}

.hero__media {
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	width: 55%;
	pointer-events: none;
}

.hero__media::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
	background: linear-gradient(to right, var(--color-white) 0%, rgba(255, 255, 255, 0) 35%);
}

.hero__media-img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: top center;
}

.hero__inner {
	position: relative;
	z-index: 2;
	display: flex;
	flex-direction: column;
	gap: var(--gap-sm);
}

.tag {
	display: inline-block;
	align-self: flex-start;
	background: var(--bg-section-gray);
	border: 1px solid var(--color-primary-light);
	color: var(--color-primary);
	font-size: 14px;
	font-weight: 900;
	padding: 8px 12px;
	border-radius: var(--radius-pill);
}

.hero__title {
	max-width: 820px;
	font-size: 40px;
	font-weight: 900;
	line-height: 1.3;
	color: var(--color-navy);
	margin-top: 8px;
}

.text-accent {
	color: var(--color-primary);
}

.hero__lead {
	max-width: 820px;
	font-size: 16px;
	line-height: 1.6;
	color: var(--color-body);
	margin-top: 4px;
}

.stat-row {
	display: flex;
	max-width: 820px;
	gap: var(--gap-md);
	margin-top: var(--gap-md);
}

.stat-box {
	flex: 1;
	background: var(--bg-card);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-lg);
	padding: var(--gap-sm);
}

.stat-box__label {
	font-size: 12px;
	font-weight: 700;
	color: var(--color-body);
}

.stat-box__value {
	font-size: 24px;
	font-weight: 900;
	color: var(--color-primary);
	margin-top: 8px;
}

.hero__note {
	max-width: 820px;
	font-size: 13px;
	color: var(--color-body);
	line-height: 1.5;
	margin-top: var(--gap-xs);
}

.hero__actions {
	margin-top: var(--gap-md);
}

/* Section title */
.section-title {
	display: flex;
	flex-direction: column;
	gap: var(--gap-xs);
	margin-bottom: var(--gap-lg);
}

.section-title--center {
	align-items: center;
	text-align: center;
}

.section-title h2 {
	font-size: 28px;
	font-weight: 900;
	line-height: 1.4;
	color: var(--color-heading);
}

.section-title__lead {
	font-size: 14px;
	color: var(--color-body);
	max-width: 720px;
}

.section-title--center .section-title__lead {
	margin: 0 auto;
}

.eyebrow {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	align-self: flex-start;
	font-size: 14px;
	font-weight: 900;
	color: var(--color-primary);
	letter-spacing: 0.5px;
}

.eyebrow--center {
	align-self: center;
}

.eyebrow__bar {
	display: inline-block;
	width: 4px;
	height: 16px;
	background: var(--color-primary);
	border-radius: 2px;
}

.footnote {
	font-size: 12px;
	color: var(--color-body);
	line-height: 1.5;
	margin-top: var(--gap-md);
	text-align: center;
}

/* Misconceptions */
.misconceptions-section {
	background: var(--bg-section-gray);
}

.contrast-row {
	display: flex;
	align-items: center;
	gap: var(--gap-md);
}

.contrast-card {
	flex: 1;
	background: var(--color-white);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-lg);
	padding: var(--gap-md);
	display: flex;
	flex-direction: column;
	gap: var(--gap-sm);
}

.contrast-card--right {
	border: 2px solid var(--color-primary-light);
}

.contrast-card__content {
	display: flex;
	align-items: center;
	gap: var(--gap-sm);
}

.contrast-card__illustration {
	flex-shrink: 0;
	width: 140px;
	height: 167px;
	object-fit: cover;
}

.contrast-card__text {
	flex: 1;
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: var(--gap-sm);
}

.contrast-arrow {
	flex-shrink: 0;
	display: flex;
	align-items: center;
	justify-content: center;
}

.contrast-arrow__icon {
	display: block;
	width: 28px;
	height: 12px;
	transform: rotate(90deg);
}

.pill {
	display: inline-block;
	align-self: flex-start;
	font-size: 12px;
	font-weight: 900;
	padding: 4px 8px;
	border-radius: var(--radius-sm);
}

.pill--gray {
	background: var(--bg-pill-gray);
	color: var(--color-body);
}

.pill--primary-solid {
	background: var(--color-primary);
	color: var(--color-white);
}

.badge {
	display: inline-block;
	align-self: flex-start;
	font-size: 11px;
	font-weight: 900;
	padding: 4px 12px;
	border-radius: var(--radius-sm);
	color: var(--color-white);
}

.badge--muted {
	background: #949daf;
}

.badge--primary {
	background: var(--color-primary);
}

.contrast-card__quote {
	font-size: 18px;
	font-weight: 900;
	line-height: normal;
}

.contrast-card--wrong .contrast-card__quote {
	color: var(--color-navy);
}

.contrast-card--right .contrast-card__quote {
	color: var(--color-primary);
}

.contrast-card__body {
	font-size: 14px;
	color: var(--color-body);
	line-height: 1.6;
}

.spec-table {
	background: var(--color-white);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-lg);
	padding: 8px 32px;
	margin-top: var(--gap-lg);
}

.spec-row {
	display: flex;
	gap: var(--gap-md);
	padding: 16px 0;
	border-bottom: 1px solid var(--color-border);
}

.spec-row:last-child {
	border-bottom: none;
}

.spec-row__label {
	flex: 0 0 160px;
	font-size: 14px;
	font-weight: 700;
	color: var(--color-navy);
}

.spec-row__value {
	flex: 1;
	font-size: 14px;
	color: var(--color-body);
	line-height: 1.5;
}

/* Mid CTA */
.mid-cta {
	padding: 48px 0;
}

.mid-cta__inner {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--gap-md);
	text-align: center;
}

.mid-cta__text {
	font-size: 15px;
	letter-spacing: 0.3px;
}

.mid-cta--primary {
	background: var(--color-primary);
	color: var(--color-white);
}

.mid-cta--navy {
	background: var(--color-navy);
	color: #bfccd9;
}

.mid-cta--gray {
	background: var(--bg-section-gray);
	color: var(--color-body-light);
	border-radius: var(--radius-lg);
}

.mid-cta--inline {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--gap-md);
	text-align: center;
}

/* Card rows */
.card-row {
	display: flex;
	gap: var(--gap-md);
}

/* Why now */
.why-card {
	flex: 1;
	background: var(--bg-card);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-lg);
	padding: 32px;
}

.why-card__header {
	display: flex;
	align-items: center;
	gap: var(--gap-sm);
}

.circle-num {
	flex-shrink: 0;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 28px;
	height: 28px;
	border-radius: var(--radius-lg);
	background: var(--color-primary);
	color: var(--color-white);
	font-size: 13px;
	font-weight: 900;
}

.why-card__title {
	font-size: 16px;
	font-weight: 900;
	color: var(--color-navy);
}

.why-card__body {
	font-size: 14px;
	color: var(--color-body);
	line-height: 1.6;
	margin-top: var(--gap-sm);
}

.why-footer {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--gap-sm);
	text-align: center;
	margin-top: var(--gap-lg);
}

.why-footer p {
	font-size: 16px;
	font-weight: 900;
	color: var(--color-navy);
}

.arrow-link {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	color: var(--color-primary);
	font-weight: 900;
	font-size: 14px;
	transition: color 0.2s ease;
}

.arrow-link:hover {
	color: var(--color-primary-hover);
	text-decoration: underline;
}

.arrow-link:hover .btn-arrow {
	transform: translateX(3px);
}

/* Pricing */
.pricing-section {
	background: var(--bg-section-blue);
}

.price-card {
	flex: 1;
	background: var(--color-white);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-lg);
	padding: 32px;
	display: flex;
	flex-direction: column;
	gap: var(--gap-md);
}

.price-card--hero {
	border: 2px solid var(--color-primary);
}

.price-card__header {
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.price-card__title {
	font-size: 16px;
	font-weight: 900;
	color: var(--color-body);
}

.price-card__price {
	font-size: 32px;
	font-weight: 900;
	color: var(--color-navy);
}

.price-card--hero .price-card__title,
.price-card--hero .price-card__price {
	color: var(--color-primary);
}

.price-card--hero .price-card__title {
	font-size: 18px;
}

.price-card--hero .price-card__price {
	font-size: 26px;
}

.divider {
	border: none;
	border-top: 1px solid var(--color-border);
	margin: 0;
}

.price-card__body {
	font-size: 13px;
	color: var(--color-body);
	line-height: 1.5;
}

/* Scope */
.scope-row {
	display: flex;
	gap: var(--gap-md);
}

.scope-box {
	flex: 1;
	background: var(--bg-card);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-lg);
	padding: 32px;
	display: flex;
	flex-direction: column;
	gap: 20px;
}

.scope-box__header {
	display: flex;
	align-items: center;
	gap: 8px;
	font-size: 18px;
	font-weight: 900;
	color: var(--color-navy);
}

.indicator {
	flex-shrink: 0;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 24px;
	height: 24px;
	border-radius: var(--radius-lg);
	font-size: 13px;
	font-weight: 900;
}

.indicator--check {
	background: var(--color-primary);
	color: var(--color-white);
}

.indicator--cross {
	background: var(--color-body);
	color: var(--color-white);
}

.scope-list {
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.scope-list li {
	font-size: 14px;
	color: var(--color-body);
	line-height: 1.5;
}

.note-box {
	background: var(--bg-card);
	border-radius: var(--radius-md);
	padding: 20px;
	margin-top: var(--gap-lg);
	text-align: center;
}

.note-box p {
	font-size: 14px;
	font-weight: 500;
	color: var(--color-navy);
	line-height: 1.6;
}

/* Why us */
.why-us-section {
	background: var(--bg-section-gray);
}

.why-us-stack {
	display: flex;
	flex-direction: column;
	gap: var(--gap-md);
}

.why-us-card {
	background: var(--color-white);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-lg);
	padding: 32px;
	display: flex;
	align-items: center;
	gap: var(--gap-lg);
}

.why-us-card__text {
	flex: 1;
	min-width: 0;
}

.why-us-card__graphic {
	flex-shrink: 0;
	display: flex;
	align-items: center;
	gap: var(--gap-sm);
}

.why-us-card__badge {
	flex-shrink: 0;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 104px;
	height: 104px;
	padding: 12px;
	border-radius: var(--radius-pill);
	background: var(--bg-section-blue);
	color: var(--color-primary);
	font-size: 13px;
	font-weight: 700;
	text-align: center;
}

.why-us-card__chevron {
	flex-shrink: 0;
	display: inline-flex;
	width: 20px;
	height: 20px;
}

.why-us-card__illustration {
	flex-shrink: 0;
	width: 140px;
	height: auto;
}

.why-us-card__illustration--wide {
	width: 220px;
}

.why-us-card__num {
	font-size: 18px;
	font-weight: 900;
	color: var(--color-primary);
}

.why-us-card__title {
	font-size: 20px;
	font-weight: 900;
	color: var(--color-navy);
	line-height: 1.4;
	margin-top: 12px;
}

.why-us-card__body {
	font-size: 14px;
	color: var(--color-body);
	line-height: 1.6;
	margin-top: 12px;
}

/* Plan check */
.plan-check-section {
	background: var(--bg-section-blue);
}

.plan-check-cols {
	display: flex;
	background: var(--color-white);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-md);
	box-shadow: 0 10px 28px -10px rgba(15, 23, 42, 0.08);
	overflow: hidden;
}

.plan-check-col {
	flex: 1;
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: var(--gap-sm);
	padding: 32px;
}

.plan-check-col:first-child {
	gap: var(--gap-md);
}

.plan-check-col--checklist {
	border-left: 1px solid var(--color-border);
}

.plan-check-col__heading {
	font-size: 14px;
	font-weight: 900;
	color: var(--color-heading);
	text-align: center;
}

.plan-check-col__footnote {
	font-size: 13px;
	color: var(--color-body);
	line-height: 1.6;
	margin-top: var(--gap-xs);
}

.comment-card {
	background: var(--bg-comment-card);
	border: 1px solid var(--color-border);
	border-radius: 6px;
	padding: 20px;
	display: flex;
	flex-direction: column;
	gap: var(--gap-xs);
}

.comment-card__title {
	font-size: 18px;
	font-weight: 900;
	color: var(--color-primary);
}

.comment-card__body {
	font-size: 14px;
	color: var(--color-body);
	line-height: 1.6;
}

.check-item__row {
	display: flex;
	align-items: center;
	gap: 8px;
	font-size: 14px;
	font-weight: 900;
	color: var(--color-navy);
}

.check-item__icon {
	flex-shrink: 0;
	width: 20px;
	height: 20px;
}

.check-item__note {
	font-size: 13px;
	color: var(--color-body);
	line-height: 1.6;
	margin-top: 6px;
}

/* FAQ */
.faq-list {
	display: flex;
	flex-direction: column;
	gap: var(--gap-xs);
}

.faq-item {
	border: 1px solid var(--color-border);
	border-radius: var(--radius-md);
	padding: 20px;
}

.faq-item summary {
	display: flex;
	align-items: center;
	gap: 12px;
	font-size: 15px;
	font-weight: 700;
	color: var(--color-navy);
	cursor: pointer;
	list-style: none;
	transition: color 0.2s ease;
}

.faq-item summary:hover {
	color: var(--color-primary);
}

.faq-item summary::-webkit-details-marker {
	display: none;
}

.faq-item__q {
	flex-shrink: 0;
	font-size: 16px;
	color: var(--color-primary);
	font-weight: 900;
}

.faq-item__question {
	flex: 1;
}

.faq-item__icon {
	flex-shrink: 0;
	margin-left: auto;
	display: inline-flex;
	width: 16px;
	height: 16px;
}

.faq-item__icon img {
	display: block;
	width: 100%;
	height: 100%;
	transform: rotate(90deg);
}

.faq-item[open] .faq-item__icon img {
	transform: rotate(-90deg);
}

.faq-item__a {
	font-size: 14px;
	color: var(--color-body);
	line-height: 1.6;
	margin-top: var(--gap-sm);
}

/* Final CTA */
.final-cta-section {
	background: var(--color-navy);
	color: var(--color-white);
}

.final-cta-section .section-title h2 {
	color: var(--color-white);
}

.final-cta-section .eyebrow {
	color: var(--color-primary);
}

.final-cta-section .eyebrow__bar {
	display: none;
}

.contact-form {
	max-width: 600px;
	margin: 0 auto;
	background: var(--color-white);
	border-radius: var(--radius-lg);
	padding: var(--gap-lg);
	display: flex;
	flex-direction: column;
	gap: var(--gap-md);
}

.form-field {
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.form-field label {
	font-size: 14px;
	font-weight: 900;
	color: var(--color-heading);
	display: inline-flex;
	align-items: center;
	gap: 8px;
}

.form-field input[type="text"],
.form-field input[type="email"],
.form-field input[type="tel"],
.form-field select {
	width: 100%;
	border: 1px solid var(--color-border);
	border-radius: var(--radius-sm);
	padding: 12px;
	font-size: 14px;
	background: var(--color-white);
	color: var(--color-body);
}

.form-field--checkbox label {
	font-size: 12px;
	font-weight: 400;
	color: var(--color-body);
}

.required-tag {
	background: var(--color-red);
	color: var(--color-white);
	font-size: 10px;
	font-weight: 900;
	padding: 4px 8px;
	border-radius: var(--radius-sm);
}

.contact-form-notice {
	max-width: 600px;
	margin: 0 auto;
	padding: var(--gap-md);
	border-radius: var(--radius-lg);
	background: var(--bg-section-gray);
	color: var(--color-body);
	text-align: center;
}

.contact-form .wpcf7-form {
	display: flex;
	flex-direction: column;
	gap: var(--gap-md);
}

.contact-form .wpcf7-not-valid-tip {
	display: block;
	margin-top: 4px;
	font-size: 12px;
	color: var(--color-red);
}

.contact-form .wpcf7-form-control.wpcf7-not-valid {
	border-color: var(--color-red);
}

.contact-form .wpcf7-response-output {
	margin: 0;
	padding: 12px 16px;
	border-radius: var(--radius-sm);
	font-size: 14px;
}

.contact-form .wpcf7-form.sent .wpcf7-response-output {
	border-color: var(--color-primary);
	color: var(--color-primary);
}

.contact-form .wpcf7-form.invalid .wpcf7-response-output,
.contact-form .wpcf7-form.failed .wpcf7-response-output,
.contact-form .wpcf7-form.aborted .wpcf7-response-output,
.contact-form .wpcf7-form.spam .wpcf7-response-output {
	border-color: var(--color-red);
	color: var(--color-red);
}

.contact-form .wpcf7-spinner {
	margin: 0 0 0 8px;
}

/* Footer */
.site-footer {
	background: var(--color-navy-dark);
	color: #e5e5e5;
	padding: 60px 0 40px;
}

.site-footer__logo {
	font-size: 16px;
	font-weight: 900;
	color: var(--color-white);
}

.site-footer__links {
	font-size: 11px;
	text-align: center;
	margin-top: var(--gap-md);
}

.site-footer__links a:hover {
	text-decoration: underline;
}

.site-footer__divider {
	border: none;
	border-top: 1px solid #15305b;
	margin: 24px 0;
}

.site-footer__copyright {
	font-size: 11px;
	text-align: center;
}

/* Legal pages (page-terms.php etc.) */
.legal-section {
	padding: 48px 0 96px;
}

.legal-section__title {
	max-width: 760px;
	margin: 0 auto var(--gap-lg);
	font-size: 28px;
	font-weight: 900;
	color: var(--color-heading);
}

.legal-content {
	max-width: 760px;
	margin: 0 auto;
	color: var(--color-body);
	font-size: 15px;
	line-height: 1.9;
}

.legal-content h2 {
	font-size: 18px;
	font-weight: 700;
	color: var(--color-heading);
	margin-top: 40px;
	margin-bottom: 12px;
}

.legal-content p {
	margin-bottom: 16px;
}

.legal-content ul,
.legal-content ol {
	margin-bottom: 16px;
	padding-left: 1.5em;
}

.legal-content ul {
	list-style: disc;
}

.legal-content ol {
	list-style: decimal;
}

.legal-content li {
	margin-bottom: 8px;
}

/* Responsive */
@media (max-width: 1279px) {
	:root {
		--container-pad: 32px;
		--space-section-y: 56px;
	}

	.hero {
		padding: 0 0 48px;
	}

	.hero__media {
		position: static;
		width: 100%;
		height: 280px;
		margin-bottom: var(--gap-lg);
	}

	.hero__media::before {
		background: linear-gradient(to bottom, rgba(255, 255, 255, 0) 65%, var(--color-white) 100%);
	}
}

@media (max-width: 768px) {
	:root {
		--container-pad: 20px;
		--space-section-y: 40px;
	}

	.hero__media {
		height: 140px;
	}

	.tag {
		margin-top: -60px;
	}

	.hero__inner {
		gap: 8px;
	}

	.hero__title {
		margin-top: 4px;
	}

	.hero__lead {
		font-size: 14px;
		margin-top: 0;
	}

	.hero__note {
		margin-top: 6px;
	}

	.hero__actions {
		margin-top: 12px;
	}

	.card-row,
	.contrast-row,
	.scope-row,
	.plan-check-cols,
	.spec-row {
		flex-direction: column;
	}

	.stat-row {
		margin-top: 12px;
		gap: var(--gap-xs);
	}

	.stat-box {
		padding: 10px 8px;
	}

	.stat-box__label {
		font-size: 10px;
	}

	.stat-box__value {
		font-size: 16px;
		margin-top: 4px;
	}

	.spec-table {
		padding: 8px 20px;
	}

	.spec-row {
		gap: 4px;
	}

	.spec-row__label {
		flex: none;
	}

	.contrast-arrow {
		align-self: center;
	}

	.contrast-arrow__icon {
		transform: rotate(180deg);
	}

	.why-us-card {
		flex-direction: column;
		align-items: flex-start;
	}

	.why-us-card__graphic,
	.why-us-card__illustration {
		align-self: center;
	}

	.plan-check-col {
		padding: 24px;
	}

	.plan-check-col--checklist {
		border-left: none;
		border-top: 1px solid var(--color-border);
	}

	.hero__title {
		font-size: 28px;
	}

	.section-title h2 {
		font-size: 22px;
	}

	.pricing-section .section-title {
		margin-bottom: 24px;
	}

	.pricing-section .card-row {
		gap: 16px;
	}

	.price-card {
		padding: 24px;
		gap: 16px;
	}

	.badge {
		font-size: 12px;
		padding: 4px 10px;
	}

	.price-card__price {
		font-size: 22px;
	}

	.price-card--hero .price-card__price {
		font-size: 18px;
	}

	.price-card__body {
		font-size: 14px;
	}

	.pricing-section .footnote {
		margin-top: 16px;
	}

	.site-header__inner {
		gap: 8px;
	}

	.site-logo {
		font-size: 14px;
	}

}