/*
 * StoreMaster marketing site — Pulse Ledger section system.
 *
 * Layers on top of sm-site.css, which still carries the pricing table, the
 * changelog and the docs chrome. Tokens come from style.css :root.
 *
 * The concept spine from the brief is a master control route: one monoline path
 * turning a fragmented plugin stack into a sequence of outcomes. That route is a
 * real drawn element here (.sm-route*), not a metaphor in a comment — it is what
 * ties the hero, the thesis diagram and the outcome rail together.
 *
 * Rules this file keeps:
 *   - Pulse Magenta is the ONLY page-wide accent. Flow Cyan and Module Violet
 *     appear inside product imagery and the capability icons, nowhere else.
 *   - Button labels are plum on pulse (4.83:1), never white on pulse (3.65:1,
 *     which fails AA at label sizes).
 *   - Soft surfaces at 16px, square internal UI geometry, pill only for compact
 *     toggles. That contrast is the identity; do not round the inner geometry.
 *   - Non-animated by choice at intake. The one motion element is the hero mask
 *     reveal, which is scroll-driven where supported and simply absent where it
 *     is not — no JavaScript fallback, nothing to fail.
 */

/* ============================================================ foundations */

body {
	background: var(--sm-paper);
}

.sm-u-display {
	font-family: var(--sm-display);
	font-weight: 700;
	letter-spacing: -0.045em;
	line-height: 0.98;
}

/* Eyebrow budget is three across eight content sections: hero, capability
   system, technical foundation. The class exists once so that ceiling is
   visible in the markup rather than a note somebody has to remember. */
.sm-eyebrow-pulse {
	font-family: var(--sm-mono);
	font-size: 0.75rem;
	font-weight: 500;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--sm-pulse);
	margin: 0 0 1rem;
}

.sm-lede-pulse {
	font-size: clamp(1.05rem, 1.6vw, 1.28rem);
	line-height: 1.55;
	color: var(--sm-plum-soft);
	max-width: 34ch;
}

/* The 3px pulse underline that sits beneath a section heading in the refs. */
.sm-tick::after {
	content: "";
	display: block;
	width: 44px;
	height: 3px;
	background: var(--sm-pulse);
	margin-top: 1.1rem;
}

.sm-band {
	padding-block: clamp(4.5rem, 10vw, 8.5rem);
}

.sm-band--paper-deep {
	background: var(--sm-paper-deep);
}

/* ================================================================== route */

/*
 * The monoline path. Drawn with borders rather than SVG so it inherits the
 * token colour and needs no second asset to keep in sync.
 */
.sm-route-line {
	position: relative;
	height: 1px;
	background: var(--sm-plum);
	opacity: 0.18;
}

.sm-route-node {
	width: 11px;
	height: 11px;
	border: 2px solid var(--sm-plum);
	border-radius: 50%;
	background: var(--sm-paper);
	flex: 0 0 auto;
}

.sm-route-node--live {
	border-color: var(--sm-pulse);
	background: var(--sm-pulse);
}



/* The colophon uses sm-site.css's .sm-caption, whose --sm-slate-400 is #8b7a92
   on Soft Paper: 3.80:1 at 13px, under the 4.5:1 AA needs for normal text. The
   footer is the one place that colour lands on paper at that size, so the fix
   is scoped here rather than changing a token 17 other components share. */
.sm-foot-pulse .sm-caption {
	color: var(--sm-plum-soft);
}

/* A skip link. There was no visually-hidden utility in any of the three
   stylesheets, which is why the chrome shipped without one — a skip link
   without it renders as stray text above the logo. */
.sm-skip {
	position: absolute;
	left: -9999px;
	top: 0;
	z-index: 100;
	padding: 0.75rem 1.1rem;
	background: var(--sm-plum);
	color: var(--sm-paper);
	font-weight: 500;
	text-decoration: none;
	border-radius: 0 0 var(--sm-radius-btn) 0;
}

.sm-skip:focus {
	left: 0;
}

/* ================================================================= brand */

/*
 * The mark comes from CSS, not from markup, and that is deliberate. Template
 * parts are .html and cannot run PHP, so both the header and the footer had the
 * theme path written out as a root-relative literal — fine in the deployed
 * image, broken in a subdirectory install or if the theme folder is renamed. A
 * url() in a stylesheet resolves relative to the STYLESHEET, so this is correct
 * wherever WordPress lives, with no PHP and no duplication.
 *
 * The word is set in Urbanist rather than drawn, replacing an SVG whose letters
 * were baked into a <text> node. Real text means the casing is an edit rather
 * than a re-export, which matters because the design package spells it
 * "Storemaster" and the product is "StoreMaster".
 */
.sm-brand {
	display: inline-flex;
	align-items: center;
	gap: 0.6rem;
	text-decoration: none;
	color: var(--sm-plum);
}

.sm-brand::before {
	content: "";
	width: 30px;
	height: 30px;
	flex: 0 0 auto;
	background: url("../images/sm-mark.svg") center / contain no-repeat;
}

.sm-brand__word {
	font-family: var(--sm-display);
	font-weight: 700;
	font-size: 1.22rem;
	letter-spacing: -0.03em;
}

@media (max-width: 430px) {
	/*
	 * Measured at 375px: 295px of usable width against 299px of content — the
	 * rail wrapped to a second row by four pixels, and it is sticky, so that
	 * second row came out of every screenful. Hiding the word is not enough on
	 * its own; the CTA's 25.6px of horizontal padding is the rest of it. The
	 * mark alone still identifies the site, and a 30px-shorter button is still
	 * comfortably above the 44px touch target.
	 */
	.sm-rail .sm-brand__word {
		display: none;
	}

	.sm-rail__inner {
		gap: 0.75rem;
	}

	.sm-rail .sm-cta-pulse {
		padding: 0.7rem 0.9rem;
		gap: 0.35rem;
		font-size: 0.88rem;
		/* Without this the label breaks across two lines and the button grows
		   taller than the rail it sits in — the wrap moves from the row to the
		   words, which is worse, not better. */
		white-space: nowrap;
	}

	.sm-rail__links {
		gap: 0.9rem;
		font-size: 0.9rem;
	}
}

/* ================================================================ gutters */

/*
 * sm-site.css puts the horizontal gutter on `.sm-header .alignwide` /
 * `.sm-footer .alignwide` (line 1401). The rebuilt chrome uses .sm-rail and
 * .sm-foot-pulse, which match neither, so header and footer content sat flush
 * against the viewport edge at every width below 1120px. Put the gutter on the
 * sections themselves so it cannot depend on a class name somewhere else.
 */
.sm-rail__inner,
.sm-foot-pulse__grid {
	padding-inline: clamp(1rem, 4vw, 2rem);
}

@media (min-width: 1120px) {
	.sm-rail__inner,
	.sm-foot-pulse__grid {
		max-width: 1240px;
		margin-inline: auto;
	}
}

/* ============================================================= nav rail */

.sm-rail {
	border-bottom: 1px solid var(--sm-rule);
	background: color-mix(in srgb, var(--sm-paper) 88%, transparent);
	backdrop-filter: saturate(140%) blur(8px);
	position: sticky;
	top: 0;
	z-index: 40;
}

.sm-rail__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1.5rem;
	padding-block: 0.85rem;
}

.sm-rail__links {
	display: flex;
	align-items: center;
	gap: 1.75rem;
	font-size: 0.95rem;
	font-weight: 500;
}

.sm-rail__links a {
	color: var(--sm-plum-soft);
	text-decoration: none;
}

.sm-rail__links a:hover,
.sm-rail__links a:focus-visible {
	color: var(--sm-pulse);
}

@media (max-width: 860px) {
	/* Brief: navigation condenses to logo, pricing link, and primary CTA. */
	.sm-rail__links a:not(.sm-rail__keep) {
		display: none;
	}
}

/* ================================================================== hero */

/*
 * Editorial offset, image-as-canvas. Not a 50/50 split: the type column is
 * narrower than the canvas and sits low against it, which is what makes it read
 * as editorial rather than as a default hero.
 */
.sm-hero-pulse {
	padding-block: clamp(3rem, 7vw, 6rem) clamp(4rem, 9vw, 7.5rem);
	overflow: hidden;
}

.sm-hero-pulse__grid {
	display: grid;
	grid-template-columns: minmax(0, 0.86fr) minmax(0, 1.14fr);
	align-items: center;
	gap: clamp(2rem, 5vw, 4.5rem);
}

.sm-hero-pulse__type h1 {
	margin: 0 0 1.5rem;
}

.sm-hero-pulse__canvas {
	position: relative;
	margin-right: calc(-1 * clamp(1rem, 6vw, 7rem));
}

.sm-hero-pulse__canvas img {
	display: block;
	width: 100%;
	height: auto;
	border-radius: var(--sm-radius-card);
}

@media (max-width: 900px) {
	.sm-hero-pulse__grid {
		grid-template-columns: 1fr;
	}

	.sm-hero-pulse__canvas {
		margin-right: 0;
	}
}

/*
 * C3 — scroll-driven mask reveal. The canvas begins as a contained control
 * surface and opens out as the visitor moves into the product story.
 *
 * Guarded twice on purpose. `animation-timeline: view()` has no polyfill worth
 * shipping, so where it is unsupported the @supports block never applies and the
 * image is simply there, full size, from the start — the static case is the
 * default rather than a fallback that has to work. And prefers-reduced-motion
 * turns it off even where it is supported, which the brief asks for explicitly.
 */
@supports (animation-timeline: view()) {
	@media (prefers-reduced-motion: no-preference) {
		@keyframes sm-mask-open {
			from {
				clip-path: inset(0 0 0 0 round var(--sm-radius-card));
				transform: scale(0.965);
			}

			to {
				clip-path: inset(0 0 0 0 round var(--sm-radius-card));
				transform: scale(1);
			}
		}

		.sm-hero-pulse__canvas img {
			animation: sm-mask-open linear both;
			animation-timeline: view();
			animation-range: entry 10% cover 38%;
		}
	}
}

/* ================================================================ thesis */

/*
 * Oversized statement with the route diagram beside it and no card shell. The
 * absence of a card is the point: the thesis is the page speaking, not a
 * component.
 */
.sm-thesis__grid {
	display: grid;
	grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
	gap: clamp(2rem, 6vw, 5rem);
	align-items: start;
}

.sm-thesis h2 {
	font-size: clamp(2.3rem, 5vw, 4rem);
	margin: 0;
}

.sm-thesis__diagram {
	display: flex;
	flex-direction: column;
	gap: 1.15rem;
	padding-top: 0.75rem;
}

.sm-thesis__step {
	display: flex;
	align-items: center;
	gap: 1rem;
	font-size: 0.98rem;
	color: var(--sm-plum-soft);
}

.sm-thesis__step strong {
	font-family: var(--sm-display);
	font-weight: 700;
	letter-spacing: -0.03em;
	color: var(--sm-plum);
}

@media (max-width: 860px) {
	.sm-thesis__grid {
		grid-template-columns: 1fr;
	}
}

/* ============================================================== outcomes */

/*
 * Horizontal snap rail. Scrolls on every viewport, not only on mobile: six
 * outcomes laid flat is the sequence the concept spine describes, and forcing
 * them into a grid on desktop would break the route.
 */
.sm-rail-scroll {
	display: grid;
	grid-auto-flow: column;
	grid-auto-columns: minmax(255px, 1fr);
	gap: 1.15rem;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	padding-bottom: 1.25rem;
	scrollbar-width: thin;
	scrollbar-color: var(--sm-rule) transparent;
}

.sm-rail-scroll > * {
	scroll-snap-align: start;
}

.sm-outcome {
	background: var(--sm-white);
	border: 1px solid var(--sm-rule);
	border-radius: var(--sm-radius-card);
	padding: 1.5rem 1.4rem 1.6rem;
	display: flex;
	flex-direction: column;
	gap: 0.85rem;
	min-height: 100%;
}

/* Square internal geometry against the soft outer surface — the corner
   language the brief locks. */
.sm-outcome__index {
	font-family: var(--sm-mono);
	font-size: 0.72rem;
	font-weight: 600;
	color: var(--sm-paper);
	background: var(--sm-plum);
	border-radius: 4px;
	padding: 0.2em 0.45em;
	align-self: flex-start;
	letter-spacing: 0.06em;
}

.sm-outcome__name {
	font-family: var(--sm-display);
	font-weight: 700;
	font-size: 1.22rem;
	letter-spacing: -0.03em;
	color: var(--sm-plum);
	margin: 0;
}

.sm-outcome p {
	margin: 0;
	font-size: 0.95rem;
	line-height: 1.55;
	color: var(--sm-plum-soft);
}

.sm-outcome__foot {
	margin-top: auto;
	padding-top: 0.9rem;
	border-top: 1px solid var(--sm-rule);
	font-family: var(--sm-mono);
	font-size: 0.72rem;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--sm-muted);
}

/* ========================================================== capabilities */

/*
 * Gapless bento: five cells plus one wide image cell, sharing single-pixel
 * rules rather than gaps. The shared edge is what makes it read as one system
 * instead of six cards, which is the argument the section is making.
 */
.sm-capbento {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	border: 1px solid var(--sm-rule);
	border-radius: var(--sm-radius-card);
	overflow: hidden;
	background: var(--sm-rule);
	gap: 1px;
}

.sm-capbento__cell {
	background: var(--sm-paper);
	padding: clamp(1.5rem, 2.6vw, 2.25rem);
	display: flex;
	flex-direction: column;
	gap: 0.7rem;
}

.sm-capbento__cell--wide {
	grid-column: span 2;
}

.sm-capbento__cell--image {
	padding: 0;
	background: var(--sm-paper-deep);
}

.sm-capbento__cell--image img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.sm-capbento h3 {
	margin: 0;
	color: var(--sm-plum);
}

.sm-capbento p {
	margin: 0;
	font-size: 0.96rem;
	line-height: 1.55;
	color: var(--sm-plum-soft);
}

@media (max-width: 860px) {
	.sm-capbento {
		grid-template-columns: 1fr;
	}

	.sm-capbento__cell--wide {
		grid-column: auto;
	}
}

/* ====================================================== comparison band */

.sm-ledger {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
	gap: 1px;
	background: var(--sm-rule);
	border: 1px solid var(--sm-rule);
	border-radius: var(--sm-radius-card);
	overflow: hidden;
}

.sm-ledger__cell {
	background: var(--sm-paper);
	padding: 1.6rem 1.5rem;
	display: flex;
	flex-direction: column;
	gap: 0.55rem;
}

.sm-ledger__figure {
	font-family: var(--sm-display);
	font-weight: 700;
	font-size: clamp(2rem, 3.6vw, 2.8rem);
	letter-spacing: -0.04em;
	line-height: 1;
	color: var(--sm-plum);
}

.sm-ledger__figure em {
	font-style: normal;
	color: var(--sm-pulse);
}

.sm-ledger__cell p {
	margin: 0;
	font-size: 0.94rem;
	line-height: 1.5;
	color: var(--sm-plum-soft);
}

/* ==================================================== technical foundation */

.sm-tech__grid {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	gap: clamp(2rem, 5vw, 4rem);
	align-items: start;
}

.sm-tech__crop {
	position: sticky;
	top: 6rem;
	border-radius: var(--sm-radius-card);
	overflow: hidden;
	border: 1px solid var(--sm-rule);
	background: var(--sm-paper-deep);
}

.sm-tech__crop img {
	display: block;
	width: 100%;
	height: auto;
}

.sm-tech__points {
	display: flex;
	flex-direction: column;
	gap: 1.35rem;
}

.sm-tech__point {
	border-top: 1px solid var(--sm-rule);
	padding-top: 1.35rem;
}

.sm-tech__point h3 {
	margin: 0 0 0.4rem;
	font-size: 1.12rem;
	color: var(--sm-plum);
}

.sm-tech__point p {
	margin: 0;
	font-size: 0.96rem;
	line-height: 1.6;
	color: var(--sm-plum-soft);
}

@media (max-width: 860px) {
	.sm-tech__grid {
		grid-template-columns: 1fr;
	}

	.sm-tech__crop {
		position: static;
	}
}

/* ====================================================== conversion band */

.sm-convert {
	background: var(--sm-pulse);
	padding-block: clamp(4rem, 9vw, 7rem);
	position: relative;
	overflow: hidden;
}

.sm-convert h2,
.sm-convert p {
	color: var(--sm-plum);
}

.sm-convert h2 {
	font-size: clamp(2.4rem, 5.4vw, 4.4rem);
	margin: 0 0 1.25rem;
	max-width: 18ch;
}

.sm-convert p {
	font-family: var(--sm-mono);
	font-size: 0.98rem;
	line-height: 1.7;
	margin: 0 0 2.25rem;
	max-width: 46ch;
}

.sm-convert__mark {
	position: absolute;
	right: clamp(-4rem, -2vw, 1rem);
	top: 50%;
	translate: 0 -50%;
	width: clamp(180px, 26vw, 340px);
	opacity: 0.9;
	pointer-events: none;
}

@media (max-width: 900px) {
	.sm-convert__mark {
		display: none;
	}
}

/*
 * Target-bracket CTA. The brackets are the garment; the label steps forward on
 * hover. Focus gets the same treatment as hover, so a keyboard visitor sees the
 * affordance rather than inferring it.
 */
.sm-bracket {
	display: inline-flex;
	align-items: center;
	gap: 0.6rem;
	position: relative;
	padding: 0.85rem 1.9rem;
	font-family: var(--sm-display);
	font-weight: 700;
	font-size: 1.05rem;
	letter-spacing: -0.02em;
	color: var(--sm-plum);
	text-decoration: none;
	background: none;
	border: 0;
}

.sm-bracket::before,
.sm-bracket::after {
	content: "";
	position: absolute;
	inset-block: 0;
	width: 18px;
	border: 2px solid currentColor;
}

.sm-bracket::before {
	left: 0;
	border-right: 0;
}

.sm-bracket::after {
	right: 0;
	border-left: 0;
}

.sm-bracket span {
	transition: translate 160ms ease;
}

.sm-bracket:hover span,
.sm-bracket:focus-visible span {
	translate: 4px 0;
}

@media (prefers-reduced-motion: reduce) {
	.sm-bracket span {
		transition: none;
	}
}

/* A pulse-on-paper button for the hero, plum label per the contrast note. */
.sm-cta-pulse {
	display: inline-flex;
	align-items: center;
	gap: 0.6rem;
	background: var(--sm-pulse);
	color: var(--sm-plum);
	font-weight: 500;
	text-decoration: none;
	padding: 0.95rem 1.6rem;
	border-radius: var(--sm-radius-btn);
}

.sm-cta-pulse:hover,
.sm-cta-pulse:focus-visible {
	background: var(--sm-pulse-deep);
	color: var(--sm-white);
}

/* ================================================================ footer */

.sm-foot-pulse {
	border-top: 1px solid var(--sm-rule);
	padding-block: clamp(3rem, 6vw, 4.5rem);
}

.sm-foot-pulse__grid {
	display: grid;
	grid-template-columns: minmax(0, 1.4fr) repeat(auto-fit, minmax(140px, 1fr));
	gap: 2.5rem;
}

.sm-foot-pulse h2 {
	font-size: 0.78rem;
	font-family: var(--sm-mono);
	font-weight: 500;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	/* Plum-soft, not --sm-muted: #8b7a92 on Soft Paper measures 3.80:1, and at
	   12.5px this is normal text needing 4.5:1. --sm-plum-soft is 9.88:1. */
	color: var(--sm-plum-soft);
	margin: 0 0 0.9rem;
}

.sm-foot-pulse ul {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 0.55rem;
	font-size: 0.94rem;
}

.sm-foot-pulse a {
	color: var(--sm-plum-soft);
	text-decoration: none;
}

.sm-foot-pulse a:hover,
.sm-foot-pulse a:focus-visible {
	color: var(--sm-pulse);
}

/* ============================================================ focus ring */

/*
 * One visible ring for everything interactive. Pulse on paper is 3.5:1, which
 * clears the 3:1 that WCAG asks of a non-text indicator, and the offset keeps
 * it off the glyphs.
 */
.sm-rail__links a:focus-visible,
.sm-bracket:focus-visible,
.sm-cta-pulse:focus-visible,
.sm-foot-pulse a:focus-visible,
.sm-brand:focus-visible,
.sm-outcome a:focus-visible {
	outline: 2px solid var(--sm-pulse);
	outline-offset: 3px;
}

/* Only the elements that have no radius of their own. Setting it on the group
   above snapped .sm-cta-pulse from its 12px to 4px on tab — the button visibly
   changed shape when focused, which is the one moment it should not. */
.sm-rail__links a:focus-visible,
.sm-foot-pulse a:focus-visible,
.sm-brand:focus-visible {
	border-radius: 4px;
}