/*
Theme Name: SipScout
Theme URI: https://sipscout.app
Author: SipScout
Description: SipScout — Dallas' happy hour app. A Twenty Twenty-Five child theme that carries the SipScout design system (House Blue + Coral, Fraunces + DM Sans) via theme.json. Built for the block editor; no page builder.
Template: twentytwentyfive
Version: 0.4.1
Requires at least: 6.7
Tested up to: 7.0
Requires PHP: 7.4
Text Domain: sipscout
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
*/

/*
 * Almost all styling lives in theme.json (the design system as code).
 * Use this file only for the rare rule that theme.json can't express.
 */

/* One-click "section" colour bands (registered in functions.php).
   Editors apply these from the Group block's Styles panel. */
.wp-block-group.is-style-section-navy {
	background-color: var(--wp--preset--color--house-blue);
	color: var(--wp--preset--color--champagne);
}
.wp-block-group.is-style-section-panel {
	background-color: var(--wp--preset--color--navy-panel);
	color: var(--wp--preset--color--champagne);
}
.wp-block-group.is-style-section-coral {
	background-color: var(--wp--preset--color--coral);
	color: var(--wp--preset--color--house-blue);
}
.wp-block-group.is-style-section-champagne {
	background-color: var(--wp--preset--color--champagne);
	color: var(--wp--preset--color--house-blue);
}

/* On light sections, headings and links invert to navy for contrast. */
.is-style-section-coral :where(h1, h2, h3, h4),
.is-style-section-champagne :where(h1, h2, h3, h4) {
	color: var(--wp--preset--color--house-blue);
}

/* In-page anchors (#how, #pricing on For Venues) glide instead of jumping. */
html {
	scroll-behavior: smooth;
}

/* The root flow layout adds a block-gap margin above <main> and <footer>; the
   header/sections/footer are all full-bleed bands that must sit flush. */
.wp-site-blocks > main,
.wp-site-blocks > footer {
	margin-block-start: 0;
}

/* Section-built pages (home + the no-title landing pages) are self-padded
   full-width bands — no block gap between them. Scoped by template so prose
   pages (privacy policy, terms) keep their normal paragraph rhythm. */
.home .wp-block-post-content > *,
.page-template-page-no-title .wp-block-post-content > * {
	margin-block-start: 0;
	margin-block-end: 0;
}

/* ---- Header / sticky nav ---- */
/* Sticky lives on the template-part WRAPPER, not .sipscout-header: a sticky box
   can only travel within its parent, and the <header> wrapper is exactly
   nav-height, so the inner group had zero room and scrolled away with the page.
   The wrapper's parent is .wp-site-blocks (the whole page), giving it the full
   scroll range. top offsets by the admin-bar height when logged in. */
.wp-site-blocks > header {
	position: sticky;
	top: var(--wp-admin--admin-bar--height, 0px);
	z-index: 50;
}
.sipscout-header {
	position: relative; /* anchors the ::before frosted-glass layer */
	border-bottom: 1px solid rgba(247, 231, 206, 0.1);
}
/* The frosted-glass background lives on a pseudo-element, NOT on the header
   itself. backdrop-filter (like transform/filter) makes an element a containing
   block for position:fixed descendants — putting it on .sipscout-header would
   trap the mobile nav's full-screen overlay inside the header strip instead of
   the viewport. Keeping it on ::before preserves the blur without that side effect. */
.sipscout-header::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	pointer-events: none;
	background: rgba(30, 48, 93, 0.92);
	backdrop-filter: blur(12px);
	-webkit-backdrop-filter: blur(12px);
}
/* Switch to the hamburger overlay all the way up to tablet-portrait width, not just
   at the Navigation block's default 600px. Between 600–900px the full horizontal
   header (logo + 4 links + "Become a Partner") can't fit on one row and wraps to two
   (e.g. iPad portrait at 768px). Re-assert the overlay across that range by overriding
   the two core rules with a higher-specificity `.sipscout-header` selector. The desktop
   nav returns at ≥900px; the open overlay (.is-menu-open) is untouched, so it still works. */
@media (min-width: 600px) and (max-width: 899.98px) {
	.sipscout-header .wp-block-navigation__responsive-container-open:not(.always-shown) {
		display: flex;
	}
	.sipscout-header .wp-block-navigation__responsive-container:not(.hidden-by-default):not(.is-menu-open) {
		display: none;
	}
}

/* Logo is a single flat coral badge image (baked to the design's ~82% emblem ratio),
   so there is no CSS circle to mis-size. The old coral-circle-behind-emblem rendered
   as a pink blob at header size; the badge is now one clean, self-contained image. */
.sipscout-emblem .custom-logo-link,
.sipscout-emblem img {
	display: block;
	background: transparent;
	border-radius: 0;
}
.sipscout-wordmark a,
.sipscout-footer .wp-block-site-title a {
	color: var(--wp--preset--color--champagne);
	text-decoration: none;
}
.sipscout-wordmark,
.sipscout-wordmark a {
	white-space: nowrap;
	line-height: 1;
}
.sipscout-header .wp-block-navigation a {
	color: var(--wp--preset--color--champagne);
	text-decoration: none;
}
.sipscout-header .wp-block-navigation a:hover {
	color: var(--wp--preset--color--coral);
}

/* Hamburger icon — the block's default is a 2-bar "handle"; the design uses 3 bars.
   Hide the default SVG and paint three evenly-spaced lines so we control weight/gap. */
.sipscout-header .wp-block-navigation__responsive-container-open svg {
	display: none;
}
.sipscout-header .wp-block-navigation__responsive-container-open {
	width: 26px;
	height: 18px;
}
.sipscout-header .wp-block-navigation__responsive-container-open::before {
	content: "";
	position: absolute;
	inset: 0;
	background:
		linear-gradient(currentColor 0 0) left top,
		linear-gradient(currentColor 0 0) left center,
		linear-gradient(currentColor 0 0) left bottom;
	background-size: 100% 2px;
	background-repeat: no-repeat;
}

/* "Become a Partner" CTA — lives inside the nav so it appears inline on desktop AND
   rides into the off-canvas overlay on mobile. Champagne pill, navy text. */
.sipscout-header .wp-block-navigation .sipscout-nav-cta a {
	background: var(--wp--preset--color--champagne);
	color: var(--wp--preset--color--house-blue);
	border-radius: 999px;
	padding: 10px 22px;
	font-weight: 600;
}
.sipscout-header .wp-block-navigation .sipscout-nav-cta a:hover {
	background: #fbf1dc;
	color: var(--wp--preset--color--house-blue);
}

/* Open off-canvas overlay — match the Style Guide: large Fraunces links, generous
   spacing, coral on hover. The CTA keeps its pill (DM Sans) and sits below the links. */
.sipscout-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container {
	gap: 6px;
}
.sipscout-header .wp-block-navigation__responsive-container.is-menu-open a {
	font-family: var(--wp--preset--font-family--fraunces);
	font-size: 30px;
	font-weight: 500;
	line-height: 1.25;
}
.sipscout-header .wp-block-navigation__responsive-container.is-menu-open .sipscout-nav-cta {
	margin-top: 20px;
}
.sipscout-header .wp-block-navigation__responsive-container.is-menu-open .sipscout-nav-cta a {
	font-family: var(--wp--preset--font-family--dm-sans);
	font-size: 17px;
	display: inline-block;
	/* Re-assert the pill padding: inside the open overlay, core forces
	   .wp-block-navigation-item__content { padding: 0 } at higher specificity than the
	   base .sipscout-nav-cta rule, which is what flattened the pill. This selector
	   (is-menu-open + .sipscout-nav-cta) outspecifies it. */
	padding: 12px 26px;
}

/* Keep the REAL header logo + title visible in their exact position when the overlay
   opens — no duplicate element. The open overlay is z-index:100000 and paints over the
   header; lifting the brand group above it lets the same logo + "SipScout" show through
   right where they already sit (matches the design's open-menu logo). */
.sipscout-header .sipscout-brand {
	position: relative;
	z-index: 100001;
}

/* Active-page highlight — the current page's nav link turns coral (the Style Guide shows
   "About" highlighted). Works in both the inline desktop nav and the overlay; the CTA
   pill is excluded so it keeps its champagne styling. */
.sipscout-header .wp-block-navigation li:not(.sipscout-nav-cta) > a[aria-current="page"],
.sipscout-header .wp-block-navigation li.current-menu-item:not(.sipscout-nav-cta) > a {
	color: var(--wp--preset--color--coral);
}

/* Nav links vs. actions — "For Scouters…About" live in a nested .sipscout-nav-links
   group inside the Navigation block (Menu, wp_navigation post 175), followed by Login
   and the Become a Partner pill as plain siblings. Growing that group to fill the nav's
   leftover width and centering its own contents puts the links in the middle of the
   space between the logo and the Login/CTA pair — not the middle of the header itself,
   since the logo (~162px) and the Login/CTA pair (~236px) aren't the same width. The
   translateX nudge below corrects for that gap; measured empirically on the live site
   and stable across viewport widths (900px+) since it's driven by content width, not
   available space. Re-measure and adjust if the logo, "Login", or "Become a Partner"
   copy changes meaningfully. Scoped to .is-content-justification-center (the class the
   block editor's justify toolbar writes) so switching that group to left/right-aligned
   in the editor drops the nudge automatically instead of leaving it mis-shifted.
   Desktop only — below the hamburger breakpoint the nav collapses to a toggle button and
   none of this should apply. */
@media (min-width: 900px) {
	.sipscout-header .wp-block-group.is-content-justification-space-between > .wp-block-group:last-child {
		flex: 1 1 auto;
	}
	.sipscout-header .wp-block-navigation,
	.sipscout-header .wp-block-navigation__container {
		width: 100%;
	}
	.sipscout-header .wp-block-navigation .sipscout-nav-links {
		flex: 1 1 auto;
	}
	.sipscout-header .wp-block-navigation .sipscout-nav-links.is-content-justification-center {
		transform: translateX(35px);
	}
}
.sipscout-header .wp-block-navigation .sipscout-nav-login a {
	font-weight: 500;
}
@media (max-width: 899.98px) {
	.sipscout-header .sipscout-nav-links {
		flex-direction: column;
		align-items: flex-start;
		width: 100%;
		gap: 6px;
	}
}

/* ---- Footer ---- */
.sipscout-footer-links {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 12px;
	font-size: var(--wp--preset--font-size--small);
}
.sipscout-footer-links a {
	color: var(--wp--preset--color--champagne);
	text-decoration: none;
}
.sipscout-footer-links a:hover {
	color: var(--wp--preset--color--coral);
}

/* Eyebrow label — uppercase coral kicker used above headings. */
.sipscout-eyebrow {
	color: var(--wp--preset--color--coral);
	font-weight: 600;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	font-size: var(--wp--preset--font-size--small);
}
.is-style-section-coral .sipscout-eyebrow,
.is-style-section-champagne .sipscout-eyebrow {
	color: var(--wp--preset--color--house-blue);
}

/* ---- Stats bar ---- */
/* Numbers are single tokens (2,000+, LAUNCH, …) — keep them on one line, never break. */
.stats-bar h3 {
	white-space: nowrap;
}
/* 2×2 grid below 900px (per the mobile design); 4-across above. */
@media (max-width: 899.98px) {
	.stats-bar .wp-block-columns {
		display: grid;
		grid-template-columns: 1fr 1fr;
		gap: var(--wp--preset--spacing--50) var(--wp--preset--spacing--40);
	}
	/* Odd stat count (e.g. 3): centre the last one under the pair instead of
	   leaving it orphaned in the left cell. */
	.stats-bar .wp-block-columns > .wp-block-column:last-child:nth-child(odd) {
		grid-column: 1 / -1;
	}
}

/* Hero CTAs stack full-width on phones only (per the mobile designs), instead of the
   centered side-by-side row used on tablet/desktop. */
@media (max-width: 600px) {
	.wp-block-cover .wp-block-buttons,
	.sipscout-venues-hero .wp-block-buttons {
		flex-direction: column;
		align-items: stretch;
	}
	.wp-block-cover .wp-block-buttons .wp-block-button__link,
	.sipscout-venues-hero .wp-block-buttons .wp-block-button__link {
		display: block;
		text-align: center;
	}
}

/* ---- App feature ---- */
/* Mobile-first single column; document order is intro → phones → features, which is
   exactly the mobile design's order. On desktop the phones move to a right column that
   spans both text rows (via grid-template-areas). */
.sipscout-app-grid {
	display: grid;
	gap: 18px; /* the mobile design stacks this section at an 18px rhythm */
}
/* The group is a flow layout, so core still stamps 32px block-gap margins on the
   children; the grid's own gap is the only spacing we want between them. */
.sipscout-app-grid > * {
	margin-block-start: 0;
}
.sipscout-app .app-media {
	gap: 8px;
	margin: 8px 0 4px;
}
.sipscout-app .app-phone {
	margin: 0;
}
/* Single upright phone at mobile sizes; the tilted pair arrives at ≥600px. */
.sipscout-app .app-phone img {
	width: 220px;
	height: auto;
	filter: drop-shadow(0 22px 40px rgba(8, 14, 32, 0.5));
}
/* Feature list — coral markers, bold champagne lead-ins. */
.sipscout-app .app-bullets {
	list-style: disc;
	padding-left: 1.2em;
	display: flex;
	flex-direction: column;
	gap: 12px;
}
.sipscout-app .app-bullets li::marker {
	color: var(--wp--preset--color--coral);
}
.sipscout-app .app-bullets strong {
	color: var(--wp--preset--color--champagne);
}
/* Store badges — matched height; 20px block gap + 8px = the design's 28px from bullets.
   .app-badge / .app-linktree are deliberately unscoped: the page hero and download
   CTA reuse the same badge pair and linktree line. */
.sipscout-app .app-badges {
	gap: 12px;
	margin-top: 8px;
}
.app-badge img {
	height: 50px;
	width: auto;
}
.app-linktree a {
	color: var(--wp--preset--color--coral);
}
/* ≥600px: both phones at 246px — deals leans left and up, map leans right and down. */
@media (min-width: 600px) {
	.sipscout-app .app-phone img {
		width: 246px;
		filter: drop-shadow(0 28px 44px rgba(8, 14, 32, 0.5));
	}
	.sipscout-app .app-media .app-phone:first-child img {
		transform: rotate(-3deg) translateY(-16px);
	}
	.sipscout-app .app-media .app-phone:last-child img {
		transform: rotate(3deg) translateY(16px);
	}
	.app-badge img {
		height: 52px;
	}
}
/* Desktop: two columns, phones on the right spanning both text rows. The 20px row gap
   makes intro + features read as the design's single text column. */
@media (min-width: 900px) {
	.sipscout-app-grid {
		grid-template-columns: 1fr 1fr;
		/* Row 1 hugs the intro so the bullets sit 20px below the lead paragraph —
		   otherwise the 560px phone column (spanning both rows) inflates row 1. */
		grid-template-rows: auto 1fr;
		grid-template-areas:
			"intro   media"
			"features media";
		column-gap: var(--wp--preset--spacing--50);
		row-gap: var(--wp--preset--spacing--30);
		align-items: start;
	}
	.sipscout-app-grid .app-intro { grid-area: intro; }
	.sipscout-app-grid .app-media {
		grid-area: media;
		align-self: center;
		align-items: center;
		min-height: 560px;
	}
	.sipscout-app-grid .app-features { grid-area: features; }
}
/* Phones: the mobile design shows a single device, stacked badges, and 64px section
   padding. The pattern sets its padding inline via the Section token, so the token is
   re-scoped here rather than fighting the inline style. */
@media (max-width: 599.98px) {
	.sipscout-app {
		--wp--preset--spacing--70: 64px;
	}
	.sipscout-app .app-media .app-phone:nth-of-type(2) {
		display: none;
	}
	.sipscout-app .app-badges,
	.sipscout-page-hero .app-badges {
		flex-direction: column;
		align-items: flex-start;
	}
}

/* ---- How it works ---- */
/* Card interior is a grid so the pieces can rearrange responsively: desktop shows
   number ∘ STEP label / title / body; mobile shows number ∘ title / body. */
.hiw-row {
	display: flex;
	flex-direction: column;
	gap: 16px;
	margin-top: var(--wp--preset--spacing--30);
}
.hiw-row > * {
	margin: 0;
}
.hiw-card {
	display: grid;
	grid-template-columns: auto 1fr;
	grid-template-areas:
		"num  title"
		"body body";
	align-items: center;
	gap: 12px 14px;
	flex: 1;
	border: 1px solid rgba(247, 231, 206, 0.12);
	border-radius: 18px;
	padding: 24px;
}
.hiw-card > * {
	margin: 0;
}
.hiw-num {
	grid-area: num;
	width: 46px;
	height: 46px;
	border-radius: 50%;
	background: var(--wp--preset--color--coral);
	color: var(--wp--preset--color--house-blue);
	font-family: var(--wp--preset--font-family--fraunces);
	font-size: 23px;
	display: flex;
	align-items: center;
	justify-content: center;
}
.hiw-label {
	display: none;
	grid-area: label;
	color: var(--wp--preset--color--muted-slate);
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.14em;
	text-transform: uppercase;
}
.hiw-title {
	grid-area: title;
	font-size: 22px;
	line-height: 1.1;
}
.hiw-body {
	grid-area: body;
	font-size: 16px;
	line-height: 1.6;
}
.hiw-arrow {
	display: none;
	align-self: center;
	font-size: 26px;
	opacity: 0.7;
}
@media (min-width: 900px) {
	.hiw-row {
		flex-direction: row;
		align-items: stretch;
		gap: 20px;
	}
	.hiw-arrow {
		display: block;
	}
	.hiw-label {
		display: block;
	}
	.hiw-card {
		grid-template-areas:
			"num   label"
			"title title"
			"body  body";
		align-content: start;
		gap: 16px 14px;
		border-radius: 20px;
		padding: 34px 30px;
	}
	.hiw-num {
		width: 54px;
		height: 54px;
		font-size: 27px;
	}
	.hiw-title {
		font-size: 26px;
	}
}

/* ---- Venue teaser ---- */
.sipscout-venue .venue-copy {
	opacity: 0.82; /* the design's rgba(30,48,93,0.82) body copy */
}

/* ---- Blog grid ---- */
.sipscout-blog .blog-head {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	gap: 24px;
}
.sipscout-blog .blog-head > * {
	margin: 0;
}
.sipscout-blog .all-posts-link a {
	color: var(--wp--preset--color--coral);
	text-decoration: none;
}
.sipscout-blog .all-posts-link a:hover {
	color: var(--wp--preset--color--champagne);
}
.sipscout-blog .wp-block-post-template {
	gap: 40px;
}
.sipscout-blog .wp-block-post-template > li {
	display: flex;
	flex-direction: column;
	gap: 10px;
}
.sipscout-blog .wp-block-post-template > li > * {
	margin: 0;
}
/* Design crops card photos to 3:2 landscape; the block's aspectRatio attribute
   doesn't survive with portrait sources, so enforce it here. */
.sipscout-blog .wp-block-post-featured-image,
.sipscout-blog .wp-block-post-featured-image a,
.sipscout-blog .wp-block-post-featured-image img {
	display: block;
	width: 100%;
	aspect-ratio: 3 / 2;
	object-fit: cover;
	border-radius: 12px;
	overflow: hidden;
}
.sipscout-blog .blog-cat,
.sipscout-blog .blog-cat a {
	color: var(--wp--preset--color--coral);
	font-size: 13px;
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	text-decoration: none;
}
.sipscout-blog .blog-title,
.sipscout-blog .blog-title a {
	color: var(--wp--preset--color--champagne);
	font-size: 23px;
	line-height: 1.2;
	text-decoration: none;
}
.sipscout-blog .blog-title a:hover {
	color: var(--wp--preset--color--coral);
}
.sipscout-blog .blog-excerpt {
	color: var(--wp--preset--color--slate);
	font-size: 15px;
	line-height: 1.6;
}
.sipscout-blog .blog-date {
	color: var(--wp--preset--color--muted-slate);
	font-size: 14px;
}
/* Mobile: single column, no excerpt, and "All posts →" moves below the grid
   (display:contents releases the heading and link into the section's own flow). */
@media (max-width: 899.98px) {
	.sipscout-blog .wp-block-post-template {
		grid-template-columns: 1fr;
	}
}
@media (max-width: 599.98px) {
	.sipscout-blog {
		display: flex;
		flex-direction: column;
		gap: 24px;
	}
	.sipscout-blog > * {
		margin: 0;
	}
	.sipscout-blog .blog-head {
		display: contents;
	}
	.sipscout-blog .all-posts-link {
		order: 99;
	}
	.sipscout-blog .blog-excerpt {
		display: none;
	}
}

/* ---- Founders teaser ---- */
.founders-grid {
	display: grid;
	gap: 24px;
}
.founders-grid > *,
.founders-body > *,
.founder-row > *,
.founder-meta > * {
	margin: 0;
}
.founders-media {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 12px;
	align-items: stretch;
}
.founders-media figure {
	margin: 0;
}
.founders-media img {
	width: 100%;
	aspect-ratio: 2 / 3;
	object-fit: cover;
	border-radius: 14px;
	box-shadow: 0 16px 34px rgba(8, 14, 32, 0.45);
}
.founders-body {
	display: flex;
	flex-direction: column;
	gap: 18px;
	text-align: center;
	align-items: center;
}
.founder-row {
	display: flex;
	align-items: center;
	gap: 14px;
	text-align: left;
}
.founder-headshot img {
	width: 56px;
	height: 56px;
	border-radius: 50%;
	object-fit: cover;
	display: block;
}
.founder-name {
	font-family: var(--wp--preset--font-family--fraunces);
	font-size: 21px;
	line-height: 1.2;
}
.founder-role {
	font-size: 14px;
}
.founders-link a {
	color: var(--wp--preset--color--coral);
	font-weight: 600;
	text-decoration: none;
	border-bottom: 1px solid rgba(238, 167, 161, 0.4);
	padding-bottom: 2px;
}
.founders-link a:hover {
	color: var(--wp--preset--color--champagne);
}
/* Mobile order per the design: eyebrow → heading → photo pair → bios → link.
   The body group dissolves (display:contents) so its children can interleave
   with the photos inside the grid's single column. */
@media (max-width: 899.98px) {
	.sipscout-founders {
		text-align: center;
	}
	.founders-body {
		display: contents;
	}
	.founders-body .sipscout-eyebrow {
		order: -3;
	}
	.founders-body h2 {
		order: -2;
	}
	.founders-media {
		order: -1;
	}
	.founder-row {
		justify-content: center;
	}
	.founder-row .founder-meta {
		text-align: left;
	}
}
@media (max-width: 599.98px) {
	.founders-lead {
		display: none; /* the mobile design drops the lead paragraph */
	}
}
@media (min-width: 900px) {
	.founders-grid {
		grid-template-columns: 1fr 1fr;
		column-gap: 64px;
		align-items: center;
	}
	/* Overlapping editorial collage — big photo top-left, smaller one pinned
	   bottom-right with a panel-coloured keyline. */
	.founders-media {
		display: block;
		position: relative;
		min-height: 560px;
	}
	.founders-media .photo-a,
	.founders-media .photo-b {
		position: absolute;
	}
	.founders-media .photo-a {
		top: 0;
		left: 0;
		width: 66%;
	}
	.founders-media .photo-b {
		bottom: 0;
		right: 0;
		width: 52%;
	}
	.founders-media img {
		border-radius: 16px;
		box-shadow: 0 24px 50px rgba(8, 14, 32, 0.5);
	}
	.founders-media .photo-b img {
		border: 5px solid var(--wp--preset--color--navy-panel);
	}
	.founders-body {
		text-align: left;
		align-items: flex-start;
	}
	.founders-body h2 {
		font-size: 40px;
	}
}

/* ---- Newsletter ---- */
.sipscout-newsletter .newsletter-copy {
	opacity: 0.8;
}
.newsletter-form,
.sipscout-newsletter .mc4wp-form-fields {
	display: flex;
	flex-direction: column;
	gap: 10px;
	width: 100%;
	max-width: 440px;
	margin: 12px auto 0;
}
.newsletter-form input,
.sipscout-newsletter .mc4wp-form input[type="email"] {
	flex: 1;
	min-width: 0;
	background: #fffdf7;
	border: 1px solid rgba(30, 48, 93, 0.18);
	border-radius: 999px;
	padding: 14px 22px;
	font-family: var(--wp--preset--font-family--dm-sans);
	font-size: 16px;
	color: var(--wp--preset--color--house-blue);
	outline: none;
}
.newsletter-form button,
.sipscout-newsletter .mc4wp-form button {
	background: var(--wp--preset--color--house-blue);
	color: var(--wp--preset--color--champagne);
	font-family: var(--wp--preset--font-family--dm-sans);
	font-weight: 600;
	font-size: 16px;
	padding: 14px 28px;
	border: none;
	border-radius: 999px;
	cursor: pointer;
}
.newsletter-form button:hover,
.sipscout-newsletter .mc4wp-form button:hover {
	background: var(--wp--preset--color--navy-pressed);
}
/* MC4WP success / error messages — centred under the form like the rest of the band. */
.sipscout-newsletter .mc4wp-response {
	color: var(--wp--preset--color--house-blue);
	font-size: var(--wp--preset--font-size--small);
	margin-top: 10px;
	text-align: center;
}
@media (min-width: 600px) {
	.newsletter-form,
	.sipscout-newsletter .mc4wp-form-fields {
		flex-direction: row;
	}
}

/* ---- 404 ---- */
.sipscout-404 .error-grid {
	display: grid;
	gap: 32px;
}
.sipscout-404 .error-grid > *,
.sipscout-404 .error-body > * {
	margin: 0;
}
.sipscout-404 .error-body {
	display: flex;
	flex-direction: column;
	gap: 20px;
	justify-content: center;
}
.sipscout-404 .error-photo {
	justify-self: center;
}
.sipscout-404 .error-photo img {
	display: block;
	width: 100%;
	max-width: 380px;
	aspect-ratio: 4 / 5;
	object-fit: cover;
	border-radius: 16px;
	box-shadow: 0 24px 50px rgba(8, 14, 32, 0.5);
}
@media (min-width: 900px) {
	.sipscout-404 .error-grid {
		grid-template-columns: 1.2fr 1fr;
		column-gap: 64px;
		align-items: center;
	}
}
@media (max-width: 599.98px) {
	.sipscout-404 {
		--wp--preset--spacing--70: 64px;
	}
	.sipscout-404 .wp-block-buttons {
		flex-direction: column;
		align-items: stretch;
	}
	.sipscout-404 .wp-block-buttons .wp-block-button__link {
		display: block;
		text-align: center;
	}
}

/* ---- Page hero (For Scouters / For Venues style pages) ---- */
/* The designs' H1s run smaller than the homepage display size (60–62px, not 88px). */
.sipscout-page-hero h1,
.sipscout-venues-hero h1 {
	font-size: clamp(34px, 4.3vw, 62px);
	line-height: 1.05;
}
/* Venues hero — centered column with the design's soft radial accent over deep navy.
   The gradient can't be a preset (it layers over a colour), so it lives here. */
.sipscout-venues-hero {
	background:
		radial-gradient(ellipse 90% 80% at 80% 0%, rgba(52, 80, 122, 0.3) 0%, transparent 60%),
		var(--wp--preset--color--deep-navy);
}
.hero-badge {
	font-size: 12px;
	font-weight: 600;
	border: 1px solid rgba(247, 231, 206, 0.25);
	padding: 3px 10px;
	border-radius: 999px;
}
/* The mobile design left-aligns the venues hero (desktop stays centered). */
@media (max-width: 599.98px) {
	.sipscout-venues-hero .has-text-align-center {
		text-align: left;
	}
	.sipscout-venues-hero .wp-block-group.is-layout-flex {
		justify-content: flex-start;
	}
}
.page-hero-grid {
	display: grid;
	gap: var(--wp--preset--spacing--50);
	align-items: center;
}
.page-hero-grid > * {
	margin-block-start: 0;
}
.hero-media .hero-phone {
	margin: 0;
}
.hero-media .hero-phone img {
	height: auto;
	filter: drop-shadow(0 22px 40px rgba(8, 14, 32, 0.5));
}
/* Upright phone on mobile, the pre-rendered tilted one from tablet-landscape up. */
.hero-media .phone-upright img {
	width: 220px;
}
.hero-media .phone-tilted {
	display: none;
}
@media (min-width: 900px) {
	.page-hero-grid {
		grid-template-columns: 1.2fr 1fr;
	}
	.hero-media .phone-upright {
		display: none;
	}
	.hero-media .phone-tilted {
		display: block;
	}
	.hero-media .phone-tilted img {
		width: 360px;
	}
}

/* ---- Feature cards ---- */
.sipscout-cards {
	display: grid;
	gap: 20px;
	margin-top: var(--wp--preset--spacing--50);
}
/* The group is a flow layout, so core stamps block-gap margins on the cards;
   the grid's own gap is the only spacing we want (same fix as .sipscout-app-grid). */
.sipscout-cards > * {
	margin: 0;
}
.sipscout-card {
	display: flex;
	flex-direction: column;
	gap: 12px;
	border: 1px solid rgba(247, 231, 206, 0.1);
	border-radius: 18px;
	padding: 28px 24px;
}
.sipscout-card > * {
	margin: 0;
}
.sipscout-card h3 {
	font-size: 22px;
	line-height: 1.2;
}
.sipscout-card p:not(.card-icon) {
	font-size: 15px;
	line-height: 1.6;
}
/* Icon tile — the glyph is plain text (◉ ⚡ ★ ♥), so the client can retype it. */
.card-icon {
	width: 46px;
	height: 46px;
	border-radius: 12px;
	background: rgba(238, 167, 161, 0.16);
	color: var(--wp--preset--color--coral);
	font-size: 22px;
	display: flex;
	align-items: center;
	justify-content: center;
}
@media (min-width: 600px) {
	.sipscout-cards {
		grid-template-columns: 1fr 1fr;
	}
}
@media (min-width: 900px) {
	.sipscout-cards {
		grid-template-columns: repeat(4, 1fr);
	}
	/* Six-card grids (For Venues benefits, testimonials, pricing) run 3-up. */
	.sipscout-cards.cards-3 {
		grid-template-columns: repeat(3, 1fr);
	}
}

/* ---- Testimonial cards (quote cards inside a .sipscout-cards grid) ---- */
/* The p-prefixed selectors match the specificity of the card's generic
   `p:not(.card-icon)` body rule so these later declarations win. */
.sipscout-card p.quote-mark {
	font-family: var(--wp--preset--font-family--fraunces);
	font-size: 40px;
	line-height: 0.6;
}
.sipscout-card p.quote-text {
	font-size: 17px;
	line-height: 1.55;
}
/* Citation pins to the card's bottom edge so short quotes stay aligned. */
.sipscout-card p.quote-cite {
	margin-top: auto;
	font-size: 14px;
}

/* ---- Pricing cards ---- */
.price-card {
	position: relative;
	text-align: center;
	gap: 6px;
	padding: 30px 24px;
}
.price-card p.price {
	font-family: var(--wp--preset--font-family--fraunces);
	font-size: 40px;
	line-height: 1.1;
}
/* "/mo" is a subscript inside the price so it stays one editable line. */
.price-card p.price sub {
	font-size: 16px;
	font-family: var(--wp--preset--font-family--dm-sans);
	color: var(--wp--preset--color--slate);
	vertical-align: baseline;
	bottom: 0;
}
.price-card p.plan-blurb {
	font-size: 14px;
}
.price-card.is-popular {
	border: 1.5px solid rgba(238, 167, 161, 0.6);
}
.price-card p.popular-badge,
.plan-card p.popular-badge {
	position: absolute;
	top: -12px;
	left: 50%;
	transform: translateX(-50%);
	background: var(--wp--preset--color--coral);
	color: var(--wp--preset--color--house-blue);
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	padding: 4px 12px;
	border-radius: 999px;
	white-space: nowrap;
}
/* Phones: cards flatten into rows — name + blurb left, price right (per the
   mobile design), badge tucked to the top-left. */
@media (max-width: 599.98px) {
	.price-card {
		display: grid;
		grid-template-columns: 1fr auto;
		grid-template-areas:
			"name  price"
			"blurb price";
		align-items: center;
		text-align: left;
		gap: 2px 16px;
		padding: 20px 22px;
	}
	.price-card h3 {
		grid-area: name;
		font-size: 19px;
	}
	.price-card p.price {
		grid-area: price;
		font-size: 28px;
	}
	.price-card p.price sub {
		display: none;
	}
	.price-card p.plan-blurb {
		grid-area: blurb;
		font-size: 13px;
	}
	.price-card p.popular-badge {
		left: 22px;
		transform: none;
		top: -11px;
	}
}

/* ---- Stats bar, bordered variant (For Venues) ---- */
.stats-bordered {
	border-top: 1px solid rgba(247, 231, 206, 0.14);
	border-bottom: 1px solid rgba(247, 231, 206, 0.14);
	--wp--preset--spacing--60: 44px;
}

/* ---- A look inside ---- */
.look-row {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 36px;
	margin-top: var(--wp--preset--spacing--50);
}
.look-row .look-phone {
	margin: 0;
}
.look-row .look-phone img {
	width: min(232px, 70vw);
	height: auto;
	filter: drop-shadow(0 22px 40px rgba(8, 14, 32, 0.5));
}
.look-row .look-phone figcaption {
	color: var(--wp--preset--color--slate);
	font-size: var(--wp--preset--font-size--small);
	text-align: center;
	margin-top: 14px;
}
@media (min-width: 900px) {
	.look-row {
		flex-direction: row;
		justify-content: center;
		align-items: flex-start;
		gap: 25px;
	}
	/* The middle phone hangs 28px lower, like the design's staggered trio. */
	.look-row .look-phone:nth-child(2) {
		transform: translateY(28px);
	}
}

/* ---- Download CTA ---- */
.sipscout-cta .cta-copy {
	opacity: 0.82;
}
.sipscout-cta .cta-linktree a {
	color: var(--wp--preset--color--house-blue);
}
@media (max-width: 599.98px) {
	/* The mobile design drops the linktree line and stacks the badges centered. */
	.sipscout-cta .cta-linktree {
		display: none;
	}
	.sipscout-cta .app-badges {
		flex-direction: column;
		align-items: center;
	}
}

/* ---- Venue Pricing: hero ---- */
/* Deep navy with the design's soft radial glow, running flush into the plans
   band below (same background). Tokens re-scoped to the design's 88/40 rhythm. */
.sipscout-plans-hero {
	--wp--preset--spacing--60: 88px;
	--wp--preset--spacing--40: 40px;
	background:
		radial-gradient(ellipse 90% 90% at 50% 0%, rgba(52, 80, 122, 0.3) 0%, transparent 62%),
		var(--wp--preset--color--deep-navy);
}
/* This page's H1 runs smaller than the homepage display size, like the other
   inner pages (58px desktop, 38px phones). */
.sipscout-plans-hero h1 {
	font-size: clamp(38px, 5.5vw, 58px);
	line-height: 1.04;
}

/* ---- Venue Pricing: plan cards ---- */
/* Detailed tier cards with feature checklists — the homepage teaser's compact
   variant is .price-card above; these stay full cards at every width. */
.sipscout-plans .sipscout-cards {
	margin-top: 0; /* the band's own padding sets the offset from the hero */
}
.plan-card {
	position: relative;
	gap: 20px;
	padding: 32px 28px;
}
.plan-card h3 {
	font-size: 24px;
}
.plan-card p.price {
	font-family: var(--wp--preset--font-family--fraunces);
	font-size: clamp(42px, 4vw, 48px);
	line-height: 1;
	margin-top: -8px; /* price hugs the plan name (12px, not the card's 20px gap) */
}
.plan-card p.price sub {
	font-size: 15px;
	font-family: var(--wp--preset--font-family--dm-sans);
	color: var(--wp--preset--color--slate);
	vertical-align: baseline;
	bottom: 0;
}
hr.plan-divider {
	border: none;
	width: 100%;
	height: 1px;
	margin: 0;
	background: rgba(247, 231, 206, 0.1);
	opacity: 1;
}
.plan-card p.plan-includes {
	font-size: 14px;
	font-weight: 600;
	margin-bottom: -7px; /* lead-in hugs its list (13px, matching the row gap) */
}
.plan-card .plan-features {
	list-style: none;
	padding: 0;
	margin: 0;
	display: flex;
	flex-direction: column;
	gap: 13px;
}
.plan-card .plan-features li {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	font-size: 15px;
	line-height: 1.45;
}
.plan-card .plan-features li::before {
	content: "✓";
	flex: none;
	width: 19px;
	height: 19px;
	margin-top: 2px;
	border-radius: 50%;
	background: rgba(238, 167, 161, 0.18);
	color: var(--wp--preset--color--coral);
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 10px;
	font-weight: 700;
}
/* "Get started" pins to the card's bottom edge so the three CTAs align. */
.plan-card .wp-block-buttons {
	margin-top: auto;
	padding-top: 4px;
}
.plan-card .wp-block-button {
	width: 100%;
}
.plan-card .wp-block-button__link {
	display: block;
	width: 100%;
	text-align: center;
	padding: 13px 22px;
}
.plan-card .is-style-outline .wp-block-button__link:hover {
	background: transparent;
	border-color: var(--wp--preset--color--coral);
	color: var(--wp--preset--color--coral);
}
.plan-card.is-popular {
	border: 1.5px solid rgba(238, 167, 161, 0.6);
	box-shadow: 0 22px 48px rgba(8, 14, 32, 0.4);
}
@media (max-width: 599.98px) {
	.plan-card {
		gap: 16px;
		padding: 26px 24px;
	}
	.plan-card h3 {
		font-size: 22px;
	}
}

/* ---- Venue Pricing: comparison table ---- */
/* Group rows (cmp-row) on a shared grid keep the four columns aligned; the
   Top Shelf column is tinted with background-COLOR (not the shorthand) so the
   tick circles' background-image can layer on top of it. */
.sipscout-compare h2 {
	margin-top: 10px; /* h2 hugs the eyebrow, per the design */
}
.sipscout-compare .compare-hint {
	display: none; /* mobile-only swipe hint */
}
.compare-scroll {
	overflow-x: auto;
	margin-top: var(--wp--preset--spacing--40);
}
.compare-table {
	min-width: 560px;
	border: 1px solid rgba(247, 231, 206, 0.12);
	border-radius: 18px;
	overflow: hidden;
}
.compare-table > * {
	margin: 0;
}
.cmp-row {
	display: grid;
	grid-template-columns: 1.7fr 1fr 1fr 1fr;
	border-top: 1px solid rgba(247, 231, 206, 0.1);
}
.cmp-row > * {
	margin: 0;
	padding: 16px 12px;
	text-align: center;
	border-left: 1px solid rgba(247, 231, 206, 0.08);
	align-self: center;
}
.cmp-row > :first-child {
	text-align: left;
	padding: 16px 22px;
	border-left: none;
	font-size: 15px;
}
.cmp-row > :last-child {
	background-color: rgba(238, 167, 161, 0.06);
	border-left-color: rgba(238, 167, 161, 0.25);
}
.cmp-row.cmp-head {
	border-top: none;
}
.cmp-head > :first-child {
	font-size: 13px;
	font-weight: 600;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--wp--preset--color--slate);
}
.cmp-head > :last-child {
	background-color: rgba(238, 167, 161, 0.1);
	border-left-color: rgba(238, 167, 161, 0.35);
}
.cmp-plan > * {
	margin: 0;
}
.cmp-plan-name {
	font-family: var(--wp--preset--font-family--fraunces);
	font-size: 19px;
	line-height: 1.2;
}
.cmp-plan-price {
	color: var(--wp--preset--color--slate);
	font-size: 13px;
	margin-top: 2px;
}
.cmp-head > :last-child .cmp-plan-price {
	color: var(--wp--preset--color--coral);
	font-weight: 600;
}
/* Tick / dash cells — the circle behind the ✓ is a radial background-image,
   so it survives the highlight column's background-color. */
p.cmp-yes {
	color: var(--wp--preset--color--coral);
	font-size: 12px;
	font-weight: 700;
	line-height: 22px;
	background-image: radial-gradient(circle 11px at center, rgba(238, 167, 161, 0.18) 98%, transparent 100%);
}
p.cmp-no {
	color: #5e6e8c;
	font-size: 16px;
	line-height: 22px;
}
.sipscout-compare .compare-note {
	margin-top: 18px;
}
@media (max-width: 599.98px) {
	.sipscout-compare .compare-hint {
		display: block;
	}
	.cmp-row > * {
		padding: 14px 8px;
	}
	.cmp-row > :first-child {
		padding: 14px 16px;
		font-size: 14px;
	}
	.cmp-plan-name {
		font-size: 16px;
	}
}

/* ---- Venue Pricing: FAQ ---- */
/* Core Details blocks restyled as hairline accordion rows; the coral plus
   rotates into an × when a row is open. */
.sipscout-faq .faq-list {
	border-top: 1px solid rgba(247, 231, 206, 0.12);
	margin-top: var(--wp--preset--spacing--30);
}
.faq-item.wp-block-details {
	margin: 0;
	padding: 0;
	border-bottom: 1px solid rgba(247, 231, 206, 0.12);
}
.faq-item summary {
	list-style: none;
	cursor: pointer;
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 20px;
	padding: 20px 2px;
	font-size: 18px;
	font-weight: 500;
	color: var(--wp--preset--color--champagne);
}
.faq-item summary::-webkit-details-marker {
	display: none;
}
.faq-item summary::after {
	content: "+";
	flex: none;
	color: var(--wp--preset--color--coral);
	font-size: 24px;
	line-height: 1;
	transition: transform 0.2s ease;
}
.faq-item[open] summary::after {
	transform: rotate(45deg);
}
.faq-item > :not(summary) {
	margin: 0;
	padding: 0 2px 22px;
	max-width: 64ch;
	color: var(--wp--preset--color--slate);
	font-size: 16px;
	line-height: 1.6;
}
@media (max-width: 599.98px) {
	.faq-item summary {
		gap: 16px;
		padding: 18px 2px;
		font-size: 16px;
	}
	.faq-item > :not(summary) {
		padding-bottom: 18px;
		font-size: 15px;
	}
}

/* ---- Contact CTA (coral band) ---- */
.sipscout-talk .talk-copy {
	opacity: 0.82;
}

/* ---- Contact page ---- */
/* Desktop: intro + info + socials in a left column, the form card on the right
   spanning all three rows. Phones restack per the mobile design — intro band,
   info rows, form card, socials — via grid order. */
.sipscout-contact {
	background:
		radial-gradient(ellipse 80% 70% at 15% 0%, rgba(52, 80, 122, 0.25) 0%, transparent 60%),
		var(--wp--preset--color--house-blue);
}
.contact-grid {
	display: grid;
	gap: 28px;
}
.contact-grid > * {
	margin: 0;
}
.contact-head h1 {
	font-size: clamp(42px, 5vw, 56px);
	line-height: 1.02;
}
.contact-head .contact-lead {
	max-width: 38ch;
}
.contact-info {
	display: flex;
	flex-direction: column;
	gap: 18px;
}
.contact-info > *,
.info-row > *,
.info-meta > * {
	margin: 0;
}
.info-row {
	display: flex;
	align-items: center;
	gap: 14px;
}
/* Icon tile — plain text glyph (✉ ⌖ ↩), same treatment as the feature cards. */
.info-icon {
	flex: none;
	width: 44px;
	height: 44px;
	border-radius: 12px;
	background: rgba(238, 167, 161, 0.16);
	color: var(--wp--preset--color--coral);
	font-size: 18px;
	display: flex;
	align-items: center;
	justify-content: center;
}
.info-label {
	font-size: 13px;
}
.info-value {
	font-size: 17px;
	line-height: 1.4;
}
.info-value a {
	color: var(--wp--preset--color--champagne);
	text-decoration: none;
}
.info-value a:hover {
	color: var(--wp--preset--color--coral);
}
.contact-social {
	display: flex;
	gap: 16px;
	font-size: 15px;
}
.contact-social a {
	color: var(--wp--preset--color--slate);
	text-decoration: none;
}
.contact-social a:hover {
	color: var(--wp--preset--color--coral);
}
.contact-card {
	border: 1px solid rgba(247, 231, 206, 0.12);
	border-radius: 22px;
	padding: 36px;
	box-shadow: 0 30px 60px rgba(8, 14, 32, 0.4);
}
.contact-card > * {
	margin: 0;
}
.contact-card .contact-privacy {
	font-size: 13px;
	margin-top: 14px;
}
@media (min-width: 900px) {
	.contact-grid {
		grid-template-columns: 0.85fr 1.15fr;
		grid-template-rows: auto auto 1fr;
		grid-template-areas:
			"head   card"
			"info   card"
			"social card";
		column-gap: 64px;
		row-gap: 28px;
		align-items: start;
	}
	.contact-head { grid-area: head; }
	.contact-info { grid-area: info; }
	.contact-social { grid-area: social; align-self: end; }
	.contact-card { grid-area: card; }
}
@media (max-width: 899.98px) {
	/* Socials drop below the form card (source order is head, info, social, card). */
	.contact-social {
		order: 1;
	}
	/* The intro becomes its own deep-navy band, bleeding across the section's
	   global padding and up over its (re-scoped) top padding. Selector carries
	   three classes because core's `:root :where(.is-layout-flow) > :first-child`
	   (0,2,0) otherwise re-zeroes the negative top margin. */
	.sipscout-contact .contact-grid > .contact-head {
		margin-top: calc(-1 * var(--wp--preset--spacing--60));
		margin-left: calc(-1 * var(--wp--style--root--padding-left, var(--wp--preset--spacing--40)));
		margin-right: calc(-1 * var(--wp--style--root--padding-right, var(--wp--preset--spacing--40)));
		padding: 52px var(--wp--style--root--padding-left, var(--wp--preset--spacing--40)) 40px;
		background:
			radial-gradient(ellipse 130% 60% at 30% 0%, rgba(52, 80, 122, 0.25) 0%, transparent 60%),
			var(--wp--preset--color--deep-navy);
	}
	.contact-head h1 {
		font-size: 42px;
	}
	.contact-card {
		border-radius: 20px;
		padding: 24px;
	}
}

/* WPForms — restyle the plugin's fields to the design system (navy wells,
   champagne text, 12px radius, coral focus, champagne pill submit). The CSS
   custom properties cover WPForms' modern stylesheet; the explicit selectors
   below them are the fallback for the classic one. */
.sipscout-contact .wpforms-container {
	--wpforms-field-background-color: var(--wp--preset--color--house-blue);
	--wpforms-field-border-color: rgba(247, 231, 206, 0.18);
	--wpforms-field-border-color-spare: rgba(247, 231, 206, 0.18);
	--wpforms-field-border-radius: 12px;
	--wpforms-field-border-style: solid;
	--wpforms-field-border-size: 1px;
	--wpforms-field-text-color: var(--wp--preset--color--champagne);
	--wpforms-field-menu-color: var(--wp--preset--color--house-blue);
	--wpforms-label-color: var(--wp--preset--color--champagne);
	--wpforms-label-sublabel-color: var(--wp--preset--color--slate);
	--wpforms-label-error-color: var(--wp--preset--color--coral);
	--wpforms-button-background-color: var(--wp--preset--color--champagne);
	--wpforms-button-text-color: var(--wp--preset--color--house-blue);
	--wpforms-button-border-radius: 999px;
	--wpforms-button-border-style: none;
	--wpforms-button-border-size: 0px;
	--wpforms-field-size-font-size: 16px;
	--wpforms-label-size-font-size: 14px;
	margin: 0;
}
.sipscout-contact div.wpforms-container-full .wpforms-form .wpforms-field {
	padding: 10px 0;
}
.sipscout-contact div.wpforms-container-full .wpforms-form .wpforms-field-label {
	color: var(--wp--preset--color--champagne);
	font-family: var(--wp--preset--font-family--dm-sans);
	font-size: 14px;
	font-weight: 600;
	margin-bottom: 8px;
}
.sipscout-contact div.wpforms-container-full .wpforms-form input[type="text"],
.sipscout-contact div.wpforms-container-full .wpforms-form input[type="email"],
.sipscout-contact div.wpforms-container-full .wpforms-form select,
.sipscout-contact div.wpforms-container-full .wpforms-form textarea {
	width: 100%;
	max-width: 100%;
	background-color: var(--wp--preset--color--house-blue);
	border: 1px solid rgba(247, 231, 206, 0.18);
	border-radius: 12px;
	padding: 14px 16px;
	height: auto;
	font-family: var(--wp--preset--font-family--dm-sans);
	font-size: 16px;
	color: var(--wp--preset--color--champagne);
	box-shadow: none;
}
.sipscout-contact div.wpforms-container-full .wpforms-form input:focus,
.sipscout-contact div.wpforms-container-full .wpforms-form select:focus,
.sipscout-contact div.wpforms-container-full .wpforms-form textarea:focus {
	border-color: var(--wp--preset--color--coral);
	outline: none;
	box-shadow: none;
}
.sipscout-contact div.wpforms-container-full .wpforms-form ::placeholder {
	color: var(--wp--preset--color--muted-slate);
	opacity: 0.75;
}
/* Selects: replace the native arrow with a slate chevron that clears the 12px radius. */
.sipscout-contact div.wpforms-container-full .wpforms-form select {
	appearance: none;
	-webkit-appearance: none;
	cursor: pointer;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5 6 6.5 11 1.5' fill='none' stroke='%23A6B0C7' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 16px center;
	padding-right: 40px;
}
.sipscout-contact div.wpforms-container-full .wpforms-form button[type="submit"] {
	display: block;
	width: 100%;
	background-color: var(--wp--preset--color--champagne);
	color: var(--wp--preset--color--house-blue);
	border: none;
	border-radius: 999px;
	padding: 15px;
	margin-top: 8px;
	font-family: var(--wp--preset--font-family--dm-sans);
	font-weight: 600;
	font-size: 17px;
	line-height: 1.3;
	cursor: pointer;
	height: auto;
}
.sipscout-contact div.wpforms-container-full .wpforms-form button[type="submit"]:hover {
	background-color: #fbf1dc;
	color: var(--wp--preset--color--house-blue);
}
.sipscout-contact div.wpforms-container-full .wpforms-form em.wpforms-error {
	color: var(--wp--preset--color--coral);
	font-size: 13px;
}
.sipscout-contact .contact-card div.wpforms-confirmation-container-full,
.sipscout-contact .contact-card div[submit-success] > .wpforms-confirmation-container-full:not(.wpforms-redirection-message) {
	background: rgba(238, 167, 161, 0.12);
	border: 1px solid rgba(238, 167, 161, 0.4);
	border-radius: 12px;
	color: var(--wp--preset--color--champagne);
}
/* WPForms pins the confirmation <p> to #333; re-assert the champagne text. */
.sipscout-contact div.wpforms-container-full .wpforms-confirmation-container-full p,
.sipscout-contact div[submit-success] > .wpforms-confirmation-container-full:not(.wpforms-redirection-message) p {
	color: var(--wp--preset--color--champagne);
}

/* Per-section padding rhythm: the patterns pad with the Section token inline, so the
   token is re-scoped per band to hit the design's values (desktop / mobile). */
.sipscout-founders,
.sipscout-newsletter,
.sipscout-cta,
.sipscout-pricing,
.sipscout-compare,
.sipscout-faq {
	--wp--preset--spacing--70: 96px;
}
.sipscout-talk {
	--wp--preset--spacing--70: 80px;
}
.sipscout-contact {
	--wp--preset--spacing--60: 96px;
}
@media (max-width: 599.98px) {
	.sipscout-hiw,
	.sipscout-venue,
	.sipscout-blog,
	.sipscout-newsletter,
	.sipscout-page-hero,
	.sipscout-features,
	.sipscout-lookinside,
	.sipscout-cta,
	.sipscout-venues-hero,
	.sipscout-quotes,
	.sipscout-pricing {
		--wp--preset--spacing--70: 60px;
	}
	.sipscout-founders {
		--wp--preset--spacing--70: 56px;
	}
	/* Venue Pricing bands (per the mobile design). */
	.sipscout-compare,
	.sipscout-faq,
	.sipscout-talk {
		--wp--preset--spacing--70: 56px;
	}
	.sipscout-plans-hero {
		--wp--preset--spacing--60: 52px;
		--wp--preset--spacing--40: 44px;
	}
	.sipscout-plans {
		--wp--preset--spacing--50: 40px;
		--wp--preset--spacing--60: 56px;
	}
	.sipscout-contact {
		--wp--preset--spacing--60: 32px;
	}
}

/* ---- Blog index (home template) ---- */
.sipscout-blogindex .blogindex-head > * {
	margin-top: 0;
	margin-bottom: 18px;
}
.sipscout-blogindex .blog-pills {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin-top: 28px;
}
.sipscout-blogindex .blog-pills a {
	display: inline-block;
	padding: 9px 20px;
	border: 1px solid rgba(247, 231, 206, 0.25);
	border-radius: 999px;
	color: var(--wp--preset--color--slate);
	font-size: 15px;
	font-weight: 600;
	text-decoration: none;
	white-space: nowrap;
}
.sipscout-blogindex .blog-pills a:hover {
	border-color: var(--wp--preset--color--coral);
	color: var(--wp--preset--color--champagne);
}
.sipscout-blogindex .blog-pills a.pill-active {
	background: var(--wp--preset--color--coral);
	border-color: var(--wp--preset--color--coral);
	color: var(--wp--preset--color--house-blue);
}

/* Category archives (category.html): the pill set is static markup shared by
   every term, so the "you are here" state comes from the body class instead. */
.category-happy-hour-guide .blog-pills a[href="/category/happy-hour-guide/"],
.category-for-venues .blog-pills a[href="/category/for-venues/"],
.category-dallas-nightlife .blog-pills a[href="/category/dallas-nightlife/"],
.category-founder-story .blog-pills a[href="/category/founder-story/"],
.category-industry-insights .blog-pills a[href="/category/industry-insights/"],
.category-deals .blog-pills a[href="/category/deals/"] {
	background: var(--wp--preset--color--coral);
	border-color: var(--wp--preset--color--coral);
	color: var(--wp--preset--color--house-blue);
}

/* Posts with no featured image: branded placeholder card (functions.php).
   The listing crop rules (.sipscout-blog … a/img, 3:2 cover) and the featured
   card's absolute fill (.sipscout-featured .featured-media a/img) hit the same
   figure with two-class selectors, so the fallback carries the wrappers too —
   the badge must never be cover-cropped, whatever the context. */
.sipscout-thumb-fallback,
.sipscout-blog .wp-block-post-featured-image.sipscout-thumb-fallback {
	margin: 0;
	border-radius: 12px;
	background: var(--wp--preset--color--navy-panel);
	overflow: hidden;
}
.sipscout-thumb-fallback a,
.sipscout-blog .wp-block-post-featured-image.sipscout-thumb-fallback a,
.sipscout-featured .featured-media.sipscout-thumb-fallback a {
	position: static;
	display: grid;
	place-items: center;
	width: 100%;
	aspect-ratio: 3 / 2;
}
.sipscout-thumb-fallback img,
.sipscout-blog .wp-block-post-featured-image.sipscout-thumb-fallback img,
.sipscout-featured .featured-media.sipscout-thumb-fallback img {
	width: 30%;
	max-width: 96px;
	height: auto;
	aspect-ratio: auto;
	object-fit: contain;
	border-radius: 0;
}

/* Category pill badge (featured card + single post hero). The pill is the
   link itself — the block wrapper must stay a plain block so the constrained
   layout's auto margins keep it in the content column. */
.post-cat-pill {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}
.post-cat-pill a {
	display: inline-block;
	background: var(--wp--preset--color--coral);
	border-radius: 999px;
	padding: 6px 14px;
	color: var(--wp--preset--color--house-blue);
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	text-decoration: none;
}

/* Featured (latest) story card. */
.sipscout-featured {
	margin-top: 48px;
}
.sipscout-featured .wp-block-post-template > li {
	margin: 0;
}
.sipscout-featured .featured-card {
	display: grid;
	grid-template-columns: 1.15fr 1fr;
	background: var(--wp--preset--color--navy-panel);
	border-radius: 20px;
	overflow: hidden;
}
/* The photo column must not set the card's height — the copy side does.
   Absolutely-positioned image just crops (object-fit) to whatever the row is. */
.sipscout-featured .featured-media {
	position: relative;
	min-height: 320px;
	margin: 0;
}
.sipscout-featured .featured-media a {
	position: absolute;
	inset: 0;
	display: block;
}
.sipscout-featured .featured-media img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.sipscout-featured .featured-body {
	padding: 48px 44px;
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: 14px;
}
.sipscout-featured .featured-body > * {
	margin: 0;
}
.sipscout-featured .featured-kicker {
	gap: 12px;
}
.sipscout-featured .featured-flag {
	color: var(--wp--preset--color--muted-slate);
	font-size: 14px;
}
.sipscout-featured .featured-title,
.sipscout-featured .featured-title a {
	color: var(--wp--preset--color--champagne);
	font-size: 34px;
	line-height: 1.15;
	text-decoration: none;
}
.sipscout-featured .featured-title a:hover {
	color: var(--wp--preset--color--coral);
}
.sipscout-featured .featured-excerpt {
	color: var(--wp--preset--color--slate);
	font-size: 17px;
	line-height: 1.6;
}

/* Index grid on top of the shared .sipscout-blog card styles. */
.blog-index {
	margin-top: 56px;
}
.blog-index .wp-block-post-template {
	gap: 56px 40px;
}
.blog-index .blog-title,
.blog-index .blog-title a {
	font-size: 26px;
}
.blog-loadmore {
	margin-top: 56px;
	gap: 16px;
}
.blog-loadmore a {
	display: inline-block;
	padding: 12px 28px;
	border: 1px solid rgba(247, 231, 206, 0.25);
	border-radius: 999px;
	color: var(--wp--preset--color--champagne);
	font-size: 15px;
	font-weight: 600;
	text-decoration: none;
}
.blog-loadmore a:hover {
	border-color: var(--wp--preset--color--coral);
	color: var(--wp--preset--color--coral);
}

/* Meta line: "· N min read" rides along the date. */
.blog-date .readtime {
	color: inherit;
}

/* ---- Single post (article) ---- */
.sipscout-article .post-backlink {
	margin-bottom: 26px;
}
.sipscout-article .post-backlink a {
	color: var(--wp--preset--color--muted-slate);
	font-size: 15px;
	text-decoration: none;
}
.sipscout-article .post-backlink a:hover {
	color: var(--wp--preset--color--coral);
}
.sipscout-article .article-title {
	color: var(--wp--preset--color--champagne);
	font-size: clamp(38px, 5vw, 58px);
	line-height: 1.08;
	margin: 18px 0 0;
}
.sipscout-article .article-dek {
	margin-top: 20px;
}
.sipscout-article .article-dek p {
	color: var(--wp--preset--color--slate);
	font-size: var(--wp--preset--font-size--large);
	line-height: 1.55;
	margin: 0;
}
.sipscout-byline {
	display: grid;
	grid-template-columns: 44px auto;
	grid-template-rows: auto auto;
	column-gap: 14px;
	align-items: center;
	margin-top: 28px;
}
.sipscout-byline .sipscout-author {
	display: contents;
}
.sipscout-byline .byline-avatar {
	grid-row: 1 / 3;
	width: 44px;
	height: 44px;
	border-radius: 50%;
	background: var(--wp--preset--color--navy-panel);
	color: var(--wp--preset--color--coral);
	font-family: var(--wp--preset--font-family--fraunces);
	font-size: 18px;
	display: flex;
	align-items: center;
	justify-content: center;
}
.sipscout-byline .byline-name {
	grid-column: 2;
	color: var(--wp--preset--color--champagne);
	font-size: 16px;
	font-weight: 600;
}
.sipscout-byline .wp-block-post-date {
	grid-column: 2;
	margin: 0;
}
.sipscout-article .article-hero-media {
	margin-top: 40px;
}
.sipscout-article .article-hero-media img {
	width: 100%;
	border-radius: 18px;
	aspect-ratio: 16 / 9;
	object-fit: cover;
}
.sipscout-article .article-body {
	margin-top: 48px;
}
.sipscout-article .article-body p {
	color: var(--wp--preset--color--slate);
	font-size: 17px;
	line-height: 1.75;
}
.sipscout-article .article-body h2,
.sipscout-article .article-body h3 {
	color: var(--wp--preset--color--champagne);
	margin-top: 44px;
}
.sipscout-article .article-body strong {
	color: var(--wp--preset--color--champagne);
}
.sipscout-article .article-body blockquote {
	border-left: 3px solid var(--wp--preset--color--coral);
	margin: 34px 0;
	padding: 4px 0 4px 26px;
}
.sipscout-article .article-body blockquote p {
	color: var(--wp--preset--color--champagne);
	font-family: var(--wp--preset--font-family--fraunces);
	font-size: 26px;
	font-style: italic;
	line-height: 1.35;
}
.sipscout-article .article-body figure {
	margin: 40px 0;
}
.sipscout-article .article-body figure img {
	border-radius: 14px;
}
.sipscout-article .article-body figcaption {
	color: var(--wp--preset--color--muted-slate);
	font-size: 14px;
	text-align: center;
	margin-top: 12px;
}

/* In-article CTA panel (app + venue variants). */
.post-cta-panel {
	background: var(--wp--preset--color--navy-panel);
	border: 1px solid rgba(238, 167, 161, 0.3);
	border-radius: 18px;
	padding: 32px;
	margin: 40px 0;
}
.post-cta-panel h3 {
	color: var(--wp--preset--color--champagne);
	font-size: 24px;
	font-weight: 400;
	margin: 0 0 10px;
}
.post-cta-panel p {
	margin: 0 0 18px;
}
.post-cta-panel .app-badges {
	margin: 0;
}

/* Share row. */
.sipscout-article .article-share {
	margin-top: 56px;
	gap: 14px;
}
.sipscout-article .share-label {
	color: var(--wp--preset--color--muted-slate);
	font-size: 15px;
	font-weight: 600;
	margin: 0;
}
.sipscout-article .share-links {
	display: flex;
	align-items: center;
	gap: 14px;
	margin: 0;
}
.sipscout-article .share-links a {
	color: var(--wp--preset--color--champagne);
	border: 1px solid rgba(247, 231, 206, 0.25);
	text-decoration: none;
}
.sipscout-article .share-links a:hover {
	border-color: var(--wp--preset--color--coral);
	color: var(--wp--preset--color--coral);
}
.sipscout-article .share-round {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	border-radius: 50%;
	font-size: 15px;
}
.sipscout-article .share-pill {
	display: inline-block;
	padding: 8px 16px;
	border-radius: 999px;
	font-size: 14px;
}

/* Keep reading. */
.sipscout-article .article-related {
	margin-top: 72px;
}
.sipscout-article .article-related > h2 {
	margin: 0 0 32px;
}

/* Blog mobile (per the Mobile exports: single column, pills scroll sideways,
   featured card stacks image-over-copy, excerpts stay visible). */
@media (max-width: 899.98px) {
	.sipscout-featured .featured-card {
		grid-template-columns: 1fr;
	}
	.sipscout-featured .featured-media {
		min-height: 0;
	}
	.sipscout-featured .featured-media a {
		position: static;
	}
	.sipscout-featured .featured-media img {
		aspect-ratio: 3 / 2;
		height: auto;
	}
	.sipscout-featured .featured-body {
		padding: 28px 24px 32px;
	}
	.sipscout-featured .featured-title,
	.sipscout-featured .featured-title a {
		font-size: 27px;
	}
}
@media (max-width: 599.98px) {
	.sipscout-blogindex {
		--wp--preset--spacing--60: 52px;
		--wp--preset--spacing--70: 60px;
	}
	.sipscout-blogindex .blog-pills {
		flex-wrap: nowrap;
		overflow-x: auto;
		padding-bottom: 6px;
		-webkit-overflow-scrolling: touch;
	}
	.blog-index .blog-excerpt {
		display: block;
	}
	.blog-index .wp-block-post-template {
		gap: 44px;
	}
	.sipscout-article {
		--wp--preset--spacing--60: 52px;
		--wp--preset--spacing--70: 60px;
	}
	.sipscout-article .article-body blockquote p {
		font-size: 22px;
	}
	.post-cta-panel {
		padding: 24px;
	}
}

/* ---- About page ---- */
.sipscout-about-hero {
	display: flex;
	align-items: center;
}
.sipscout-about-hero h1 {
	font-size: clamp(42px, 5.2vw, 66px);
	line-height: 1.05;
}
.sipscout-about-hero .wp-block-cover__inner-container > * {
	margin-top: 0;
	margin-bottom: 22px;
}
.sipscout-about-hero .wp-block-cover__inner-container > :last-child {
	margin-bottom: 0;
}
.sipscout-about-story p {
	font-size: 18px;
	line-height: 1.8;
	margin: 0 0 26px;
}
.sipscout-about-story p:last-child {
	margin-bottom: 0;
}
.sipscout-about-story .story-accent {
	color: var(--wp--preset--color--champagne);
}
.story-placeholder {
	color: var(--wp--preset--color--muted-slate);
}
.sipscout-founder-cards .founder-photo {
	margin: 0 auto 24px;
	max-width: 220px;
}
.sipscout-founder-cards .founder-photo img {
	width: 100%;
	aspect-ratio: 1 / 1;
	object-fit: cover;
	border-radius: 50%;
	border: 1px solid rgba(166, 176, 199, 0.45);
	display: block;
}
.sipscout-founder-cards .founder-card-name {
	font-size: 28px;
	margin: 0 0 8px;
}
.sipscout-founder-cards .founder-card-role {
	color: var(--wp--preset--color--coral);
	font-size: 13px;
	font-weight: 600;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	margin: 0 0 16px;
}
.sipscout-founder-cards .founder-card-bio {
	font-size: 16px;
	line-height: 1.7;
	max-width: 420px;
	margin: 0 auto 16px;
}
.sipscout-founder-cards .founder-card-link a {
	font-weight: 600;
	text-decoration: none;
}
@media (max-width: 781.98px) {
	.sipscout-founder-cards .founder-cards-grid {
		gap: 56px;
	}
	.sipscout-founder-cards .founder-photo {
		max-width: 200px;
	}
}
@media (max-width: 599.98px) {
	.sipscout-about-hero {
		min-height: 520px !important;
	}
	.sipscout-about-story,
	.sipscout-founder-cards,
	.sipscout-about-cta {
		--wp--preset--spacing--70: 60px;
	}
	.sipscout-about-story p {
		font-size: 17px;
	}
}

/* ---- Instagram feed ---- */
/* Header left, follow pill right, feed grid full-width below. On phones the
   pill drops below the grid, centered (per the mobile design). */
.instagram-inner {
	display: grid;
	grid-template-columns: 1fr auto;
	grid-template-areas:
		"head follow"
		"feed feed";
	align-items: center;
	gap: 36px 24px;
}
.instagram-inner > *,
.ig-head > *,
.ig-id > * {
	margin: 0;
}
.ig-head {
	grid-area: head;
	display: flex;
	align-items: center;
	gap: 16px;
}
.ig-avatar {
	width: 56px;
	height: 56px;
	flex: none;
	border-radius: 50%;
	background: var(--wp--preset--color--coral);
	display: flex;
	align-items: center;
	justify-content: center;
}
.ig-avatar img {
	width: 82%;
	height: 82%;
	object-fit: contain;
	display: block;
}
.ig-handle {
	font-family: var(--wp--preset--font-family--fraunces);
	font-size: 26px;
	line-height: 1.1;
}
.ig-sub {
	font-size: 14px;
	margin-top: 2px;
}
/* Shorter subtext copy is mobile-only (per the mobile design). */
.ig-sub .ig-sub-short {
	display: none;
}
.ig-follow {
	grid-area: follow;
}
.ig-follow .wp-block-button__link {
	border: 1px solid rgba(247, 231, 206, 0.4);
	border-radius: 999px;
	padding: 11px 26px;
	font-weight: 600;
}
.ig-follow .wp-block-button__link:hover {
	border-color: var(--wp--preset--color--coral);
	color: var(--wp--preset--color--coral);
	background: transparent;
}
.ig-feed {
	grid-area: feed;
}
/* Smash Balloon output → the design's tile grid: kill the plugin's float/padding
   layout and let CSS grid own columns and gaps; tiles stay square via aspect-ratio
   (height:auto beats the plugin's inline JS-set height). */
.sipscout-instagram #sb_instagram {
	padding: 0 !important;
	width: 100% !important;
}
.sipscout-instagram #sb_instagram #sbi_images {
	display: grid;
	grid-template-columns: repeat(6, 1fr);
	gap: 12px;
	float: none;
	width: 100% !important;
	padding: 0 !important;
}
.sipscout-instagram #sb_instagram #sbi_images .sbi_item {
	float: none !important;
	width: auto !important;
	padding: 0 !important;
}
.sipscout-instagram #sb_instagram .sbi_photo_wrap {
	border-radius: 10px;
	overflow: hidden;
}
.sipscout-instagram #sb_instagram .sbi_photo {
	height: auto !important;
	aspect-ratio: 1 / 1;
}
.sipscout-instagram #sb_instagram .sbi_photo img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}
@media (max-width: 899.98px) {
	.sipscout-instagram #sb_instagram #sbi_images {
		grid-template-columns: repeat(3, 1fr);
	}
}
@media (max-width: 599.98px) {
	.sipscout-instagram {
		--wp--preset--spacing--70: 56px;
		padding-bottom: 56px !important;
	}
	.instagram-inner {
		grid-template-columns: 1fr;
		grid-template-areas:
			"head"
			"feed"
			"follow";
		gap: 22px;
	}
	.ig-head {
		gap: 12px;
	}
	.ig-avatar {
		width: 46px;
		height: 46px;
	}
	.ig-handle {
		font-size: 21px;
	}
	.ig-sub {
		font-size: 13px;
	}
	.ig-sub .ig-sub-long {
		display: none;
	}
	.ig-sub .ig-sub-short {
		display: inline;
	}
	.ig-follow {
		justify-self: center;
	}
	.ig-follow .wp-block-button__link {
		padding: 12px 26px;
	}
	.sipscout-instagram #sb_instagram #sbi_images {
		gap: 8px;
	}
	.sipscout-instagram #sb_instagram .sbi_photo_wrap {
		border-radius: 8px;
	}
}

/* Focus rings: the parent theme outlines every *:focus (line 34 of its
   style.css), so mouse clicks leave a currentColor box on links/badges.
   Suppress it for pointer focus only — keyboard focus (:focus-visible)
   keeps the parent's outline for accessibility. */
.wp-site-blocks *:focus:not(:focus-visible) {
	outline: none;
}

/* ---- Partner venues marquee ---- */
/* An auto-scrolling, draggable logo strip (patterns/partner-marquee.php +
   assets/marquee.js). The logo list is a core Gallery block so the client
   reorders logos by dragging them in the editor; the JS clones the set to
   build a seamless loop, so these rules must only ever style the first
   (original) markup — clones inherit automatically. */
.sipscout-marquee h2 {
	font-size: clamp(26px, 3.4vw, 36px);
	line-height: 1.1;
	margin-bottom: 36px;
}
.sipscout-marquee-viewport {
	position: relative;
	/* Fades must match the section background; if an editor recolours the
	   group, override --marquee-bg alongside it. */
	--marquee-bg: var(--wp--preset--color--warm-white);
	--marquee-fade: 96px;
}
.sipscout-marquee-viewport::before,
.sipscout-marquee-viewport::after {
	content: "";
	position: absolute;
	top: 0;
	bottom: 0;
	width: var(--marquee-fade);
	z-index: 2;
	pointer-events: none;
}
.sipscout-marquee-viewport::before {
	left: 0;
	background: linear-gradient(to right, var(--marquee-bg), transparent);
}
.sipscout-marquee-viewport::after {
	right: 0;
	background: linear-gradient(to left, var(--marquee-bg), transparent);
}
.wp-block-gallery.sipscout-marquee-track {
	display: flex;
	flex-wrap: nowrap;
	align-items: center;
	gap: 0;
	overflow-x: auto;
	overflow-y: hidden;
	-webkit-overflow-scrolling: touch;
	touch-action: pan-x;
	cursor: grab;
	user-select: none;
	-webkit-user-select: none;
	scrollbar-width: none; /* drag/swipe replaces the scrollbar */
	-ms-overflow-style: none;
}
.wp-block-gallery.sipscout-marquee-track::-webkit-scrollbar {
	display: none;
}
.sipscout-marquee-track.is-dragging {
	cursor: grabbing;
}
/* Fixed-height slot, intrinsic width: wide wordmarks shrink to fit 72px tall,
   tall marks keep at least 120px of presence. !important outguns the core
   gallery's :not(#individual-image) width rules. */
.wp-block-gallery.sipscout-marquee-track figure.wp-block-image {
	flex: none;
	display: flex;
	align-items: center;
	justify-content: center;
	height: 72px;
	width: auto !important;
	min-width: 120px;
	max-width: 280px;
	margin: 0 20px !important;
}
.wp-block-gallery.sipscout-marquee-track figure.wp-block-image img {
	width: auto;
	height: auto;
	max-height: 100%;
	max-width: 100%;
	object-fit: contain;
	-webkit-user-drag: none;
}
/* Fewer than 3 logos (set by marquee.js): a static centred row — too little
   content to loop seamlessly. */
.sipscout-marquee.is-static .sipscout-marquee-track {
	justify-content: center;
	overflow-x: hidden;
	cursor: default;
}
.sipscout-marquee.is-static .sipscout-marquee-viewport::before,
.sipscout-marquee.is-static .sipscout-marquee-viewport::after {
	display: none;
}
/* Optional muted treatment: add marquee-grayscale to the section group. */
.sipscout-marquee.marquee-grayscale .sipscout-marquee-track figure.wp-block-image {
	filter: grayscale(1);
	opacity: 0.65;
	transition: filter 0.25s ease-in-out, opacity 0.25s ease-in-out;
}
.sipscout-marquee.marquee-grayscale .sipscout-marquee-track figure.wp-block-image:hover {
	filter: grayscale(0);
	opacity: 1;
}
@media (max-width: 600px) {
	.sipscout-marquee-viewport {
		--marquee-fade: 48px;
	}
}