/* ==========================================================================
   Susan Striker homepage 2026
   Mobile-first. Breakpoints: 768px, 1024px, 1440px.
   Brand tokens below come from the current theme (custom.css).
   ========================================================================== */

:root {
	/* Brand colors */
	--ss-yellow: #fee72f;       /* main brand yellow (theme) */
	--ss-yellow-deep: #f4dd2e;  /* hover yellow (theme) */
	--ss-yellow-tint: #fff8cc;  /* light tint of the brand yellow for soft backgrounds */
	--ss-black: #000;
	--ss-ink: #1f1f1f;          /* body text (theme link color) */
	--ss-grey: #6a6c6e;         /* secondary text (theme), 5.3:1 on white */
	--ss-line: #ccc;
	--ss-white: #fff;

	/* Fonts: Jost is the font the current site loads */
	--ss-font-heading: "Jost", "Helvetica Neue", Arial, sans-serif;
	--ss-font-body: "Jost", "Helvetica Neue", Arial, sans-serif;

	/* Layout */
	--ss-container: 1240px;
	--ss-gutter: 16px;
	--ss-section-y: 56px;
	--ss-radius: 10px;
	--ss-focus: var(--ss-black);
}

@media (min-width: 768px)  { :root { --ss-gutter: 32px; --ss-section-y: 72px; } }
@media (min-width: 1024px) { :root { --ss-gutter: 40px; --ss-section-y: 88px; } }
@media (min-width: 1440px) { :root { --ss-container: 1320px; --ss-section-y: 104px; } }

/* ---------- Base ---------- */
.ss26 *,
.ss26 *::before,
.ss26 *::after { box-sizing: border-box; }

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

body.ss26 {
	margin: 0;
	background: var(--ss-white);
	color: var(--ss-ink);
	font-family: var(--ss-font-body);
	font-size: 1rem;
	line-height: 1.6;
	overflow-x: hidden;
	-webkit-font-smoothing: antialiased;
}

.ss26 img,
.ss26 video,
.ss26 picture { display: block; max-width: 100%; height: auto; }

.ss26 h1, .ss26 h2, .ss26 h3, .ss26 h4 {
	font-family: var(--ss-font-heading);
	line-height: 1.15;
	margin: 0 0 .5em;
	color: inherit;
	font-weight: 700;
	letter-spacing: -.01em;
}
.ss26 h2 { font-size: clamp(1.75rem, 1.3rem + 2vw, 2.75rem); }
.ss26 h3 { font-size: clamp(1.25rem, 1.1rem + .6vw, 1.5rem); }
.ss26 p { margin: 0 0 1em; }
.ss26 a { color: inherit; }
.ss26 ul[role="list"] { list-style: none; margin: 0; padding: 0; }

.ss26 :focus-visible {
	outline: 3px solid var(--ss-focus);
	outline-offset: 3px;
	box-shadow: none;
}

.ss-container {
	width: 100%;
	max-width: calc(var(--ss-container) + var(--ss-gutter) * 2);
	margin-inline: auto;
	padding-inline: var(--ss-gutter);
}

.ss-section { padding-block: var(--ss-section-y); }
.ss-section__head { max-width: 46rem; margin-bottom: 32px; }
.ss-section__head p { color: var(--ss-grey); font-size: 1.125rem; }
.ss-section__foot { margin: 32px 0 0; }

.ss-eyebrow {
	display: inline-block;
	margin-bottom: 12px;
	font-size: .875rem;
	font-weight: 600;
	letter-spacing: .08em;
	text-transform: uppercase;
}
.ss-lead { font-size: 1.125rem; }

.ss-sr {
	position: absolute !important;
	width: 1px; height: 1px;
	padding: 0; margin: -1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
	border: 0;
}

.ss-skip {
	position: absolute;
	left: 8px; top: -100px;
	z-index: 100;
	padding: 10px 16px;
	background: var(--ss-black);
	color: var(--ss-white) !important;
	font-weight: 600;
}
.ss-skip:focus { top: 8px; }

/* ---------- Buttons ---------- */
.ss-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 48px;
	padding: 12px 24px;
	border: 2px solid transparent;
	border-radius: 999px;
	font-family: var(--ss-font-body);
	font-size: 1rem;
	font-weight: 600;
	line-height: 1.2;
	text-align: center;
	text-decoration: none !important;
	cursor: pointer;
	transition: background-color .2s, color .2s, border-color .2s, transform .2s;
}
.ss-btn:hover { transform: translateY(-1px); }
@media (prefers-reduced-motion: reduce) { .ss-btn, .ss-btn:hover { transition: none; transform: none; } }

.ss26 .ss-btn--primary { background: var(--ss-yellow); color: var(--ss-black); border-color: var(--ss-black); }
.ss26 .ss-btn--primary:hover { background: var(--ss-yellow-deep); color: var(--ss-black); }
.ss26 .ss-btn--dark { background: var(--ss-black); color: var(--ss-white); }
.ss26 .ss-btn--dark:hover { background: var(--ss-ink); color: var(--ss-yellow); }
.ss26 .ss-btn--ghost { background: transparent; color: inherit; border-color: currentColor; }
.ss26 .ss-btn--ghost:hover { background: var(--ss-white); color: var(--ss-black); border-color: var(--ss-white); }
.ss-btn--lg { min-height: 56px; padding: 14px 32px; font-size: 1.0625rem; }
.ss-btn--block { width: 100%; }

.ss-actions { display: flex; flex-wrap: wrap; gap: 12px; }

/* ---------- Placeholders (only editors see these) ---------- */
.ss-ph {
	background: #ffe066;
	color: #000;
	outline: 2px dashed #b45309;
	padding: 0 4px;
	font-weight: 600;
	font-size: .9em;
}
.ss-ph-img,
.ss-ph-box {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	padding: 12px;
	background: repeating-linear-gradient(45deg, #f3f3f3 0 12px, #e8e8e8 12px 24px);
	border: 2px dashed #b45309;
	color: #5c3600;
	font-size: .8125rem;
	font-weight: 600;
	text-align: center;
}

/* ==========================================================================
   1. Header
   ========================================================================== */
.ss-header {
	position: relative;
	z-index: 20;
	background: var(--ss-white);   /* matches the logo video's white background */
	border-bottom: 1px solid #eee;
}
.ss-header__inner {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 8px 12px;
	min-height: 72px;
	padding-block: 6px;
}

.ss-brand { position: relative; flex: 0 0 auto; margin-right: auto; }
.ss-logo { display: block; }
.ss-logo__frame {
	position: relative;
	display: block;
	width: 120px;               /* 5:3 logo, 72px tall on phones */
	aspect-ratio: 5 / 3;
}
.ss-logo__video,
.ss-logo__static img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: contain;
}
.ss-logo__static { display: none; }

/* Reduced motion: hide the video and show the still logo. */
@media (prefers-reduced-motion: reduce) {
	.ss26 .ss-logo__video { display: none; }
	.ss26 .ss-logo__static { display: block; }
}
.ss-header__cta { order: 2; min-height: 44px; padding: 10px 18px; font-size: .9375rem; }

.ss-nav-toggle {
	order: 3;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px; height: 44px;
	padding: 0;
	border: 2px solid var(--ss-black);
	border-radius: 50%;
	background: var(--ss-white);
	cursor: pointer;
}
.ss-nav-toggle__bars,
.ss-nav-toggle__bars::before,
.ss-nav-toggle__bars::after {
	display: block;
	width: 18px; height: 2px;
	background: var(--ss-black);
	position: relative;
	content: "";
	transition: transform .2s;
}
.ss-nav-toggle__bars::before { position: absolute; top: -6px; }
.ss-nav-toggle__bars::after  { position: absolute; top: 6px; }
.ss-nav-toggle[aria-expanded="true"] .ss-nav-toggle__bars { background: transparent; }
.ss-nav-toggle[aria-expanded="true"] .ss-nav-toggle__bars::before { transform: translateY(6px) rotate(45deg); }
.ss-nav-toggle[aria-expanded="true"] .ss-nav-toggle__bars::after  { transform: translateY(-6px) rotate(-45deg); }

.ss-nav { order: 4; flex: 1 0 100%; }
.js .ss-nav { display: none; }
.js .ss-nav.is-open { display: block; }
.no-js .ss-nav-toggle { display: none; }

.ss-nav__list,
.ss-nav ul {
	list-style: none;
	margin: 0;
	padding: 4px 0 8px;
}
.ss-nav li { border-top: 1px solid #eee; }
.ss-nav a {
	display: block;
	padding: 12px 4px;
	font-size: 1.0625rem;
	font-weight: 500;
	color: var(--ss-black);
	text-decoration: none;
}
.ss-nav a:hover { text-decoration: underline !important; text-underline-offset: 4px; text-decoration-thickness: 2px; }

@media (min-width: 1024px) {
	.ss-header__inner { flex-wrap: nowrap; gap: 24px; min-height: 96px; }
	.ss-logo__frame { width: 150px; }
	.ss-brand { margin-right: 0; }
	.ss-nav-toggle { display: none; }
	.js .ss-nav, .ss-nav { display: block; order: 1; flex: 1 1 auto; }
	.ss-nav__list, .ss-nav ul { display: flex; justify-content: center; gap: 4px 28px; padding: 0; }
	.ss-nav li { border: 0; }
	.ss-nav a { padding: 8px 0; font-size: 1rem; }
	.ss-header__cta { order: 2; min-height: 48px; padding: 12px 24px; font-size: 1rem; }
}
@media (min-width: 1440px) {
	.ss-logo__frame { width: 180px; }
	.ss-nav__list, .ss-nav ul { gap: 4px 40px; }
}

/* ==========================================================================
   2. Hero (full-bleed)
   ========================================================================== */
.ss-hero {
	--ss-focus: var(--ss-yellow);
	position: relative;
	isolation: isolate;
	display: flex;
	align-items: center;
	min-height: 520px;
	padding-block: 64px;
	background: var(--ss-black);
	color: var(--ss-white);
	overflow: hidden;
}
.ss-hero:not(.has-image) {
	background:
		radial-gradient(60% 80% at 100% 0%, rgba(254, 231, 47, .28), transparent 70%),
		radial-gradient(50% 60% at 0% 100%, rgba(254, 231, 47, .18), transparent 70%),
		var(--ss-black);
}
.ss-hero--photo .ss-hero__img,
.ss-hero--photo > picture,
.ss-hero--photo > img {
	position: absolute;
	inset: 0;
	z-index: -2;
	width: 100%;
	height: 100%;
	max-width: none;
	object-fit: cover;
}
.ss-hero--photo > picture img { width: 100%; height: 100%; max-width: none; object-fit: cover; }
.ss-hero.has-image::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	/* Keeps white text above WCAG AA over any photo */
	background: linear-gradient(90deg, rgba(0,0,0,.78) 0%, rgba(0,0,0,.6) 55%, rgba(0,0,0,.35) 100%);
}
@media (max-width: 767px) {
	.ss-hero.has-image::after { background: rgba(0,0,0,.66); }
}
.ss-hero__ph {
	position: absolute; top: 12px; right: 12px; z-index: 1;
}
.ss-hero__inner { position: relative; }
.ss-hero .ss-eyebrow { color: var(--ss-yellow); }
.ss-hero__title {
	max-width: 15ch;
	font-size: clamp(2.25rem, 1.4rem + 4.2vw, 4.75rem);
	font-weight: 700;
	line-height: 1.05;
}
.ss-hero__text {
	max-width: 36rem;
	margin-bottom: 28px;
	font-size: clamp(1.0625rem, 1rem + .4vw, 1.3125rem);
	color: #f2f2f2;
}
.ss26 .ss-hero .ss-btn--ghost { color: var(--ss-white); }
.ss26 .ss-hero .ss-btn--ghost:hover { color: var(--ss-black); }

/* Version A: photo sits right of the text, so keep the headline column narrow */
.ss-hero--photo .ss-hero__img img,
.ss-hero--photo picture img { object-position: 70% 40%; }
.ss-hero--photo .ss-hero__copy { max-width: 40rem; }

/* Version B: yellow split layout with an image collage */
.ss-hero.ss-hero--collage {
	--ss-focus: var(--ss-black);
	background: var(--ss-yellow);
	color: var(--ss-black);
}
.ss-hero--collage .ss-eyebrow { color: var(--ss-black); }
.ss-hero--collage .ss-hero__text { color: var(--ss-ink); }
.ss26 .ss-hero--collage .ss-btn--primary { background: var(--ss-black); color: var(--ss-yellow); }
.ss26 .ss-hero--collage .ss-btn--primary:hover { background: var(--ss-ink); color: var(--ss-white); }
.ss26 .ss-hero--collage .ss-btn--ghost { color: var(--ss-black); border-color: var(--ss-black); }
.ss26 .ss-hero--collage .ss-btn--ghost:hover { background: var(--ss-black); color: var(--ss-yellow); }
.ss-hero--collage .ss-hero__inner { display: grid; gap: 40px; align-items: center; }
.ss-collage {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 12px;
	list-style: none;
	margin: 0;
	padding: 0;
}
.ss-collage__item { min-width: 0; }
.ss-collage__item img {
	width: 100%;
	aspect-ratio: 1 / 1;
	object-fit: cover;
	border: 4px solid var(--ss-black);
	border-radius: 14px;
	background: var(--ss-white);
	box-shadow: 6px 6px 0 var(--ss-black);
}
.ss-collage__item--1 { transform: rotate(-2.5deg); }
.ss-collage__item--2 { transform: rotate(2deg) translateY(14px); }
.ss-collage__item--3 { transform: rotate(1.5deg); }
.ss-collage__item--4 { transform: rotate(-2deg) translateY(14px); }
@media (min-width: 1024px) {
	.ss-hero--collage .ss-hero__inner { grid-template-columns: 1.05fr 1fr; gap: 64px; }
	.ss-collage { gap: 20px; }
}

@media (min-width: 768px)  { .ss-hero { min-height: 560px; } }
@media (min-width: 1024px) { .ss-hero { min-height: 640px; padding-block: 96px; } }
@media (min-width: 1440px) { .ss-hero { min-height: 720px; } }

/* ==========================================================================
   3. Offer bar
   ========================================================================== */
.ss-offer {
	background: var(--ss-yellow);
	color: var(--ss-black);
	padding-block: 18px;
}
.ss-offer__inner {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 14px;
	text-align: center;
}
.ss-offer__text { margin: 0; font-size: 1.0625rem; }
.ss-countdown { display: flex; gap: 8px; font-variant-numeric: tabular-nums; }
.ss-countdown__unit {
	display: flex;
	flex-direction: column;
	align-items: center;
	min-width: 58px;
	padding: 6px 8px;
	border-radius: 8px;
	background: var(--ss-black);
	color: var(--ss-white);
	line-height: 1.1;
}
.ss-countdown__unit b { font-size: 1.375rem; }
.ss-countdown__unit small { font-size: .6875rem; text-transform: uppercase; letter-spacing: .06em; }
.ss-countdown.is-ended { font-weight: 600; }

@media (min-width: 768px) {
	.ss-offer__inner { flex-direction: row; justify-content: center; gap: 24px; text-align: left; }
}

/* ==========================================================================
   4. Books
   ========================================================================== */
.ss-grid { display: grid; gap: 20px; }
.ss-grid--books { grid-template-columns: 1fr; margin-bottom: 48px; }
.ss-grid--books:last-child { margin-bottom: 0; }

@media (min-width: 480px)  { .ss-grid--books { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .ss-grid--books { grid-template-columns: repeat(4, 1fr); gap: 28px; } }

.ss-group-title {
	display: flex;
	align-items: center;
	gap: 12px;
	margin-bottom: 20px;
}
.ss-group-title::after { content: ""; flex: 1; height: 2px; background: var(--ss-yellow); }

.ss-card {
	display: flex;
	flex-direction: column;
	background: var(--ss-white);
	border: 1px solid #e6e6e6;
	border-radius: var(--ss-radius);
	overflow: hidden;
	transition: box-shadow .2s, transform .2s;
}
.ss-card:hover { box-shadow: 0 10px 28px rgba(0,0,0,.08); transform: translateY(-2px); }
@media (prefers-reduced-motion: reduce) { .ss-card, .ss-card:hover { transition: none; transform: none; } }

.ss-card__media {
	aspect-ratio: 1 / 1;
	padding: 16px;
	background: var(--ss-yellow-tint);
}
.ss-card__media img,
.ss-card__media .ss-ph-img { width: 100%; height: 100%; object-fit: contain; }
.ss-card__body { display: flex; flex-direction: column; flex: 1; padding: 18px; }
.ss-card__title { font-size: 1.125rem; margin-bottom: 8px; }
.ss-card__text { flex: 1; font-size: .9375rem; color: var(--ss-grey); }
.ss-price { margin: 0 0 14px; font-size: 1.25rem; font-weight: 700; color: var(--ss-black); }
.ss-price:empty { display: none; }
.ss-price--lg { font-size: 1.75rem; }

/* ==========================================================================
   5. Bundles
   ========================================================================== */
.ss-bundles { background: var(--ss-yellow-tint); }
.ss-grid--bundles { grid-template-columns: 1fr; }
@media (min-width: 768px) { .ss-grid--bundles { grid-template-columns: repeat(2, 1fr); gap: 28px; } }
.ss-bundle {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	padding: 28px;
	background: var(--ss-white);
	border: 2px solid var(--ss-black);
	border-radius: var(--ss-radius);
	box-shadow: 6px 6px 0 var(--ss-yellow);
}
.ss-bundle__title { font-size: clamp(1.5rem, 1.3rem + .8vw, 2rem); }
.ss-bundle p:not(.ss-price) { color: var(--ss-grey); }
.ss-bundle .ss-btn { margin-top: auto; }

/* ==========================================================================
   6. Reviews
   ========================================================================== */
.ss-reviews { --ss-focus: var(--ss-yellow); background: var(--ss-black); color: var(--ss-white); }
.ss-reviews .ss-section__head p { color: #d4d4d4; }
.ss-reviews__track {
	display: grid;
	grid-auto-flow: column;
	grid-auto-columns: 85%;
	gap: 16px;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	padding-bottom: 12px;
	scrollbar-color: var(--ss-yellow) transparent;
}
.ss-quote { scroll-snap-align: start; }
.ss-quote figure {
	height: 100%;
	margin: 0;
	padding: 28px 24px;
	border: 1px solid #333;
	border-radius: var(--ss-radius);
	background: #111;
}
.ss-quote blockquote { margin: 0 0 16px; }
.ss-quote blockquote p {
	margin: 0;
	font-size: 1.1875rem;
	line-height: 1.45;
}
.ss-quote blockquote p::before {
	content: "\201C";
	display: block;
	height: .55em;
	margin-bottom: 8px;
	font-size: 3.5rem;
	line-height: 1;
	color: var(--ss-yellow);
}
.ss-quote figcaption { font-weight: 600; color: var(--ss-yellow); }
.ss-quote figcaption::before { content: "— "; }

@media (min-width: 768px) {
	.ss-reviews__track { grid-auto-flow: row; grid-template-columns: repeat(2, 1fr); overflow: visible; }
}
@media (min-width: 1024px) {
	.ss-reviews__track { grid-template-columns: repeat(4, 1fr); gap: 24px; }
}

/* ==========================================================================
   7. Gallery
   ========================================================================== */
.ss-grid--gallery { grid-template-columns: repeat(2, 1fr); gap: 12px; }
.ss-grid--gallery img,
.ss-grid--gallery .ss-ph-img {
	width: 100%;
	aspect-ratio: 1 / 1;
	object-fit: cover;
	border-radius: var(--ss-radius);
}
.ss-grid--gallery figure { margin: 0; }
.ss-grid--gallery figcaption { margin-top: 8px; font-size: .875rem; font-weight: 500; color: var(--ss-grey); }
@media (min-width: 768px)  { .ss-grid--gallery { grid-template-columns: repeat(3, 1fr); gap: 20px; } }
@media (min-width: 1024px) { .ss-grid--gallery { grid-template-columns: repeat(4, 1fr); gap: 24px; } }

/* ==========================================================================
   8. App preview
   ========================================================================== */
.ss-app { background: var(--ss-yellow); color: var(--ss-black); }
.ss-app__inner { display: grid; gap: 40px; align-items: center; }
.ss-app__inner > *, .ss-newsletter__inner > * { min-width: 0; }
.ss-app__copy { max-width: 36rem; }
.ss-app__screens {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 12px;
}
.ss-app__screens li.is-logo { grid-column: 1 / -1; display: flex; align-items: center; justify-content: center; padding: 20px; background: var(--ss-white); border: 3px solid var(--ss-black); border-radius: 18px; }
.ss-app__screens li.is-logo img { width: min(100%, 340px); height: auto; aspect-ratio: auto; border: 0; border-radius: 0; }
.ss-app__screens img {
	width: 100%;
	aspect-ratio: 1 / 1;
	object-fit: cover;
	border: 3px solid var(--ss-black);
	border-radius: 18px;
	background: var(--ss-white);
}
@media (min-width: 1024px) { .ss-app__inner { grid-template-columns: 1.1fr 1fr; gap: 64px; } }

/* ==========================================================================
   9. Instagram strip
   ========================================================================== */
.ss-insta__strip {
	display: grid;
	grid-auto-flow: column;
	grid-auto-columns: 45%;
	gap: 8px;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	padding-inline: var(--ss-gutter);
}
.ss-insta__strip li { scroll-snap-align: start; }
.ss-insta__strip a { display: block; position: relative; overflow: hidden; border-radius: 6px; }
.ss-insta__strip img,
.ss-insta__strip .ss-ph-img {
	width: 100%;
	aspect-ratio: 1 / 1;
	object-fit: cover;
	transition: transform .3s;
}
.ss-insta__strip a:hover img { transform: scale(1.04); }
@media (prefers-reduced-motion: reduce) { .ss-insta__strip a:hover img { transform: none; } }

@media (min-width: 768px) {
	.ss-insta__strip {
		grid-auto-flow: row;
		grid-template-columns: repeat(4, 1fr);
		overflow: visible;
		padding-inline: 0;
	}
}
@media (min-width: 1440px) { .ss-insta__strip { grid-template-columns: repeat(8, 1fr); } }

/* ==========================================================================
   10. Newsletter
   ========================================================================== */
.ss-newsletter { --ss-focus: var(--ss-yellow); background: var(--ss-black); color: var(--ss-white); }
.ss-newsletter__inner { display: grid; gap: 24px; align-items: center; }
@media (min-width: 1024px) { .ss-newsletter__inner { grid-template-columns: 1fr 1fr; gap: 64px; } }

/* Contact Form 7 styling inside signup blocks */
.ss-signup .wpcf7 form { display: block; }
.ss-signup .wpcf7 form > p,
.ss-signup .wpcf7-form > div:not(.wpcf7-response-output) { margin: 0; }
.ss-signup .ss-form,
.ss-signup .wpcf7-form {
	display: flex !important;
	flex-direction: column;
	gap: 12px;
}
.ss-signup label { display: block; font-weight: 600; margin-bottom: 4px; }
.ss-signup input[type="email"],
.ss-signup input[type="text"] {
	width: 100% !important;
	min-height: 52px;
	padding: 12px 18px;
	border: 2px solid var(--ss-black);
	border-radius: 999px;
	background: var(--ss-white);
	color: var(--ss-black);
	font: inherit;
}
.ss-signup input::placeholder { color: #595959; }
.ss-signup input[type="submit"],
.ss-signup button[type="submit"] {
	width: 100% !important;
	min-height: 52px;
	padding: 12px 28px;
	border: 2px solid var(--ss-black) !important;
	border-radius: 999px;
	background: var(--ss-black) !important;
	color: var(--ss-white) !important;
	font: inherit;
	font-weight: 600;
	cursor: pointer;
}
.ss-newsletter .ss-signup input[type="submit"],
.ss-newsletter .ss-signup button[type="submit"] {
	background: var(--ss-yellow) !important;
	color: var(--ss-black) !important;
}
.ss-signup .wpcf7-spinner { margin: 0 auto; }
.ss-signup .wpcf7-response-output { margin: 8px 0 0 !important; border-radius: 8px; }
.ss-signup .wpcf7-not-valid-tip { color: #b00020; font-size: .875rem; }
.ss-newsletter .wpcf7-not-valid-tip { color: #ffb4b4; }

@media (min-width: 768px) {
	.ss-signup .ss-form,
	.ss-signup .wpcf7-form { flex-direction: row; flex-wrap: wrap; align-items: flex-start; }
	.ss-signup .wpcf7-form-control-wrap { flex: 1 1 260px; display: block; }
	.ss-signup input[type="submit"],
	.ss-signup button[type="submit"] { width: auto !important; }
	.ss-signup .wpcf7-response-output { flex-basis: 100%; }
}

/* ==========================================================================
   11. Footer
   ========================================================================== */
.ss-footer { background: var(--ss-white); border-top: 4px solid var(--ss-yellow); padding-block: 48px 24px; }
.ss-footer__inner { display: grid; gap: 24px; align-items: start; }
.ss-footer__logo { display: block; width: 160px; }
.ss-footer__logo img { width: 100%; height: auto; }
.ss-footer__contact { font-style: normal; line-height: 1.7; }
.ss-footer__contact a { text-decoration: underline !important; text-underline-offset: 3px; }
.ss-footer__social { display: flex; flex-wrap: wrap; gap: 8px 20px; }
.ss-footer__social a {
	display: inline-block;
	padding: 8px 0;
	font-weight: 600;
	text-decoration: underline !important;
	text-underline-offset: 4px;
	text-decoration-color: var(--ss-yellow-deep);
	text-decoration-thickness: 3px;
}
.ss-footer__copy {
	margin: 32px 0 0;
	padding-top: 16px;
	border-top: 1px solid #eee;
	font-size: .875rem;
	color: var(--ss-grey);
}
@media (min-width: 768px) {
	.ss-footer__inner { grid-template-columns: auto 1fr auto; gap: 40px; align-items: center; }
}

/* Grid children may shrink below their content width (prevents overflow on small phones). */
.ss-grid > li,
.ss-app__screens > li { min-width: 0; }
.ss-ph-img { overflow-wrap: anywhere; }