/* ==========================================================================
   Skynet Regional Pricing — landing page canvas
   --------------------------------------------------------------------------
   These pages load the active theme's stylesheet through wp_head(), which is
   why the first version came out with the theme's link colours on the buttons
   and an unconstrained logo. Everything below is scoped under .skrp-canvas and
   set explicitly so the theme cannot reach in.
   ========================================================================== */

.skrp-canvas {
	--skrp-primary: #00A0FF;
	--skrp-accent: #FD7F22;
	--skrp-ink: #10202E;
	--skrp-body: #4A5A68;
	--skrp-line: #E2E8EF;
	--skrp-wash: #F5F8FB;

	--skrp-radius: 10px;
	--skrp-max: 1120px;
	--skrp-logo-w: 260px;

	box-sizing: border-box;
	display: flex;
	flex-direction: column;
	min-height: 100vh;
	background: #fff;
	color: var(--skrp-ink);
	font-size: 17px;
	line-height: 1.6;
	text-align: left;
}

.skrp-canvas *,
.skrp-canvas *::before,
.skrp-canvas *::after { box-sizing: inherit; }

body.skrp-canvas-body { margin: 0; background: #fff; -webkit-font-smoothing: antialiased; }

.skrp-canvas img { max-width: 100%; height: auto; }

.skrp-canvas h1,
.skrp-canvas h2,
.skrp-canvas h3 { color: var(--skrp-ink); letter-spacing: -.02em; }

/* --------------------------------------------------------------------------
   Header bar
   -------------------------------------------------------------------------- */

.skrp-bar { border-bottom: 1px solid var(--skrp-line); background: #fff; }

.skrp-bar__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	max-width: var(--skrp-max);
	margin: 0 auto;
	padding: .85rem 1.25rem;
}

/* The logo is the one element most likely to arrive oversized. */
.skrp-bar__logo { display: block; line-height: 0; flex: 0 1 auto; }

.skrp-canvas .skrp-bar__logo img {
	display: block;
	width: auto;
	max-width: var(--skrp-logo-w, 260px);
	max-height: 72px;
	object-fit: contain;
}

.skrp-bar__name {
	font-size: 1.15rem;
	font-weight: 700;
	color: var(--skrp-ink);
	text-decoration: none;
}

.skrp-bar__phone {
	flex: none;
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	padding: .4rem .9rem;
	border: 1px solid var(--skrp-line);
	border-radius: var(--skrp-radius);
	color: var(--skrp-ink);
	text-decoration: none;
	line-height: 1.25;
}

.skrp-bar__phone:hover { border-color: var(--skrp-primary); text-decoration: none; }

.skrp-bar__phone-label {
	font-size: .68rem;
	font-weight: 600;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--skrp-body);
}

.skrp-bar__phone-number { font-size: 1.02rem; font-weight: 700; color: var(--skrp-primary); }

@media (max-width: 520px) {
	.skrp-bar__phone-label { display: none; }
	.skrp-canvas .skrp-bar__logo img { max-width: min(var(--skrp-logo-w, 260px), 180px); max-height: 48px; }
}

/* --------------------------------------------------------------------------
   Layout
   -------------------------------------------------------------------------- */

.skrp-landing { flex: 1 0 auto; }

.skrp-hero,
.skrp-plans,
.skrp-trust,
.skrp-prose,
.skrp-faqs,
.skrp-foot__inner {
	max-width: var(--skrp-max);
	margin: 0 auto;
	padding-left: 1.25rem;
	padding-right: 1.25rem;
}

.skrp-section-title {
	margin: 0 0 1.6rem;
	font-size: clamp(1.5rem, 3.5vw, 2.1rem);
	font-weight: 700;
	line-height: 1.2;
}

/* --------------------------------------------------------------------------
   Hero
   -------------------------------------------------------------------------- */

.skrp-hero { padding-top: clamp(3rem, 8vw, 5.5rem); padding-bottom: clamp(2.5rem, 6vw, 4rem); }

.skrp-hero.is-centered { max-width: 780px; text-align: center; }
.skrp-hero.is-centered .skrp-hero__lede { margin-left: auto; margin-right: auto; }
.skrp-hero.is-centered .skrp-hero__zip { margin-left: auto; margin-right: auto; }

.skrp-hero.has-image {
	display: grid;
	gap: clamp(2rem, 5vw, 3.5rem);
	align-items: center;
}

@media (min-width: 880px) {
	.skrp-hero.has-image { grid-template-columns: 1.05fr .95fr; }
}

.skrp-hero__eyebrow {
	margin: 0 0 .9rem;
	font-size: .72rem;
	font-weight: 700;
	letter-spacing: .16em;
	text-transform: uppercase;
	color: var(--skrp-primary);
}

.skrp-hero__title {
	margin: 0 0 1rem;
	font-size: clamp(2.1rem, 5.6vw, 3.6rem);
	font-weight: 800;
	line-height: 1.04;
	letter-spacing: -.03em;
}

.skrp-hero__lede {
	margin: 0 0 1.75rem;
	max-width: 32em;
	font-size: clamp(1.02rem, 2vw, 1.2rem);
	line-height: 1.55;
	color: var(--skrp-body);
}

.skrp-hero__zip { max-width: 26rem; }

.skrp-hero__img { display: block; width: 100%; border-radius: var(--skrp-radius); }

/* --------------------------------------------------------------------------
   Plans
   -------------------------------------------------------------------------- */

.skrp-plans { padding-top: clamp(2rem, 5vw, 3rem); padding-bottom: clamp(2.5rem, 6vw, 4rem); }

.skrp-plans__grid { display: grid; grid-template-columns: 1fr; gap: 1.25rem; }

/* A lone plan should not stretch the width of the screen. */
.skrp-plans__grid.skrp-cols-1 { max-width: 460px; }

@media (min-width: 760px) {
	.skrp-plans__grid.skrp-cols-2 { grid-template-columns: repeat(2, 1fr); max-width: 800px; }
	.skrp-plans__grid.skrp-cols-3 { grid-template-columns: repeat(3, 1fr); }
}

.skrp-plan {
	position: relative;
	display: flex;
	flex-direction: column;
	padding: 1.75rem;
	background: #fff;
	border: 1px solid var(--skrp-line);
	border-radius: var(--skrp-radius);
	box-shadow: 0 1px 2px rgba(16, 32, 46, .04);
}

.skrp-plan.is-featured {
	border-color: var(--skrp-primary);
	box-shadow: 0 0 0 1px var(--skrp-primary), 0 12px 32px rgba(0, 160, 255, .14);
}

.skrp-plan__badge {
	position: absolute;
	top: -.72rem;
	left: 1.75rem;
	margin: 0;
	padding: .3em .8em;
	background: var(--skrp-accent);
	border-radius: 100px;
	color: #fff;
	font-size: .67rem;
	font-weight: 700;
	letter-spacing: .1em;
	text-transform: uppercase;
	line-height: 1.5;
}

.skrp-plan__name {
	margin: 0 0 1.1rem;
	font-size: 1.3rem;
	font-weight: 700;
	line-height: 1.25;
}

.skrp-plan__pricing {
	margin: 0 0 1.4rem;
	padding-bottom: 1.4rem;
	border-bottom: 1px solid var(--skrp-line);
}

.skrp-plan__price {
	display: flex;
	align-items: baseline;
	flex-wrap: wrap;
	gap: .35rem;
	margin: 0;
	font-size: clamp(2.6rem, 6vw, 3.2rem);
	font-weight: 800;
	line-height: 1;
	letter-spacing: -.04em;
	font-variant-numeric: tabular-nums;
	color: var(--skrp-ink);
}

.skrp-plan__suffix {
	font-size: .78rem;
	font-weight: 600;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var(--skrp-body);
}

.skrp-plan__was { margin: .6rem 0 0; font-size: .85rem; color: var(--skrp-body); }
.skrp-plan__was s { opacity: .75; }

.skrp-plan__features { flex: 1 0 auto; margin: 0 0 1.75rem; padding: 0; list-style: none; font-size: .95rem; }

.skrp-plan__features li {
	position: relative;
	margin: 0 0 .7rem;
	padding-left: 1.75rem;
	color: var(--skrp-body);
	line-height: 1.5;
}

/* A tick reads as an included feature. A dash read as a stray mark. */
.skrp-plan__features li::before {
	content: "";
	position: absolute;
	left: 0;
	top: .28em;
	width: 1.15em;
	height: 1.15em;
	border-radius: 50%;
	background: rgba(0, 160, 255, .12) center / .62em .62em no-repeat;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%2300A0FF' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2.5 8.6l3.6 3.6L13.5 4.8'/%3E%3C/svg%3E");
}

.skrp-canvas .skrp-plan__cta {
	display: block;
	margin-top: auto;
	padding: 1em 1.4rem;
	background: var(--skrp-primary);
	border: 0;
	border-radius: var(--skrp-radius);
	color: #fff;
	font-size: 1rem;
	font-weight: 700;
	text-align: center;
	text-decoration: none;
	transition: background .16s ease, transform .16s ease;
}

.skrp-canvas .skrp-plan__cta:hover,
.skrp-canvas .skrp-plan__cta:focus-visible {
	background: var(--skrp-accent);
	color: #fff;
	text-decoration: none;
	transform: translateY(-1px);
}

.skrp-canvas .skrp-plan__cta:focus-visible { outline: 3px solid var(--skrp-ink); outline-offset: 2px; }

/* --------------------------------------------------------------------------
   Trust strip
   -------------------------------------------------------------------------- */

.skrp-trust { padding-top: 1rem; padding-bottom: clamp(2rem, 5vw, 3rem); }

.skrp-trust__list {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: clamp(1.5rem, 4vw, 3rem);
	margin: 0;
	padding: 1.5rem;
	background: var(--skrp-wash);
	border-radius: var(--skrp-radius);
	list-style: none;
}

.skrp-trust__item { margin: 0; line-height: 0; }

.skrp-canvas .skrp-trust__img {
	display: block;
	width: auto;
	max-height: 52px;
	max-width: 190px;
	object-fit: contain;
}

/* --------------------------------------------------------------------------
   Prose and FAQs
   -------------------------------------------------------------------------- */

.skrp-prose { max-width: 44em; padding-bottom: clamp(2rem, 5vw, 3rem); color: var(--skrp-body); }
.skrp-prose h2, .skrp-prose h3 { color: var(--skrp-ink); }

.skrp-faqs { padding-top: clamp(1.5rem, 4vw, 2.5rem); padding-bottom: clamp(3rem, 7vw, 4.5rem); }
.skrp-faqs__list { max-width: 46em; border-top: 1px solid var(--skrp-line); }

.skrp-faq { border-bottom: 1px solid var(--skrp-line); }

.skrp-faq__q {
	display: flex;
	align-items: flex-start;
	gap: .8rem;
	padding: 1.15rem 0;
	font-size: 1.03rem;
	font-weight: 600;
	line-height: 1.45;
	color: var(--skrp-ink);
	cursor: pointer;
	list-style: none;
}

.skrp-faq__q::-webkit-details-marker { display: none; }

.skrp-faq__q::before {
	content: "";
	flex: none;
	width: 1.35em;
	height: 1.35em;
	margin-top: .05em;
	border-radius: 50%;
	background: rgba(0, 160, 255, .12) center / .6em .6em no-repeat;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%2300A0FF' stroke-width='2.6' stroke-linecap='round'%3E%3Cpath d='M8 3v10M3 8h10'/%3E%3C/svg%3E");
	transition: transform .18s ease;
}

.skrp-faq[open] .skrp-faq__q::before {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23FD7F22' stroke-width='2.6' stroke-linecap='round'%3E%3Cpath d='M3 8h10'/%3E%3C/svg%3E");
	background-color: rgba(253, 127, 34, .14);
	transform: rotate(180deg);
}

.skrp-faq__a { padding: 0 0 1.25rem 2.15rem; font-size: .96rem; color: var(--skrp-body); }
.skrp-faq__a p { margin: 0 0 .8rem; }
.skrp-faq__a p:last-child { margin-bottom: 0; }

/* --------------------------------------------------------------------------
   Footer
   -------------------------------------------------------------------------- */

.skrp-foot { flex: none; border-top: 1px solid var(--skrp-line); background: var(--skrp-wash); }

.skrp-foot__inner { padding-top: 2rem; padding-bottom: 2rem; }

.skrp-foot__legal { max-width: 46em; font-size: .82rem; line-height: 1.65; color: var(--skrp-body); }
.skrp-foot__legal p { margin: 0 0 .6rem; }

.skrp-foot__meta { margin: 1rem 0 0; font-size: .82rem; color: var(--skrp-body); }
.skrp-canvas .skrp-foot__meta a { color: var(--skrp-primary); text-decoration: none; }

@media (prefers-reduced-motion: reduce) {
	.skrp-canvas .skrp-plan__cta,
	.skrp-faq__q::before { transition: none; }
	.skrp-canvas .skrp-plan__cta:hover { transform: none; }
}