/* ============================================================
   KA App Theme v1.4.0 — service page template styles
   Mirrors the Base44 app service pages.
   ============================================================ */

.ka-service { font-family: var(--ka-font); background: #fff; }
.ka-service *, .ka-service *::before, .ka-service *::after { box-sizing: border-box; }

/* Centered content container (same as the homepage template). */
.ka-service .ka-wrap {
	max-width: 1200px;
	margin: 0 auto;
	padding: 0 24px;
}

/* ---------- Grey hero ---------- */
.ka-svc-hero {
	background: linear-gradient(120deg, #7E7E7E 0%, #9A9A9A 60%, #8A8A8A 100%);
	padding: 90px 0 80px;
	color: #fff;
}
.ka-svc-hero .ka-eyebrow { color: #fff; opacity: .85; margin-bottom: 14px; }
.ka-svc-hero h1 {
	font-family: var(--ka-serif);
	font-size: clamp(32px, 4.5vw, 52px);
	line-height: 1.15;
	margin: 0 0 18px;
	color: #fff;
	max-width: 800px;
}
.ka-svc-hero .ka-lead { color: rgba(255, 255, 255, .92); max-width: 680px; }
.ka-svc-features {
	list-style: none;
	margin: 26px 0 30px;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	gap: 22px;
}
.ka-svc-features li { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 600; }
.ka-svc-features svg { width: 20px; height: 20px; }
/* Base button (the homepage defines .ka-btn; service pages need it too). */
.ka-service .ka-btn-row { display: flex; gap: 16px; flex-wrap: wrap; margin-top: 32px; }
.ka-service .ka-btn {
	display: inline-block;
	background: var(--ka-red);
	color: #fff !important;
	font-weight: 600;
	font-size: 15px;
	padding: 14px 30px;
	border-radius: 12px;
	text-decoration: none !important;
	border: 2px solid var(--ka-red);
	transition: background .18s ease;
}
.ka-service .ka-btn:hover { background: var(--ka-red-dark); border-color: var(--ka-red-dark); color: #fff !important; }
.ka-btn-ghostdark {
	background: rgba(255, 255, 255, .14) !important;
	color: #fff !important;
	border: 2px solid rgba(255, 255, 255, .5) !important;
}
.ka-btn-ghostdark:hover { background: rgba(255, 255, 255, .25) !important; color: #fff !important; }

/* ---------- Sections ---------- */
.ka-service .ka-narrow { max-width: 880px; margin-left: auto; margin-right: auto; }
.ka-band { background: #F7F7F8; }

/* Checklist: 2-col grid of check items */
.ka-checklist {
	list-style: none;
	margin: 36px 0 0;
	padding: 0;
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 14px 28px;
}
@media (max-width: 640px) { .ka-checklist { grid-template-columns: 1fr; } }
.ka-checklist li {
	display: flex;
	align-items: flex-start;
	gap: 12px;
	background: #fff;
	border: 1px solid #EDEDED;
	border-radius: 12px;
	padding: 14px 16px;
	font-size: 14px;
	font-weight: 500;
	color: var(--ka-ink);
}
.ka-band .ka-checklist li { background: #fff; }
.ka-checklist svg { width: 22px; height: 22px; flex: none; margin-top: 1px; }

/* Cards */
.ka-svc-cards {
	margin-top: 36px;
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 24px;
}
@media (max-width: 640px) { .ka-svc-cards { grid-template-columns: 1fr; } }
.ka-svc-card {
	background: #fff;
	border: 1px solid #EDEDED;
	border-radius: 16px;
	padding: 28px;
	box-shadow: 0 8px 24px rgba(31, 28, 33, .05);
}
.ka-band .ka-svc-card { background: #fff; }
.ka-svc-kicker {
	font-size: 12px;
	font-weight: 700;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--ka-red);
	margin: 0 0 10px;
}
.ka-svc-card h3 {
	font-family: var(--ka-serif);
	font-size: 19px;
	margin: 0 0 10px;
	color: var(--ka-ink);
}
.ka-svc-card p { font-size: 14px; line-height: 1.65; color: var(--ka-text); margin: 0; }

/* Steps */
.ka-steps {
	margin-top: 36px;
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 20px;
}
@media (max-width: 900px) { .ka-steps { grid-template-columns: 1fr 1fr; } }
@media (max-width: 520px) { .ka-steps { grid-template-columns: 1fr; } }
.ka-step {
	background: #fff;
	border: 1px solid #EDEDED;
	border-radius: 16px;
	padding: 26px 22px;
}
.ka-step-num {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	border-radius: 12px;
	background: rgba(241, 19, 26, .1);
	color: var(--ka-red);
	font-weight: 700;
	font-size: 17px;
	margin-bottom: 14px;
}
.ka-step-label {
	font-size: 11px;
	font-weight: 700;
	letter-spacing: .16em;
	text-transform: uppercase;
	color: #999;
	margin: 0 0 8px;
}
.ka-step h3 {
	font-family: var(--ka-serif);
	font-size: 17px;
	margin: 0 0 8px;
	color: var(--ka-ink);
}
.ka-step p { font-size: 13px; line-height: 1.6; color: var(--ka-text); margin: 0; }

/* Platforms */
.ka-platforms {
	margin-top: 30px;
	display: flex;
	flex-wrap: wrap;
	gap: 14px;
}
.ka-platform {
	background: #fff;
	border: 1px solid #E4E4E4;
	border-radius: 999px;
	padding: 12px 28px;
	font-weight: 600;
	font-size: 14px;
	color: var(--ka-ink);
}

/* FAQ accordion */
.ka-faqs { margin-top: 32px; display: grid; gap: 12px; }
.ka-faq {
	background: #fff;
	border: 1px solid #E4E4E4;
	border-radius: 12px;
	overflow: hidden;
}
.ka-faq summary {
	list-style: none;
	cursor: pointer;
	padding: 18px 22px;
	font-weight: 600;
	font-size: 15px;
	color: var(--ka-ink);
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 12px;
}
.ka-faq summary::-webkit-details-marker { display: none; }
.ka-faq summary::after {
	content: "+";
	font-size: 20px;
	color: var(--ka-red);
	font-weight: 400;
	flex: none;
}
.ka-faq[open] summary::after { content: "–"; }
.ka-faq summary:hover { color: var(--ka-red); }
.ka-faq > div { padding: 0 22px 20px; }
.ka-faq > div p { font-size: 14px; line-height: 1.65; color: var(--ka-text); margin: 0; }

/* Pricing table */
.ka-price-note { font-size: 15px; color: var(--ka-ink); margin: 8px 0 26px; }
.ka-price-table {
	width: 100%;
	border-collapse: collapse;
	margin: 0 0 24px;
	font-size: 14px;
}
.ka-price-table th {
	text-align: left;
	background: var(--ka-ink);
	color: #fff;
	padding: 13px 18px;
	font-weight: 600;
}
.ka-price-table th:first-child { border-radius: 10px 0 0 0; }
.ka-price-table th:last-child { border-radius: 0 10px 0 0; text-align: right; }
.ka-price-table td {
	padding: 12px 18px;
	border-bottom: 1px solid #EDEDED;
	color: var(--ka-text);
}
.ka-price-table td:last-child { text-align: right; font-weight: 700; color: var(--ka-ink); }
.ka-price-table tbody tr:hover td { background: #FAFAFA; }
.ka-loose-card {
	background: #fff;
	border: 1px solid #EDEDED;
	border-radius: 16px;
	padding: 26px;
	display: flex;
	align-items: center;
	gap: 26px;
	flex-wrap: wrap;
	box-shadow: 0 8px 24px rgba(31, 28, 33, .05);
}
.ka-loose-name { font-weight: 700; font-size: 16px; color: var(--ka-ink); margin: 0; }
.ka-loose-price { font-family: var(--ka-serif); font-size: 34px; color: var(--ka-red); margin: 0; font-weight: 700; }
.ka-loose-price small { font-size: 14px; font-family: var(--ka-font); color: var(--ka-text); font-weight: 500; margin-left: 4px; }
.ka-loose-sub { font-size: 13px; color: var(--ka-text); margin: 0; flex-basis: 100%; }
.ka-fine { font-size: 13px; color: #999; margin-top: 18px; font-style: italic; }

/* Shipping methods */
.ka-methods {
	margin-top: 36px;
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 24px;
}
@media (max-width: 640px) { .ka-methods { grid-template-columns: 1fr; } }
.ka-method {
	background: #fff;
	border: 1px solid #EDEDED;
	border-radius: 16px;
	padding: 30px;
	box-shadow: 0 8px 24px rgba(31, 28, 33, .05);
}
.ka-method-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: 18px;
}
.ka-method-ico {
	width: 44px;
	height: 44px;
	border-radius: 12px;
	background: var(--ka-red);
	display: inline-flex;
	align-items: center;
	justify-content: center;
}
.ka-method-ico svg { width: 22px; height: 22px; }
.ka-mtag {
	font-size: 11px;
	font-weight: 700;
	letter-spacing: .1em;
	text-transform: uppercase;
	border-radius: 999px;
	padding: 6px 14px;
}
.ka-mtag.blue { background: rgba(37, 99, 235, .12); color: #2563EB; }
.ka-mtag.green { background: rgba(22, 163, 74, .12); color: #16A34A; }
.ka-method h3 {
	font-family: var(--ka-serif);
	font-size: 21px;
	margin: 0 0 4px;
	color: var(--ka-ink);
}
.ka-method-time { font-size: 13px; font-weight: 600; color: var(--ka-red); margin: 0 0 12px; }
.ka-method > p { font-size: 14px; line-height: 1.65; color: var(--ka-text); margin: 0 0 12px; }
.ka-method-best { font-size: 13px !important; }
.ka-method .ka-card-bullets { margin: 14px 0 0; }