/**
 * Sticky QR - pricing panels.
 */

.sqr-price__grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: 16px;
	align-items: start;
}

@media (min-width: 860px) {
	.sqr-price__grid {
		grid-template-columns: repeat(3, minmax(0, 1fr));
		gap: 20px;
	}
}

.sqr-price__card {
	position: relative;
	display: flex;
	flex-direction: column;
	padding: 26px 22px 24px;
	border: 1px solid var(--sqr-line);
	border-radius: 16px;
	background: var(--sqr-surface);
	box-shadow: var(--sqr-shadow);
}

/* The recommended tier is lifted rather than shouted about. */
.sqr-price__card.is-featured {
	border-color: var(--sqr-brand);
	border-width: 2px;
	box-shadow: 0 12px 34px color-mix(in srgb, var(--sqr-brand) 20%, transparent);
}

@media (min-width: 860px) {
	.sqr-price__card.is-featured {
		transform: translateY(-10px);
	}
}

.sqr-price__badge {
	position: absolute;
	top: -12px;
	left: 50%;
	transform: translateX(-50%);
	padding: 5px 14px;
	border-radius: 999px;
	background: var(--sqr-brand);
	color: #fff;
	font-size: 11.5px;
	font-weight: 800;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	white-space: nowrap;
}

.sqr-price__name {
	margin: 0 0 6px;
	font-size: 20px;
	font-weight: 800;
}

.sqr-price__for {
	margin: 0 0 18px;
	font-size: 13.5px;
	line-height: 1.5;
	color: var(--sqr-muted);
	min-height: 40px;
}

.sqr-price__cost {
	margin: 0;
	display: flex;
	align-items: baseline;
	gap: 8px;
	flex-wrap: wrap;
}

.sqr-price__amount {
	font-size: 34px;
	font-weight: 800;
	letter-spacing: -0.03em;
	line-height: 1;
}

.sqr-price__amount .woocommerce-Price-amount {
	font-size: inherit;
	font-weight: inherit;
}

.sqr-price__per {
	font-size: 14px;
	color: var(--sqr-muted);
}

.sqr-price__equiv {
	margin: 6px 0 0;
	font-size: 12.5px;
	color: var(--sqr-muted);
}

.sqr-price__equiv .woocommerce-Price-amount {
	font-size: inherit;
}

.sqr-price__specs {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 8px;
	margin: 20px 0;
	padding: 14px 0;
	list-style: none;
	border-top: 1px solid var(--sqr-line);
	border-bottom: 1px solid var(--sqr-line);
	text-align: center;
}

.sqr-price__specs li {
	display: grid;
	gap: 2px;
	margin: 0;
}

.sqr-price__specs strong {
	font-size: 15px;
	line-height: 1.2;
}

.sqr-price__specs span {
	font-size: 11.5px;
	color: var(--sqr-muted);
	line-height: 1.25;
}

.sqr-price__cta {
	width: 100%;
	justify-content: center;
	margin-bottom: 18px;
}

.sqr-price__list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: 9px;
}

.sqr-price__list li {
	position: relative;
	padding-left: 26px;
	font-size: 13.5px;
	line-height: 1.5;
	margin: 0;
}

.sqr-price__list li.yes::before {
	content: "";
	position: absolute;
	left: 6px;
	top: 4px;
	width: 6px;
	height: 11px;
	border: solid var(--sqr-brand);
	border-width: 0 2px 2px 0;
	transform: rotate(42deg);
}

.sqr-price__list li.no {
	color: var(--sqr-muted);
}

.sqr-price__list li.no::before {
	content: "×";
	position: absolute;
	left: 5px;
	top: -1px;
	font-size: 16px;
	color: #cbd5e1;
}

/* --------------------------------------------------------------- Free row */

.sqr-price__free {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 20px;
	flex-wrap: wrap;
	margin-top: 26px;
	padding: 20px 24px;
	border: 1px dashed var(--sqr-line);
	border-radius: 16px;
	background: var(--sqr-surface);
}

.sqr-price__free strong {
	display: block;
	font-size: 16px;
	margin-bottom: 4px;
}

.sqr-price__free p {
	margin: 0;
	max-width: 68ch;
	font-size: 13.5px;
	color: var(--sqr-muted);
	line-height: 1.55;
}

/* ------------------------------------------------------------------ Notes */

.sqr-price__notes {
	margin-top: 30px;
	padding: 22px 24px;
	border-radius: 16px;
	background: var(--sqr-sunken);
	border: 1px solid var(--sqr-line);
}

.sqr-price__notes h3 {
	margin: 0 0 10px;
	font-size: 16px;
	font-weight: 800;
}

.sqr-price__notes p {
	margin: 0 0 10px;
	font-size: 14px;
	line-height: 1.6;
	color: var(--sqr-muted);
	max-width: 52rem;
}

.sqr-price__notes p:last-child {
	margin-bottom: 0;
}

/* --------------------------------------------------- Landing page content
 *
 * Light typography for the SEO copy that sits around the builders. Scoped to
 * the entry content so it cannot leak into the app interfaces.
 */

.sqr-has-builder .entry-content > p,
.sqr-has-builder .entry-content > ul,
.sqr-has-builder .entry-content > ol,
.sqr-has-builder .entry-content > h2,
.sqr-has-builder .entry-content > h3 {
	padding-left: 16px;
	padding-right: 16px;
}

.sqr-has-builder .entry-content > h2 {
	margin-top: 44px;
	margin-bottom: 12px;
	font-size: clamp(1.25rem, 3vw, 1.6rem);
	font-weight: 800;
	letter-spacing: -0.015em;
}

.sqr-has-builder .entry-content > h3 {
	margin-top: 26px;
	margin-bottom: 8px;
	font-size: 1.05rem;
	font-weight: 700;
}

.sqr-has-builder .entry-content > p,
.sqr-has-builder .entry-content > ul,
.sqr-has-builder .entry-content > ol {
	line-height: 1.65;
	margin-bottom: 14px;
}

.sqr-has-builder .entry-content > ul,
.sqr-has-builder .entry-content > ol {
	padding-left: 38px;
}

.sqr-has-builder .entry-content > ul li,
.sqr-has-builder .entry-content > ol li {
	margin-bottom: 8px;
}

/* The opening paragraph carries the page, so it gets a size of its own. */
.sqr-has-builder .entry-content > p.sqr-lead {
	font-size: clamp(1.02rem, 2.2vw, 1.15rem);
	line-height: 1.6;
	color: #475569;
	margin-top: 26px;
	margin-bottom: 26px;
}

/* ------------------------------------------------------------------- FAQ
 *
 * Native <details> elements: no JavaScript, keyboard accessible, and
 * findable by in-page search even while closed.
 */

.sqr-faq {
	max-width: 52rem;
	margin: 44px 0 0 max(16px, calc(50vw - 590px));
	padding: 0 16px;
}

.sqr-faq__h {
	margin: 0 0 16px;
	font-size: clamp(1.25rem, 3vw, 1.6rem);
	font-weight: 800;
	letter-spacing: -0.015em;
}

.sqr-faq__list {
	display: grid;
	gap: 10px;
}

.sqr-faq__item {
	border: 1px solid #e2e8f0;
	border-radius: 12px;
	background: #fff;
	overflow: hidden;
	transition: border-color 140ms ease, box-shadow 140ms ease;
}

.sqr-faq__item[open] {
	border-color: color-mix(in srgb, var(--sqr-brand, #0f766e) 45%, #e2e8f0);
	box-shadow: 0 1px 2px rgba(15, 23, 42, .04), 0 8px 24px rgba(15, 23, 42, .06);
}

.sqr-faq__item summary {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 14px;
	padding: 16px 20px;
	cursor: pointer;
	font-size: 15.5px;
	font-weight: 700;
	line-height: 1.4;
	list-style: none;
}

/* Safari draws its own marker unless told otherwise. */
.sqr-faq__item summary::-webkit-details-marker {
	display: none;
}

.sqr-faq__item summary::after {
	content: "";
	flex: 0 0 auto;
	width: 9px;
	height: 9px;
	border: solid #64748b;
	border-width: 0 2px 2px 0;
	transform: rotate(45deg) translate(-2px, -2px);
	transition: transform 200ms ease;
}

.sqr-faq__item[open] summary::after {
	transform: rotate(-135deg) translate(-3px, -3px);
	border-color: var(--sqr-brand, #0f766e);
}

.sqr-faq__item summary:hover {
	background: #f8fafc;
}

.sqr-faq__a {
	padding: 0 20px 18px;
	line-height: 1.65;
}

.sqr-faq__a p {
	margin: 0 0 12px;
}

.sqr-faq__a p:last-child {
	margin-bottom: 0;
}

/* Content padding must apply on every plugin page, not only ones holding a
   builder, or the pricing and article pages sit flush against the edge. */
.sqr-page .entry-content > p,
.sqr-page .entry-content > ul,
.sqr-page .entry-content > ol,
.sqr-page .entry-content > h2,
.sqr-page .entry-content > h3 {
	padding-left: 16px;
	padding-right: 16px;
}

.sqr-page .entry-content > h2 {
	margin-top: 44px;
	margin-bottom: 12px;
	font-size: clamp(1.25rem, 3vw, 1.6rem);
	font-weight: 800;
	letter-spacing: -0.015em;
}

.sqr-page .entry-content > h3 {
	margin-top: 26px;
	margin-bottom: 8px;
	font-size: 1.05rem;
	font-weight: 700;
}

.sqr-page .entry-content > p,
.sqr-page .entry-content > ul,
.sqr-page .entry-content > ol {
	line-height: 1.65;
	margin-bottom: 14px;
}

.sqr-page .entry-content > ul,
.sqr-page .entry-content > ol {
	padding-left: 38px;
}

.sqr-page .entry-content > p.sqr-lead {
	font-size: clamp(1.02rem, 2.2vw, 1.15rem);
	line-height: 1.6;
	color: #475569;
	margin-top: 26px;
	margin-bottom: 26px;
}

/* The theme's own page title sits outside our container. It has to share the
   copy's measure, or its left edge lands somewhere else entirely and the page
   reads as two documents stacked on top of each other. */
.sqr-page .entry-header,
.sqr-has-builder .entry-header {
	max-width: 1180px;
	margin-left: auto;
	margin-right: auto;
	padding-left: 16px;
	padding-right: 16px;
}

.sqr-page .entry-title,
.sqr-has-builder .entry-title {
	max-width: none;
	margin-left: 0;
	margin-right: 0;
}

/* Breadcrumbs too, so the whole page hangs off one line. */
.sqr-page .storefront-breadcrumb .col-full,
.sqr-has-builder .storefront-breadcrumb .col-full,
.sqr-page .woocommerce-breadcrumb,
.sqr-has-builder .woocommerce-breadcrumb {
	max-width: 52rem;
	margin-left: auto;
	margin-right: auto;
	padding-left: 16px;
	padding-right: 16px;
}

/* One left edge for the whole page.
 *
 * The full width sections (hero, steps, builder, pricing) sit in a 1180px
 * container. Centring the prose in its own narrower column put it on a
 * different left edge, which is what made the page look like two documents.
 * Instead the prose keeps a readable measure but hangs off the same left
 * edge as everything else. */
.sqr-page .entry-content > *,
.sqr-has-builder .entry-content > * {
	max-width: 52rem;
	margin-left: max(16px, calc(50vw - 590px));
	margin-right: auto;
}

/* Except the full-bleed sections, which manage their own width and must not
   inherit the prose indent. */
.sqr-page .entry-content > .sqr-builder,
.sqr-page .entry-content > .sqr-home,
.sqr-page .entry-content > .sqr-price,
.sqr-has-builder .entry-content > .sqr-builder,
.sqr-has-builder .entry-content > .sqr-home,
.sqr-has-builder .entry-content > .sqr-price {
	max-width: none;
	margin-left: 0;
	margin-right: 0;
}