/*
 * Red Soil Stack - theme.css
 *
 * Only styles that theme.json cannot express live here.
 * Colors always come from theme.json presets (var(--wp--preset--color--*))
 * so changing a color in theme.json updates the whole site.
 *
 * Sections:
 *   1. Accessibility (focus ring, reduced motion)
 *   2. Display typography (wide headline)
 *   3. Section transitions (no stepped bands)
 *   4. Header
 *   5. Codes (QR/NFC-style labels such as LOC-000123)
 */

/* ---------------------------------------------------------------
 * 1. Accessibility
 * ------------------------------------------------------------- */

/* Clear, high-contrast keyboard focus on every interactive element. */
:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
	outline: 3px solid var(--wp--preset--color--signal);
	outline-offset: 3px;
	border-radius: 2px;
}

/* Respect users who ask the system for less motion. */
@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
		scroll-behavior: auto !important;
	}
}

/* ---------------------------------------------------------------
 * 2. Display typography
 * Archivo is a variable font with a width axis (62%-125%).
 * Headlines use the expanded width for an engineered, industrial feel;
 * body text stays at normal width for readability.
 * ------------------------------------------------------------- */
.rss-display {
	font-stretch: 118%;
	font-weight: 800;
	line-height: 0.98;
	letter-spacing: -0.02em;
	max-width: 16ch;
	text-wrap: balance;
}

h1, h2 {
	font-stretch: 110%;
	text-wrap: balance;
}

/* Keep paragraphs to a comfortable line length (under ~75 characters). */
.rss-lede {
	max-width: 38rem;
	text-wrap: pretty;
}

/* ---------------------------------------------------------------
 * 3. Section transitions (v0.5.1)
 * The stepped multi-color "strata" bands were removed (owner feedback:
 * they looked like steps). Sections now change color directly, never more
 * than two tones side by side: light sections alternate Bone and White,
 * and dark sections (featured product, footer) use Deep soil.
 * ------------------------------------------------------------- */

/* ---------------------------------------------------------------
 * 4. Header
 * ------------------------------------------------------------- */
.rss-header .wp-block-site-title a {
	text-decoration: none;
	font-stretch: 115%;
	font-weight: 800;
	letter-spacing: -0.01em;
	color: var(--wp--preset--color--red-soil);
}

.rss-header .wp-block-navigation a {
	text-decoration: none;
}

.rss-header .wp-block-navigation a:hover {
	text-decoration: underline;
	text-underline-offset: 0.3em;
}

/* ---------------------------------------------------------------
 * 5. Codes
 * Mirrors the label codes printed by our inventory app
 * (INV / LOC / CNT / ITM-xxxxxx). Used sparingly, only where the
 * content is an actual code.
 * ------------------------------------------------------------- */
.rss-code {
	font-family: var(--wp--preset--font-family--plex-mono);
	font-size: var(--wp--preset--font-size--small);
	letter-spacing: 0.02em;
}

/* Wordmark used in the footer until the final logo is approved. */
.rss-wordmark {
	font-stretch: 115%;
	font-weight: 800;
	letter-spacing: -0.01em;
}

/* ---------------------------------------------------------------
 * 6. Home sections
 * ------------------------------------------------------------- */

/* Service list: each service is separated by a thin clay rule so the
   list reads like stacked layers, matching the strata idea. */
.rss-service-list > h3 {
	margin-top: 0;
	padding-top: var(--wp--preset--spacing--30);
	border-top: 1px solid var(--wp--preset--color--clay);
}

.rss-service-list > h3:first-child {
	padding-top: 0;
	border-top: 0;
}

.rss-service-list > h3 a {
	color: var(--wp--preset--color--charcoal);
	text-decoration: none;
}

.rss-service-list > h3 a:hover {
	color: var(--wp--preset--color--red-soil);
	text-decoration: underline;
}

.rss-service-list > p {
	margin-top: 0.4rem;
	color: var(--wp--preset--color--stone);
}

/* Outline buttons: keep text and border in brand teal. */
.wp-block-button.is-style-outline > .wp-block-button__link {
	color: var(--wp--preset--color--signal);
	border: 2px solid currentColor;
	background: transparent;
}

.wp-block-button.is-style-outline > .wp-block-button__link:hover {
	color: var(--wp--preset--color--white);
	background: var(--wp--preset--color--signal);
}

/* ---------------------------------------------------------------
 * 7. Hero logo mark (animated)
 * The logo's three slabs drop in from above, bottom-up: soil first,
 * then cream, then teal, "building on solid ground". Runs once per
 * page load (~1.2 s). Visitors who prefer reduced motion see it still.
 * Hover (or keyboard focus inside the hero) lifts the top teal slab.
 * Units inside the SVG are its own grid units (1 unit ~ 9 px at full size).
 * ------------------------------------------------------------- */
.rss-hero-mark {
	width: 100%;
	max-width: 22rem;
	margin-inline: auto;
}

.rss-hero-mark svg {
	display: block;
	width: 100%;
	height: auto;
	overflow: visible;
}

.rss-slab {
	transition: transform 0.35s cubic-bezier(0.2, 0.8, 0.2, 1);
}

.rss-hero:hover .rss-slab-3,
.rss-hero:focus-within .rss-slab-3 {
	transform: translateY(-1.5px);
}

@media (prefers-reduced-motion: no-preference) {
	.rss-slab {
		animation: rss-drop 0.6s cubic-bezier(0.3, 1.35, 0.5, 1) both;
	}
	.rss-slab-1 { animation-delay: 0.15s; }
	.rss-slab-2 { animation-delay: 0.4s; }
	.rss-slab-3 { animation-delay: 0.65s; }
}

@keyframes rss-drop {
	from { transform: translateY(-14px); opacity: 0; }
	to   { transform: none; opacity: 1; }
}

/* Phones and small tablets: WordPress stacks columns below 782px.
   Show the mark first, smaller, above the headline. */
@media (max-width: 781px) {
	.rss-hero-mark-col {
		order: -1;
	}
	.rss-hero-mark {
		max-width: 9rem;
		margin-inline: 0;
	}
}

/* ---------------------------------------------------------------
 * 8. Content components (v0.4.0)
 * ------------------------------------------------------------- */

/* "Find anything in seconds" card: frames the real path from the app
   like a phone search result, so it doesn't float without context. */
.rss-phone-card {
	display: block;
	max-width: 26rem;
	margin-top: var(--wp--preset--spacing--40);
	padding: 1rem 1.25rem;
	background: var(--wp--preset--color--white);
	border: 1px solid var(--wp--preset--color--dust);
	border-left: 6px solid var(--wp--preset--color--clay);
	border-radius: 10px;
	color: var(--wp--preset--color--charcoal);
	text-decoration: none;
	box-shadow: 0 1px 0 var(--wp--preset--color--dust);
}
.rss-phone-card > * { display: block; margin: 0; }
.rss-phone-card-label { font-weight: 700; font-size: var(--wp--preset--font-size--small); color: var(--wp--preset--color--stone); }
.rss-phone-card-path { margin-top: 0.35rem !important; color: var(--wp--preset--color--red-soil); font-size: 1rem; }
.rss-phone-card-note { margin-top: 0.35rem !important; font-size: var(--wp--preset--font-size--small); color: var(--wp--preset--color--stone); }
a.rss-phone-card-link:hover { border-left-color: var(--wp--preset--color--signal); }

/* Small label above a page title (e.g. the app name). */
.rss-kicker { font-weight: 700; margin-bottom: 0; }

/* Cards: products list and editions. */
.rss-card {
	background: var(--wp--preset--color--white);
	border: 1px solid var(--wp--preset--color--dust);
	border-radius: 12px;
	padding: var(--wp--preset--spacing--30);
	height: 100%;
}
.rss-card > :first-child { margin-top: 0; }
.rss-card-kicker, .rss-card-meta { font-size: var(--wp--preset--font-size--small); color: var(--wp--preset--color--stone); }
.rss-card-title { margin: 0.25rem 0 0.5rem; }
.rss-card-title a { color: var(--wp--preset--color--charcoal); text-decoration: none; }
.rss-card-title a:hover { color: var(--wp--preset--color--red-soil); text-decoration: underline; }

/* Lists with a teal tick and numbered steps. */
.rss-ticks { list-style: none; padding-left: 0; }
.rss-ticks li { position: relative; padding-left: 1.6rem; margin: 0.4rem 0; }
.rss-ticks li::before {
	content: ""; position: absolute; left: 0.2rem; top: 0.45em;
	width: 0.7rem; height: 0.4rem;
	border-left: 3px solid var(--wp--preset--color--signal);
	border-bottom: 3px solid var(--wp--preset--color--signal);
	transform: rotate(-45deg);
}
.rss-steps { padding-left: 1.2rem; }
.rss-steps li { margin: 0.6rem 0; }

/* Services page: each service separated by a clay rule (strata idea). */
.rss-svc-list .rss-svc-title {
	padding-top: var(--wp--preset--spacing--40);
	border-top: 1px solid var(--wp--preset--color--clay);
	scroll-margin-top: 1rem;
}
.rss-svc-list .rss-svc-title:first-child { border-top: 0; padding-top: 0; }

/* Tables (privacy policy permissions). */
.rss-table table { border-collapse: collapse; width: 100%; font-size: var(--wp--preset--font-size--small); }
.rss-table th, .rss-table td { border: 1px solid var(--wp--preset--color--dust); padding: 0.6rem; text-align: left; vertical-align: top; }
.rss-table th { background: var(--wp--preset--color--white); }
.rss-table { overflow-x: auto; }

/* FAQ (details block). */
.wp-block-details { border-top: 1px solid var(--wp--preset--color--dust); padding: 0.9rem 0; }
.wp-block-details summary { font-weight: 700; cursor: pointer; }

/* ---------------------------------------------------------------
 * 9. Contact form ([rss_contact_form])
 * ------------------------------------------------------------- */
.rss-form { display: grid; gap: 0.25rem; }
.rss-form-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); column-gap: 1rem; }
.rss-field { margin: 0 0 0.9rem; }
.rss-field label, .rss-field legend { display: block; font-weight: 600; margin-bottom: 0.3rem; }
.rss-form input[type="text"], .rss-form input[type="email"], .rss-form input[type="tel"],
.rss-form select, .rss-form textarea {
	width: 100%;
	box-sizing: border-box;
	padding: 0.7rem 0.8rem;
	font: inherit;
	color: var(--wp--preset--color--charcoal);
	background: var(--wp--preset--color--white);
	border: 1px solid var(--wp--preset--color--stone);
	border-radius: 6px;
}
.rss-checks { border: 0; padding: 0; }
.rss-checks label { display: inline-flex; gap: 0.4rem; align-items: center; font-weight: 400; margin-right: 1.2rem; }
.rss-form-note { font-size: var(--wp--preset--font-size--small); color: var(--wp--preset--color--stone); }
.rss-form button { cursor: pointer; border: 0; }
/* Honeypot: off-screen, not display:none (some bots skip hidden fields). */
.rss-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.rss-notice { padding: 1rem 1.25rem; border-radius: 8px; margin-bottom: 1rem; }
.rss-notice p { margin: 0; }
.rss-notice-ok { background: #E3F2F0; border-left: 6px solid var(--wp--preset--color--signal); }
.rss-notice-error { background: #F7E4E0; border-left: 6px solid var(--wp--preset--color--red-soil); }

/* Alignment of short intro text (v0.4.4, replaces the v0.4.1 fix).
   WordPress centers any block narrower than its section. Intro paragraphs
   (.rss-lede, max ~38rem) and display headlines (.rss-display, 16ch) are
   narrower on purpose, so they would float to the middle. This lines them
   up with the left edge of the section's content column instead:
   left margin = (available width - content width) / 2, never below 0.
   Content column: 76rem wide (reading pages use the same left edge,
   see .rss-narrow below). */
.is-layout-constrained > .rss-lede,
.is-layout-constrained > .rss-display,
.is-layout-constrained > .rss-cta-title {
	margin-left: max(0px, calc((100% - var(--rss-content-size, 76rem)) / 2)) !important;
	margin-right: auto !important;
}

/* Reading pages (.rss-narrow: privacy policies, support, 404, plain pages):
   text keeps a comfortable 44rem line length but starts at the same left
   edge as the logo and the other pages, so nothing looks off-center. */
.rss-narrow.is-layout-constrained > :not(.alignfull) {
	max-width: 44rem;
	margin-left: max(0px, calc((100% - 76rem) / 2)) !important;
	margin-right: auto !important;
}

/* Padding and borders are included in the width of cards, so a card set to
   the content width doesn't stick out past the column (v0.4.4). */
.rss-card,
.rss-phone-card {
	box-sizing: border-box;
}

/* ---------------------------------------------------------------
 * 10. Home sections (v0.5.0)
 * ------------------------------------------------------------- */

/* Dark band (featured product): headings, links and secondary buttons
   switch to light colors so contrast stays above WCAG AA. */
.rss-dark h1, .rss-dark h2, .rss-dark h3 { color: var(--wp--preset--color--bone); }
.rss-dark a:not(.wp-element-button):not(.rss-phone-card) { color: var(--wp--preset--color--dust); }
.rss-dark .rss-ticks li::before {
	border-left-color: var(--wp--preset--color--signal-light);
	border-bottom-color: var(--wp--preset--color--signal-light);
}
.rss-dark .wp-block-button.is-style-outline > .wp-block-button__link {
	color: var(--wp--preset--color--bone);
	border-color: var(--wp--preset--color--bone);
}
.rss-dark .wp-block-button.is-style-outline > .wp-block-button__link:hover {
	color: var(--wp--preset--color--deep-soil);
	background: var(--wp--preset--color--bone);
}
.rss-dark .wp-block-button:not(.is-style-outline) > .wp-block-button__link:hover {
	background: var(--wp--preset--color--signal-light);
	color: var(--wp--preset--color--deep-soil);
}
.rss-feature .rss-phone-card { margin-top: 0; }

/* Why us: each point sits on a thin clay rule, like a soil layer. */
.rss-point {
	border-top: 3px solid var(--wp--preset--color--clay);
	padding-top: var(--wp--preset--spacing--20);
}
.rss-point h3 { margin-top: 0; }
.rss-point p { color: var(--wp--preset--color--stone); }

/* Industry cards: equal height inside the grid. */
.rss-industries > .rss-card { height: auto; }
.rss-industry .rss-card-title { margin-top: 0; }

/* Closing call to action: large headline, left aligned. */
.rss-cta-title {
	font-size: var(--wp--preset--font-size--x-large);
	font-stretch: 110%;
	max-width: 20ch;
}

/* ---------------------------------------------------------------
 * 11. EZBin pages: screenshot slots, feature blocks, guide (v0.7.0)
 * ------------------------------------------------------------- */

/* App name with its icon above the page title. */
.rss-app-kicker {
	display: flex;
	align-items: center;
	gap: 0.6rem;
	font-weight: 700;
	font-size: var(--wp--preset--font-size--medium);
}
.rss-app-kicker img { width: 44px; height: 44px; border-radius: 11px; }

/* Screenshot slot: phone-only PNG with a transparent background, so it sits
   directly on the section color. Height is capped so a tall phone never
   dominates the text next to it. */
.rss-screen { margin: 0 auto; text-align: center; }
.rss-screen img { width: auto; max-width: 100%; height: auto; }
.rss-screen-large img { max-height: 560px; }
.rss-screen-small img { max-height: 420px; }

/* Placeholder until the PNG arrives: a phone-shaped outline with the file
   name, so the layout already has its final proportions. */
.rss-screen-placeholder .rss-screen-frame {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 0.4rem;
	margin: 0 auto;
	aspect-ratio: 9 / 19;
	border: 2px dashed var(--wp--preset--color--clay);
	border-radius: 28px;
	background: color-mix(in srgb, var(--wp--preset--color--dust) 35%, transparent);
	color: var(--wp--preset--color--stone);
	text-align: center;
	padding: 1rem;
	box-sizing: border-box;
}
.rss-screen-large .rss-screen-frame { width: min(100%, 250px); }
.rss-screen-small .rss-screen-frame { width: min(100%, 190px); }
.rss-screen-name { font-family: var(--wp--preset--font-family--plex-mono); font-size: 0.8rem; color: var(--wp--preset--color--red-soil); word-break: break-all; }
.rss-screen-hint { font-size: var(--wp--preset--font-size--small); }

/* Product page feature blocks: text and screenshot side by side, swapping
   sides on every other block (desktop). On phones the text comes first. */
.rss-block { align-items: center; margin-block: var(--wp--preset--spacing--40) !important; }
.rss-feature-title { margin-top: 0; font-size: var(--wp--preset--font-size--large); }
.rss-more { font-weight: 600; }
@media (max-width: 781px) {
	.rss-block-flip > .wp-block-column:first-child { order: 2; }
}

/* Guide: in-page index and one row per section. */
.rss-toc ol {
	columns: 2 14rem;
	column-gap: 2rem;
	padding-left: 1.2rem;
	margin: var(--wp--preset--spacing--30) 0 0;
}
.rss-toc li { margin: 0.25rem 0; break-inside: avoid; }
.rss-guide .rss-guide-title {
	padding-top: var(--wp--preset--spacing--40);
	border-top: 1px solid var(--wp--preset--color--dust);
	scroll-margin-top: 1rem;
	font-size: var(--wp--preset--font-size--large);
}
.rss-guide > .rss-guide-title:first-child,
.rss-guide > .rss-guide-row:first-child .rss-guide-title { border-top: 0; padding-top: 0; }
.rss-guide-row { align-items: flex-start; }
.rss-guide-row > .wp-block-column:last-child { display: flex; flex-wrap: wrap; gap: 1rem; justify-content: center; }
.rss-guide p { max-width: 42rem; }
/* Sections without a screenshot: keep the 42rem line length but start at the
   content column's left edge (same alignment rule as .rss-lede). */
.rss-guide.is-layout-constrained > p {
	margin-left: max(0px, calc((100% - 76rem) / 2)) !important;
	margin-right: auto !important;
}

/* ---------------------------------------------------------------
 * 12. Rotating headline (v0.7.1) - see assets/js/rotate.js
 * "Can't find it in the van / garage / attic / stockroom / warehouse?"
 * With reduced motion: "Can't find it? EZBin can." (static).
 * ------------------------------------------------------------- */

/* Text for screen readers only (visually hidden, still read aloud). */
.rss-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;
}

.rss-rotate,
.rss-rotate-accent { color: var(--wp--preset--color--red-soil); }
.rss-dark .rss-rotate,
.rss-dark .rss-rotate-accent { color: var(--wp--preset--color--signal-light); }

.rss-rotate {
	display: inline-block;
	transition: opacity 0.35s ease, transform 0.35s ease;
}
.rss-rotate.is-out { opacity: 0; transform: translateY(-0.15em); }

.rss-rot-static { display: none; }
@media (prefers-reduced-motion: reduce) {
	.rss-rot-anim { display: none; }
	.rss-rot-static { display: inline; }
}

/* ---------------------------------------------------------------
 * 13. Free / Pro (v0.8.0)
 * ------------------------------------------------------------- */

/* Small "Pro" tag next to features that need EZBin Pro. */
.rss-pro {
	display: inline-block;
	margin-left: 0.4em;
	padding: 0.15em 0.55em;
	border-radius: 999px;
	background: var(--wp--preset--color--signal);
	color: var(--wp--preset--color--white);
	font-size: 0.5em;
	font-weight: 700;
	letter-spacing: 0.02em;
	vertical-align: 0.35em;
	line-height: 1.4;
}
h3 .rss-pro { font-size: 0.6em; }

/* The Pro card gets a teal border so the paid option is easy to spot. */
.rss-card-pro { border: 2px solid var(--wp--preset--color--signal); }

/* ---------------------------------------------------------------
 * 14. Booking forms (v0.9.0)
 * Long answers (preferred times, checkboxes, message) span the full width.
 * ------------------------------------------------------------- */
.rss-form-grid > .rss-field-wide { grid-column: 1 / -1; }
.rss-form-grid > .rss-checks { margin: 0 0 0.9rem; }

/* ---------------------------------------------------------------
 * 15. Real photos next to screenshots (v0.10.0)
 * Jorge's photos sit behind, the phone in front of the lower corner,
 * never inside the phone frame. Without the photo, only the phone shows.
 * ------------------------------------------------------------- */
.rss-photo { margin: 0; }
.rss-photo img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 4 / 3;
	object-fit: cover;
	border-radius: 14px;
}

.rss-pair {
	position: relative;
	width: 100%;
	max-width: 30rem;
	margin-inline: auto;
	padding-bottom: 2.5rem;
}
.rss-pair > .rss-photo { width: 78%; }
.rss-pair > .rss-screen {
	position: absolute;
	right: 0;
	bottom: 0;
	width: 38%;
	margin: 0;
}
.rss-pair > .rss-screen img { max-height: none; width: 100%; filter: drop-shadow(0 10px 18px rgba(31, 28, 26, 0.28)); }
.rss-pair > .rss-screen-placeholder .rss-screen-frame { width: 100%; }

/* Photo-only placeholder until the photo arrives (e.g. NFC tags). */
.rss-photo-placeholder .rss-photo-frame {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 0.4rem;
	width: min(100%, 22rem);
	margin: 0 auto;
	aspect-ratio: 4 / 3;
	border: 2px dashed var(--wp--preset--color--clay);
	border-radius: 14px;
	background: color-mix(in srgb, var(--wp--preset--color--dust) 35%, transparent);
	color: var(--wp--preset--color--stone);
	box-sizing: border-box;
}

/* Guide rows with two screenshots: keep both phones side by side. */
.rss-guide-row > .wp-block-column:last-child > .rss-screen { flex: 0 1 46%; }

/* ---------------------------------------------------------------
 * 16. Screenshot sizing fix (v0.11.0)
 * Each phone gets a fixed width instead of depending on the image's own
 * size, so it can never collapse to zero inside a flex column (Move,
 * Activity and Several inventories showed no image on Jorge's phone).
 * ------------------------------------------------------------- */
.rss-screen-large { width: min(100%, 270px); }
.rss-screen-small { width: min(100%, 210px); }
.rss-screen img { display: block; width: 100%; height: auto; max-height: none; }
.rss-guide-row > .wp-block-column:last-child > .rss-screen { flex: 0 1 210px; }
.rss-pair > .rss-screen { width: 38%; }

/* ---------------------------------------------------------------
 * 17. Highlights band on /apps/inventory/ (v0.11.0)
 * Dark band, one card per highlight: phone (+ real photo when it lands),
 * title, one line. Phones: horizontal swipe with snap. Desktop: 3 x 2 grid.
 * Each card links to its guide section.
 * ------------------------------------------------------------- */
.rss-highlights {
	list-style: none;
	margin: var(--wp--preset--spacing--30) 0 0;
	padding: 0;
	display: grid;
	grid-auto-flow: column;
	grid-auto-columns: minmax(15rem, 78%);
	gap: 1rem;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	-webkit-overflow-scrolling: touch;
	padding-bottom: 0.75rem;
}
.rss-hl { scroll-snap-align: start; }
@media (min-width: 900px) {
	.rss-highlights {
		grid-auto-flow: row;
		grid-template-columns: repeat(3, 1fr);
		grid-auto-columns: auto;
		overflow: visible;
	}
}
.rss-hl-link {
	display: flex;
	flex-direction: column;
	height: 100%;
	padding: 1.25rem;
	border-radius: 16px;
	background: color-mix(in srgb, var(--wp--preset--color--bone) 8%, transparent);
	border: 1px solid color-mix(in srgb, var(--wp--preset--color--bone) 18%, transparent);
	text-decoration: none;
	color: var(--wp--preset--color--bone);
	box-sizing: border-box;
	transition: border-color 0.2s ease, transform 0.2s ease;
}
.rss-hl-link:hover,
.rss-hl-link:focus-visible {
	border-color: var(--wp--preset--color--signal-light);
	transform: translateY(-2px);
}
.rss-dark .rss-hl-link { color: var(--wp--preset--color--bone); }
.rss-hl-visual {
	display: flex;
	justify-content: center;
	align-items: flex-end;
	gap: 0.6rem;
	min-height: 300px;
	margin-bottom: 1rem;
}
.rss-hl-visual .rss-screen-small { width: min(100%, 170px); margin: 0; }
.rss-hl-visual .rss-screen-small + .rss-screen-small { width: min(46%, 150px); }
.rss-hl-visual .rss-pair { max-width: 100%; }
.rss-hl-title { margin: 0 0 0.35rem; font-size: var(--wp--preset--font-size--medium); color: var(--wp--preset--color--bone); }
.rss-hl-line { margin: 0; color: var(--wp--preset--color--dust); }
@media (prefers-reduced-motion: reduce) {
	.rss-hl-link { transition: none; }
	.rss-hl-link:hover { transform: none; }
}

/* ---------------------------------------------------------------
 * 18. Services: audiences and principles (v0.12.0)
 * ------------------------------------------------------------- */
.rss-aud .rss-card-title { margin-top: 0; scroll-margin-top: 1rem; }
.rss-aud-pain { color: var(--wp--preset--color--charcoal); font-size: var(--wp--preset--font-size--medium); line-height: 1.4; }
.rss-aud .rss-ticks { margin-bottom: 0; }
.rss-principles { margin-top: var(--wp--preset--spacing--40); }
.rss-section-title { margin-bottom: var(--wp--preset--spacing--30); }

/* ---------------------------------------------------------------
 * 19. Ways to reach us + live chat button (v0.13.0)
 * ------------------------------------------------------------- */

/* "Talk to a real person": phone, email, chat, form. */
.rss-reach { margin: var(--wp--preset--spacing--30) 0; }
.rss-reach-title { font-weight: 700; margin: 0 0 0.6rem; }
.rss-reach-list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(12.5rem, 1fr));
	gap: 0.6rem;
}
.rss-reach-opt {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	padding: 0.8rem 0.9rem;
	border-radius: 12px;
	background: var(--wp--preset--color--white);
	border: 1px solid var(--wp--preset--color--dust);
	color: var(--wp--preset--color--charcoal);
	text-decoration: none;
	transition: border-color 0.2s ease;
}
.rss-reach-opt:hover,
.rss-reach-opt:focus-visible { border-color: var(--wp--preset--color--signal); }
.rss-reach-icon {
	flex: 0 0 40px;
	height: 40px;
	display: grid;
	place-items: center;
	border-radius: 10px;
	background: var(--wp--preset--color--signal);
	color: var(--wp--preset--color--white);
}
.rss-reach-text { display: flex; flex-direction: column; line-height: 1.3; min-width: 0; }
.rss-reach-text span { font-size: var(--wp--preset--font-size--small); color: var(--wp--preset--color--stone); overflow-wrap: anywhere; }

/* While the chat is switched off (no tawk.to IDs), hide the chat card. */
.rss-chat-off .rss-reach-chat { display: none; }

/* Floating chat button (brand teal instead of tawk.to's default bubble).
   Hidden by JS once the tawk.to widget has loaded and shows its own. */
.rss-chat-btn {
	position: fixed;
	right: clamp(1rem, 3vw, 1.75rem);
	bottom: clamp(1rem, 3vw, 1.75rem);
	z-index: 999;
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	padding: 0.85rem 1.15rem;
	border: 0;
	border-radius: 999px;
	background: var(--wp--preset--color--signal);
	color: var(--wp--preset--color--white);
	font: inherit;
	font-weight: 700;
	box-shadow: 0 8px 24px rgba(31, 28, 26, 0.28);
	cursor: pointer;
	transition: transform 0.2s ease, background 0.2s ease;
}
.rss-chat-btn:hover { background: var(--wp--preset--color--deep-soil); transform: translateY(-2px); }
.rss-chat-btn[hidden] { display: none; }
@media (prefers-reduced-motion: reduce) {
	.rss-chat-btn, .rss-reach-opt { transition: none; }
	.rss-chat-btn:hover { transform: none; }
}

/* ---------------------------------------------------------------
 * 20. Form layout fix (v0.13.1) - all forms (contact, booking, support)
 * Exactly two columns on tablets and computers, one on phones. Fields
 * line up at the bottom even when a label wraps to two lines, and inputs
 * and selects share one height. Verified with tools/visual-test.js.
 * ------------------------------------------------------------- */
.rss-form-grid {
	grid-template-columns: repeat(2, minmax(0, 1fr));
	column-gap: 1rem;
	align-items: end;
}
@media (max-width: 600px) {
	.rss-form-grid { grid-template-columns: 1fr; }
}
.rss-form input[type="text"],
.rss-form input[type="email"],
.rss-form input[type="tel"],
.rss-form select {
	height: 2.9rem;
	line-height: 1.2;
}
.rss-form select { padding-top: 0; padding-bottom: 0; }

/* ---------------------------------------------------------------
 * 21. Ampersand fix (v0.14.0)
 * Archivo draws "&" in a decorative form that reads like another symbol
 * (Jorge). Only that one character is drawn with Roboto (the logo font):
 * a 5 KB font with just "&", limited by unicode-range, listed before
 * Archivo. Set on body so it overrides WordPress's preset variable.
 * (Doing this in theme.json doesn't work: WordPress renames all the
 * Archivo faces to the first family name in the list.)
 * ------------------------------------------------------------- */
@font-face {
	font-family: "RSS Amp";
	src: url("../fonts/rss-amp-roboto.woff2") format("woff2");
	font-weight: 100 900;
	font-style: normal;
	font-display: swap;
	unicode-range: U+0026;
}
body {
	--wp--preset--font-family--archivo: "RSS Amp", Archivo, "Helvetica Neue", Arial, sans-serif;
}

/* ---------------------------------------------------------------
 * 22. Support hours + everyday uses (v0.14.0)
 * ------------------------------------------------------------- */
.rss-reach-hours { margin: 0 0 0.75rem; font-size: var(--wp--preset--font-size--small); color: var(--wp--preset--color--stone); }
.rss-hours { font-size: var(--wp--preset--font-size--small); color: var(--wp--preset--color--dust); }

/* "Made for everyday life": six short use cases in a responsive grid. */
.rss-uses {
	list-style: none;
	margin: var(--wp--preset--spacing--30) 0 0;
	padding: 0;
	display: grid;
	grid-template-columns: 1fr;
	gap: 1rem;
}
/* Six cards: 2 x 3 on tablets, 3 x 2 on computers (never a lonely row). */
@media (min-width: 600px) { .rss-uses { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .rss-uses { grid-template-columns: repeat(3, 1fr); } }
.rss-use {
	padding: 1.1rem 1.2rem;
	border-radius: 12px;
	background: var(--wp--preset--color--white);
	border: 1px solid var(--wp--preset--color--dust);
	border-top: 4px solid var(--wp--preset--color--clay);
}
.rss-use-title { margin: 0 0 0.35rem; font-size: var(--wp--preset--font-size--medium); }
.rss-use p { margin: 0; color: var(--wp--preset--color--stone); }

/* ---------------------------------------------------------------
 * 23. Equal-height contact cards (v0.15.2)
 * Cards in the same row share one height, whatever their text length
 * (the Chat card had two lines and the Form card one). Each card shows
 * the main detail and its availability on two tidy lines.
 * ------------------------------------------------------------- */
.rss-reach-list > li { display: flex; }
.rss-reach-list > li > .rss-reach-opt { flex: 1; }
/* On phones the floating Chat button sits over the page; leave room at the
   bottom so it never covers the last card, a button or the footer text. */
@media (max-width: 781px) {
	.rss-chat-on { padding-bottom: 5.5rem; }
}

/* Availability tag on each contact card (Jorge: the hours should stand out).
   Teal pill with a clock icon: hours for phone/chat, "Any time" for email/form. */
.rss-reach-text .rss-avail {
	display: inline-flex;
	align-items: center;
	gap: 0.3rem;
	align-self: flex-start;
	margin-top: 0.35rem;
	padding: 0.15rem 0.55rem;
	border-radius: 999px;
	background: color-mix(in srgb, var(--wp--preset--color--signal) 12%, white);
	color: var(--wp--preset--color--signal);
	font-size: 0.78rem;
	font-weight: 700;
	line-height: 1.4;
	max-width: 100%;
	box-sizing: border-box;
	/* may wrap in narrow cards (tablets), never push the page wider */
}
.rss-reach-text .rss-avail svg { flex: 0 0 auto; }
.rss-reach-text .rss-avail-always {
	background: color-mix(in srgb, var(--wp--preset--color--clay) 14%, white);
	color: var(--wp--preset--color--red-soil);
}

/* Four contact cards: 2 x 2 when the block is wide enough for two readable
   cards, otherwise one per row. Based on the block's own width (container
   query), because it sits in a narrow column on Contact and full width on
   Support. Never 3 + 1. */
.rss-reach { container-type: inline-size; }
.rss-reach-list { grid-template-columns: 1fr; }
@container (min-width: 30rem) {
	.rss-reach-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ---------------------------------------------------------------
 * 24. Real photos: true shape + portrait pairs (v0.16.0)
 * Photos keep their own proportions (Jorge's arrive portrait 3:4).
 * Portrait pair: photo on the left (60%), phone overlapping its lower
 * right corner, never inside the phone frame.
 * ------------------------------------------------------------- */
.rss-photo img { aspect-ratio: auto; object-fit: cover; }
.rss-photo-portrait { max-width: 22rem; margin-inline: auto; }

.rss-pair-portrait { max-width: 26rem; padding-bottom: 1.5rem; }
.rss-pair-portrait > .rss-photo { width: 62%; max-width: none; margin: 0; }
.rss-pair-portrait > .rss-screen { width: 44%; right: 0; bottom: 0; }

/* Highlight cards are small: keep the pair inside the card. */
.rss-hl-visual .rss-pair { width: 100%; max-width: 17rem; }
.rss-hl-visual .rss-pair-portrait > .rss-screen { width: 46%; }

/* "A real loan" story inside the guide. */
.rss-story {
	padding: 0.9rem 1.1rem;
	border-left: 4px solid var(--wp--preset--color--clay);
	border-radius: 0 10px 10px 0;
	background: var(--wp--preset--color--bone);
}
/* Portrait pairs as a flex row (v0.16.0 fix): the phone is taller than a
   3:4 photo, so absolute positioning made it stick out above the photo.
   Side by side, bottoms aligned, phone overlapping the photo's corner;
   the pair is as tall as the taller of the two. */
.rss-pair-portrait {
	display: flex;
	align-items: flex-end;
	justify-content: center;
	padding-bottom: 0;
}
.rss-pair-portrait > .rss-photo { width: 58%; flex: 0 0 58%; }
.rss-pair-portrait > .rss-screen {
	position: relative;
	right: auto;
	bottom: auto;
	flex: 0 0 44%;
	width: 44%;
	margin-left: -12%;
	margin-bottom: -0.5rem;
}

/* ---------------------------------------------------------------
 * 25. Photo + phone pairs, final layout (v0.16.1) - replaces the
 * overlapping layouts above. Jorge: the phone covered half the photo at
 * some widths. Now: photo and phone side by side, same height, never
 * overlapping. The phone keeps its width; the photo fills the rest and
 * is cropped (object-fit: cover) to the phone's height. Works the same
 * for portrait and landscape photos.
 * ------------------------------------------------------------- */
.rss-pair,
.rss-pair-portrait {
	position: static;
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	align-items: stretch;
	gap: 0.75rem;
	width: 100%;
	max-width: 30rem;
	margin-inline: auto;
	padding: 0;
}
.rss-pair > .rss-photo,
.rss-pair-portrait > .rss-photo {
	width: auto;
	max-width: none;
	flex: none;
	margin: 0;
	height: 100%;
}
.rss-pair > .rss-photo img,
.rss-pair-portrait > .rss-photo img {
	width: 100%;
	height: 100%;
	aspect-ratio: auto;
	object-fit: cover;
	border-radius: 18px;
}
.rss-pair > .rss-screen,
.rss-pair-portrait > .rss-screen {
	position: static;
	width: 180px;
	flex: none;
	margin: 0;
}
.rss-pair > .rss-screen img { filter: none; }
.rss-hl-visual .rss-pair { max-width: 100%; }
.rss-hl-visual .rss-pair > .rss-screen { width: 140px; }
/* Narrow spaces (phones): smaller phone so the photo still has room. */
@media (max-width: 480px) {
	.rss-pair > .rss-screen, .rss-pair-portrait > .rss-screen { width: 42vw; max-width: 170px; }
}
/* More air between guide sections so phones of two sections never crowd. */
.rss-guide-row { margin-bottom: var(--wp--preset--spacing--40) !important; }

/* ---------------------------------------------------------------
 * 26. Photo + phone pairs adapt to their own space (v0.16.1)
 * Container query on .rss-pair-wrap (not the screen width), because the
 * same pair sits in a wide guide column, a product block or a small
 * highlight card.
 *   >= 19rem wide: photo and phone side by side, same height.
 *   narrower:      photo on top (4:3), phone below; in highlight cards
 *                  only the photo (the phone would make the card too tall).
 * ------------------------------------------------------------- */
.rss-pair-wrap { container-type: inline-size; width: 100%; max-width: 30rem; margin-inline: auto; }
.rss-pair-wrap > .rss-pair { max-width: none; }

/* Narrow (default): stacked. */
.rss-pair-wrap > .rss-pair { grid-template-columns: 1fr; justify-items: center; }
.rss-pair-wrap > .rss-pair > .rss-photo { width: 100%; height: auto; }
.rss-pair-wrap > .rss-pair > .rss-photo img { height: auto; aspect-ratio: 4 / 3; }
.rss-pair-wrap > .rss-pair > .rss-screen { width: min(100%, 200px); }
.rss-hl-visual .rss-pair-wrap > .rss-pair > .rss-screen { display: none; }
.rss-hl-visual .rss-pair-wrap > .rss-pair > .rss-photo img { aspect-ratio: 3 / 4; max-height: 300px; }

/* Wide enough: side by side, photo cropped to the phone's height. */
@container (min-width: 19rem) {
	.rss-pair-wrap > .rss-pair { grid-template-columns: minmax(0, 1fr) auto; justify-items: stretch; }
	.rss-pair-wrap > .rss-pair > .rss-photo { height: 100%; }
	.rss-pair-wrap > .rss-pair > .rss-photo img { height: 100%; aspect-ratio: auto; max-height: none; }
	.rss-pair-wrap > .rss-pair > .rss-screen { width: 180px; display: block; }
	.rss-hl-visual .rss-pair-wrap > .rss-pair > .rss-screen { width: 140px; display: block; }
}
.rss-hl-visual .rss-pair-wrap { max-width: 100%; }

/* Guide sections with three phones (Lending, Settings): smaller phones so
   all three fit in one row on computers instead of 2 + 1. */
.rss-guide-row > .wp-block-column:last-child:has(> .rss-screen:nth-of-type(3)) > .rss-screen {
	flex: 0 1 150px;
}
/* Three-phone sections decide by the column's own width (container query):
   wide enough -> all three in one row, sharing the space;
   narrow      -> one per row. Never 2 + 1. */
.rss-guide-row > .wp-block-column:last-child { container-type: inline-size; }
.rss-guide-row > .wp-block-column:last-child:has(> .rss-screen:nth-of-type(3)) > .rss-screen {
	flex: 0 1 72%;
	max-width: 210px;
}
@container (min-width: 24rem) {
	.rss-guide-row > .wp-block-column:last-child:has(> .rss-screen:nth-of-type(3)) > .rss-screen {
		flex: 1 1 0;
		min-width: 0;
		max-width: 175px;
	}
}
/* The photo + phone pair always takes its own row in a guide column, so
   the phones after it start on the next row instead of shrinking beside it. */
.rss-guide-row > .wp-block-column:last-child > .rss-pair-wrap { flex: 0 0 100%; }
/* (fix) The wrapper spans the whole row; the pair inside keeps its 30rem cap. */
.rss-guide-row > .wp-block-column:last-child > .rss-pair-wrap { max-width: none; width: 100%; }
.rss-pair-wrap > .rss-pair { max-width: 30rem; margin-inline: auto; }

/* "Why Red Soil Stack" has six points: 3 x 2 on computers, 2 x 3 on tablets,
   one column on phones. Never 4 + 2. */
.rss-points.is-layout-grid { grid-template-columns: 1fr; }
@media (min-width: 600px) { .rss-points.is-layout-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1000px) { .rss-points.is-layout-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

/* ---------------------------------------------------------------
 * 27. Pricing and Google Play availability (v0.20.0)
 * ------------------------------------------------------------- */
.rss-price-line { margin: 0.2rem 0 0.4rem; display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; color: var(--wp--preset--color--stone); }
.rss-price { font-size: 2.2rem; font-weight: 800; line-height: 1; color: var(--wp--preset--color--charcoal); letter-spacing: -0.02em; }
.rss-price-note { margin: 0 0 0.8rem; font-weight: 700; color: var(--wp--preset--color--signal); }

/* "Coming soon on Google Play": a tag, not a button (not clickable). */
.rss-play { margin: 0 0 1rem; }
.rss-play-soon {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	padding: 0.55rem 0.9rem;
	border-radius: 10px;
	background: var(--wp--preset--color--charcoal);
	color: var(--wp--preset--color--white);
	font-weight: 700;
	cursor: default;
	user-select: none;
}
.rss-play-icon { color: var(--wp--preset--color--signal-light); font-size: 0.85rem; }
.rss-play img { display: block; height: 56px; width: auto; }

/* Checkbox groups in forms: tidy 2-column grid on wide forms, one per row
   on phones (they wrapped unevenly: "Lending  Reports" on one line). */
.rss-form .rss-checks { display: flex; flex-wrap: wrap; column-gap: 1rem; row-gap: 0.45rem; }
.rss-form .rss-checks legend { width: 100%; margin-bottom: 0.35rem; }
.rss-form .rss-checks > label { display: flex; align-items: flex-start; gap: 0.45rem; flex: 0 1 calc(50% - 0.5rem); margin: 0; }
.rss-form .rss-checks > label input { margin-top: 0.3rem; flex: 0 0 auto; }
@media (max-width: 600px) { .rss-form .rss-checks > label { flex-basis: 100%; } }

/* ---------------------------------------------------------------
 * 28. EZBin changelog (v0.25.0)
 * ------------------------------------------------------------- */
.rss-changelog { margin-top: 1.5rem; }
.rss-cl-entry { padding: 1.25rem 0; border-top: 1px solid var(--wp--preset--color--dust); }
.rss-cl-entry:first-child { border-top: 0; padding-top: 0; }
.rss-cl-version { font-size: 1.35rem; margin: 0 0 0.2rem; display: flex; align-items: center; gap: 0.6rem; flex-wrap: wrap; }
.rss-cl-date { margin: 0 0 0.6rem; color: var(--wp--preset--color--stone); font-size: 0.95rem; }
.rss-cl-tag { font-size: 0.75rem; font-weight: 700; padding: 0.15rem 0.55rem; border-radius: 999px; background: var(--wp--preset--color--dust); color: var(--wp--preset--color--charcoal); }
.rss-cl-entry ul { margin: 0; padding-left: 1.2rem; }
.rss-cl-entry li { margin: 0.35rem 0; }

/* ---------------------------------------------------------------
 * 29. Product page blocks with two screenshots (v0.25.2)
 * "Make it yours": the home screen as it comes + where you change it.
 * Side by side like the guide; only when a block column has 2 phones.
 * ------------------------------------------------------------- */
.rss-block > .wp-block-column:has(> .rss-screen ~ .rss-screen) {
	display: flex;
	flex-wrap: wrap;
	gap: 1.25rem;
	justify-content: center;
	align-items: flex-start;
}
.rss-block > .wp-block-column:has(> .rss-screen ~ .rss-screen) > .rss-screen {
	flex: 0 1 calc(50% - 0.7rem);
	max-width: 240px;
	margin: 0;
}

/* ---------------------------------------------------------------
 * 30. EZBin live on Google Play (v0.26.0)
 * Play link (until the official badge file is added) and "Next update"
 * tags for features newer than the version on Play.
 * ------------------------------------------------------------- */
.rss-play-link {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	padding: 0.6rem 1rem;
	border-radius: 10px;
	background: var(--wp--preset--color--charcoal);
	color: var(--wp--preset--color--white);
	font-weight: 700;
	text-decoration: none;
}
.rss-play-link:hover, .rss-play-link:focus-visible { background: #000; color: var(--wp--preset--color--white); }
.rss-next-tag {
	display: inline-block;
	vertical-align: middle;
	margin-left: 0.4rem;
	padding: 0.15rem 0.55rem;
	border-radius: 999px;
	background: var(--wp--preset--color--dust);
	color: var(--wp--preset--color--charcoal);
	font-size: 0.75rem;
	font-weight: 700;
	letter-spacing: 0;
}
.rss-next-notice {
	margin-block: 0.5rem 1rem;
	margin-inline: auto;
	box-sizing: border-box;
	max-width: var(--wp--style--global--wide-size); /* same column as the guide text above */
	padding: 0.8rem 1rem;
	border-left: 4px solid var(--wp--preset--color--signal);
	background: var(--wp--preset--color--white);
	border-radius: 8px;
}