/* ==========================================================================
   SurplusStockMarket.com — site styles
   --------------------------------------------------------------------------
   Visual system from the September 2026 design handover (HANDOVER.md):
   near-black ink, sky-blue actions, deep-teal figures and links, true
   neutral greys, pill buttons, 10–16px card radius, no heavy shadows.

   Theme.json sets the palette, fonts, headings and the default button. This
   file covers everything theme.json cannot: the header and footer, the page
   patterns, and the markup AWP Classifieds and Paid Memberships Pro emit.

   CONTENTS
     1.  Tokens
     2.  Base and layout
     3.  Type helpers
     4.  Buttons
     5.  Header
     6.  Footer
     7.  Hero bands
     8.  Sections, intros, steps
     9.  Proposition bands, chips, offer panel, tiles
     10. Calls to action
     11. Membership tiers
     12. FAQ and reputation
     13. Trade board page
     14. Forms (shared)
     15. AWP Classifieds
     16. Paid Memberships Pro
     17. Default page template
     18. Responsive
   ========================================================================== */


/* 1. Tokens ================================================================ */

:root{
	--ssm-ink:#0B0D0F;
	--ssm-sky:#87CEEB;
	--ssm-sky-hover:#6FC1E3;
	--ssm-sky-tint:#E4F1F8;
	--ssm-teal:#16607F;
	--ssm-teal-dark:#0F4D66;
	--ssm-navy:#0A2233;

	--ssm-body:#4A5459;
	--ssm-mute:#5C6569;
	--ssm-faint:#6F787D;
	--ssm-line:#E8EBED;
	--ssm-line-2:#E1E5E8;
	--ssm-line-3:#C9D2D7;
	--ssm-tag-line:#D6E3EC;
	--ssm-wash:#F5F7F8;
	--ssm-gate:#F2F6F9;

	--ssm-on-ink:#D7DCDF;
	--ssm-on-ink-mute:#9AA3A8;
	--ssm-on-ink-line:rgba(255,255,255,.4);

	--ssm-star:#D98E04;
	--ssm-star-off:#CBD6DD;
	--ssm-wanted:#F2B33D;
	--ssm-wanted-wash:#FFF8EA;
	--ssm-good:#0B7A4F;
	--ssm-flag:#C62D36;

	/* Hero and closing bands. The client is choosing between 1a White,
	   1b Navy, 1c Sky and 1d Deep teal (Homepage Colour Options) — change
	   these two to switch. Sky needs dark text; the others keep white. */
	--ssm-band-bg:var(--ssm-ink);
	--ssm-band-text:#fff;

	--ssm-display:Archivo,system-ui,sans-serif;
	--ssm-sans:"IBM Plex Sans",system-ui,sans-serif;
	--ssm-mono:"IBM Plex Mono",ui-monospace,monospace;

	--ssm-wrap:1200px;
	--ssm-gutter:40px;
	--ssm-radius:14px;
	--ssm-radius-lg:16px;
}


/* 2. Base and layout ======================================================= */

body{
	background:#fff;
	color:var(--ssm-ink);
	font-family:var(--ssm-sans);
	-webkit-font-smoothing:antialiased;
}

/* The designed pages run edge to edge. Strip the block theme's flow gaps
   between sections; each section sets its own padding. */
.ssm-canvas,
.ssm-canvas > .wp-block-post-content{margin:0;padding:0}
/* (0,1,0): beats core's :root :where(.is-layout-flow) > * gap, and loses to
   any single-class rule later in this file. */
.ssm-canvas :where(.wp-block-post-content) > *,
.ssm-canvas :where([class*="ssm-"]) > *{margin-block-start:0}
.ssm-canvas .wp-block-post-content > *{margin-block-end:0;max-width:none}

/* Header and footer template parts carry no spacing of their own. */
.wp-site-blocks > header,
.wp-site-blocks > footer,
.wp-site-blocks > div:has(> .ssm-header),
.wp-site-blocks > div:has(> .ssm-footer){margin:0}
.wp-site-blocks{padding:0}
.wp-site-blocks > *{margin-block-start:0}

.ssm-wrap{
	width:100%;
	max-width:calc(var(--ssm-wrap) + var(--ssm-gutter) * 2);
	margin-inline:auto;
	padding-inline:var(--ssm-gutter);
	box-sizing:border-box;
}

/* Zero-specificity resets, so any single class below can set its own margin. */
:where(.ssm-canvas, .ssm-header, .ssm-footer) p{margin:0;text-wrap:pretty}
:where(.ssm-canvas) .wp-block-image{margin:0}
.ssm-canvas .wp-block-image img{display:block;max-width:100%;height:auto}

/* Core block themes outline every :focus element in currentColor, which
   draws a black box on links and buttons when they are clicked. Drop it for
   mouse focus and keep a teal ring for keyboard focus. */
:where(.wp-site-blocks) :focus:not(:focus-visible){outline:none}
:focus-visible{outline:2px solid var(--ssm-teal);outline-offset:2px}


/* 3. Type helpers ========================================================== */

.ssm-eyebrow{
	font:500 11px/1.2 var(--ssm-mono);
	letter-spacing:.14em;
	text-transform:uppercase;
	color:var(--ssm-mute);
	margin:0 0 18px;
}
.ssm-eyebrow--sm{margin-bottom:12px}
.ssm-eyebrow--teal{color:var(--ssm-teal);letter-spacing:.12em}

.ssm-kicker{
	font:700 13px/1 var(--ssm-display);
	letter-spacing:.1em;
	text-transform:uppercase;
	text-align:center;
	color:var(--ssm-mute);
	margin:0 0 26px;
}

.ssm-lede{font:400 17px/1.65 var(--ssm-sans);color:var(--ssm-body);max-width:54ch}


/* 4. Buttons ===============================================================
   The core button's default look (sky pill, Archivo caps) comes from
   theme.json. These add the ghost and outline variants and a plain-link
   version (.ssm-btn) for the PHP-rendered header. */

.wp-block-button__link{transition:background-color .12s ease,box-shadow .12s ease,color .12s ease}

/* Ghost — transparent with a white hairline, for dark bands */
.wp-block-button.ssm-ghost .wp-block-button__link{
	background:transparent;
	color:#fff;
	box-shadow:inset 0 0 0 1px var(--ssm-on-ink-line);
}
.wp-block-button.ssm-ghost .wp-block-button__link:hover{background:rgba(255,255,255,.08);color:#fff;box-shadow:inset 0 0 0 1px #fff}

/* Outline — ink hairline on light backgrounds */
.wp-block-button.is-style-outline .wp-block-button__link,
.wp-block-button.ssm-outline .wp-block-button__link{
	background:transparent;
	color:var(--ssm-ink);
	border:0;
	box-shadow:inset 0 0 0 1.5px var(--ssm-ink);
}
.wp-block-button.is-style-outline .wp-block-button__link:hover,
.wp-block-button.ssm-outline .wp-block-button__link:hover{background:var(--ssm-ink);color:#fff}

.wp-block-button.ssm-btn-sm .wp-block-button__link{font-size:13px;padding:13px 22px}

.ssm-actions{display:flex;flex-wrap:wrap;gap:14px;align-items:center}

.ssm-btn{
	display:inline-flex;
	align-items:center;
	justify-content:center;
	border:0;
	border-radius:999px;
	background:var(--ssm-sky);
	color:var(--ssm-ink);
	font:700 14px/1 var(--ssm-display);
	letter-spacing:.04em;
	text-transform:uppercase;
	text-decoration:none;
	padding:16px 30px;
	cursor:pointer;
	transition:background-color .12s ease;
}
.ssm-btn:hover,.ssm-btn:focus{background:var(--ssm-sky-hover);color:var(--ssm-ink)}
.ssm-btn--sm{font-size:13px;padding:13px 22px}


/* 5. Header ================================================================ */

.ssm-header{position:relative;z-index:10;background:#fff}

.ssm-utility{background:var(--ssm-ink);color:var(--ssm-on-ink-mute);font:400 13px/1.3 var(--ssm-sans)}
.ssm-utility__in{
	max-width:calc(var(--ssm-wrap) + var(--ssm-gutter) * 2);
	margin:0 auto;
	padding:0 var(--ssm-gutter);
	min-height:40px;
	display:flex;
	align-items:center;
	justify-content:space-between;
	gap:24px;
}
.ssm-utility__right{display:flex;gap:24px;flex:none}
.ssm-utility a{color:var(--ssm-on-ink-mute);text-decoration:none}
.ssm-utility a:hover{color:#fff}
.ssm-utility .ssm-utility__accent{color:var(--ssm-sky)}
.ssm-utility__strong{color:#fff}

.ssm-masthead{border-bottom:1px solid var(--ssm-line)}
.ssm-masthead__in{
	max-width:calc(var(--ssm-wrap) + var(--ssm-gutter) * 2);
	margin:0 auto;
	padding:20px var(--ssm-gutter);
	display:flex;
	align-items:center;
	gap:36px;
}
.ssm-logo{display:block;flex:none;line-height:0}
.ssm-logo img{height:72px;width:auto;display:block}

.ssm-nav{display:flex;gap:26px}
.ssm-nav a,
.ssm-masthead__link{
	font:500 14px/1 var(--ssm-sans);
	color:var(--ssm-body);
	text-decoration:none;
	padding:6px 0;
	border-bottom:2px solid transparent;
}
.ssm-nav a:hover,.ssm-masthead__link:hover{color:var(--ssm-ink)}
.ssm-nav a[aria-current],
.ssm-masthead__link[aria-current]{color:var(--ssm-ink);border-bottom-color:var(--ssm-sky)}

.ssm-masthead__actions{margin-left:auto;display:flex;align-items:center;gap:18px}

/* Mobile menu — native <details>, no script */
.ssm-menu{display:none;margin-left:auto;position:static}
.ssm-menu__toggle{
	list-style:none;
	cursor:pointer;
	width:44px;height:44px;
	border-radius:999px;
	box-shadow:inset 0 0 0 1px var(--ssm-line-2);
	display:flex;align-items:center;justify-content:center;
}
.ssm-menu__toggle::-webkit-details-marker{display:none}
.ssm-menu__toggle span,
.ssm-menu__toggle span::before,
.ssm-menu__toggle span::after{display:block;width:18px;height:2px;background:var(--ssm-ink);border-radius:2px;position:relative;content:""}
.ssm-menu__toggle span::before{position:absolute;top:-6px}
.ssm-menu__toggle span::after{position:absolute;top:6px}
.ssm-menu[open] .ssm-menu__toggle span{background:transparent}
.ssm-menu[open] .ssm-menu__toggle span::before{top:0;transform:rotate(45deg)}
.ssm-menu[open] .ssm-menu__toggle span::after{top:0;transform:rotate(-45deg)}
.ssm-menu__panel{
	position:absolute;
	left:0;right:0;top:100%;
	background:#fff;
	border-bottom:1px solid var(--ssm-line);
	box-shadow:0 12px 24px rgba(11,13,15,.08);
	padding:8px 16px 20px;
}
.ssm-menu__nav{display:flex;flex-direction:column}
.ssm-menu__nav a{
	font:600 16px/1 var(--ssm-sans);
	color:var(--ssm-ink);
	text-decoration:none;
	padding:16px 0;
	border-bottom:1px solid var(--ssm-line);
}
.ssm-menu__actions{display:flex;align-items:center;justify-content:space-between;gap:16px;padding-top:18px}


/* 6. Footer ================================================================ */

.ssm-footer{border-top:1px solid var(--ssm-line);background:#fff}
.ssm-footer__in{
	max-width:calc(var(--ssm-wrap) + var(--ssm-gutter) * 2);
	margin:0 auto;
	padding:40px var(--ssm-gutter);
	display:flex;
	align-items:center;
	gap:28px;
}
.ssm-footer__logo{line-height:0;flex:none}
.ssm-footer__logo img{height:56px;width:auto}
.ssm-footer__links{display:flex;flex-wrap:wrap;gap:22px}
.ssm-footer__links a{font:400 13px/1 var(--ssm-sans);color:var(--ssm-mute);text-decoration:none}
.ssm-footer__links a:hover{color:var(--ssm-ink)}
.ssm-footer__pub{margin-left:auto;font:400 12px/1 var(--ssm-sans);color:var(--ssm-faint)}


/* 7. Hero bands ============================================================
   Dark band, text left, a transparent cut-out on the right that breaks out
   of the band onto the section below. The hero sits above later sections
   (z-index) and the following section reserves room with
   .ssm-section--after-hero. */

.ssm-hero{
	position:relative;
	z-index:2;
	background:var(--ssm-band-bg);
	color:var(--ssm-band-text);
	padding:92px 0 96px;
}
.ssm-hero__in{position:relative}
.ssm-hero__text{position:relative;z-index:4;max-width:560px}
.ssm-hero .ssm-eyebrow{color:var(--ssm-sky);margin-bottom:22px}
.ssm-canvas .ssm-hero__title{
	margin:0 0 22px;
	font:800 52px/1.04 var(--ssm-display);
	letter-spacing:-.03em;
	color:var(--ssm-band-text);
	max-width:19ch;
	text-wrap:pretty;
}
.ssm-canvas .ssm-hero__title--xl{font-size:56px;line-height:1.02;max-width:20ch}
.ssm-hero__title mark{background:none;color:var(--ssm-sky)}
.ssm-hero__lede{margin:0 0 32px;max-width:52ch;font:400 18px/1.6 var(--ssm-sans);color:var(--ssm-on-ink)}
.ssm-hero__note{margin-top:22px;font:400 13px/1.5 var(--ssm-sans);color:var(--ssm-on-ink-mute)}
.ssm-canvas .ssm-hero .ssm-chips{margin-top:26px}

.ssm-canvas .ssm-hero__art{
	position:absolute;
	z-index:3;
	right:-40px;
	pointer-events:none;
}
.ssm-canvas .ssm-hero__art img{width:100%;height:auto}

.ssm-hero--home .ssm-hero__art{top:-70px;width:min(700px,60%)}
.ssm-hero--home + .ssm-section--after-hero{padding-top:160px}

.ssm-hero--board{padding:64px 0 60px}
.ssm-hero--board .ssm-hero__text{max-width:600px}
.ssm-hero--board .ssm-hero__lede{max-width:48ch;font-size:17px}
.ssm-hero--board .ssm-hero__art{top:-90px;width:min(640px,54%)}
.ssm-hero--board + .ssm-section--after-hero{padding-top:110px}

.ssm-hero--membership{padding:84px 0 80px}
.ssm-hero--membership .ssm-hero__lede{max-width:46ch;font-size:17px;margin-bottom:26px}
.ssm-canvas .ssm-hero--membership .ssm-hero__title{font-size:42px;line-height:1.1}
.ssm-hero--membership .ssm-hero__art{top:-88px;width:min(760px,62%);right:-80px}
.ssm-hero--membership + .ssm-section--after-hero{padding-top:120px}


/* 8. Sections, intros, steps =============================================== */

.ssm-section{padding:96px 0}
.ssm-section--tight{padding:0 0 76px}
.ssm-section--wash{background:var(--ssm-wash)}

.ssm-intro{text-align:center;margin:0 auto 60px;max-width:760px}
.ssm-canvas .ssm-intro__title{margin:0 0 16px;font:800 38px/1.12 var(--ssm-display);letter-spacing:-.025em}
.ssm-intro__lede{margin:0 auto;max-width:58ch;font:400 17px/1.65 var(--ssm-sans);color:var(--ssm-body)}

.ssm-steps{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:44px}
.ssm-step{display:flex;flex-direction:column;min-width:0}
.ssm-step__art{
	position:relative;
	height:240px;
	background:var(--ssm-wash);
	border-radius:var(--ssm-radius-lg);
	margin-bottom:28px;
	overflow:hidden;
}
.ssm-canvas .ssm-step__art .wp-block-image{position:absolute;inset:22px}
.ssm-canvas .ssm-step__art img{width:100%;height:100%;object-fit:contain}
.ssm-step__num{
	position:absolute;
	z-index:1;
	top:16px;left:20px;
	font:800 30px/1 var(--ssm-display);
	letter-spacing:-.02em;
	color:var(--ssm-teal);
}
.ssm-canvas .ssm-step h3{margin:0 0 10px}
.ssm-step p:not([class*="ssm-"]){margin:0 0 16px;font:400 15px/1.65 var(--ssm-sans);color:var(--ssm-body)}
.ssm-step__foot{
	margin-top:auto !important;
	padding-top:14px;
	border-top:1px solid var(--ssm-line);
	font:500 13px/1.5 var(--ssm-sans);
	color:var(--ssm-teal);
}


/* 9. Proposition bands, chips, offer panel, tiles ========================== */

.ssm-band{position:relative;padding:110px 0 76px}
.ssm-band--wash{background:var(--ssm-wash)}
.ssm-band__in{position:relative;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:48px;align-items:center}
.ssm-band__text{position:relative;z-index:4}
.ssm-canvas .ssm-band h2{margin:0 0 18px;font-size:34px;line-height:1.15}
.ssm-band .ssm-lede{margin-bottom:26px}
.ssm-canvas .ssm-band__art{position:relative;z-index:3;pointer-events:none}

.ssm-band--direct .ssm-band__art{margin:-140px -40px -60px 0}
.ssm-band--verified{padding:92px 0 76px}
.ssm-band__in--flip{grid-template-columns:minmax(0,420px) minmax(0,1fr);gap:80px}
.ssm-band--verified .ssm-band__art{margin:-150px 0 -40px}

/* Chips — pill facts. Rendered as a list for meaning, styled as pills. */
.ssm-canvas .ssm-chips{
	display:flex;
	flex-wrap:wrap;
	gap:10px;
	list-style:none;
	margin:0;
	padding:0;
}
.ssm-canvas .ssm-chips li{
	margin:0;
	background:#fff;
	box-shadow:inset 0 0 0 1px var(--ssm-line-2);
	border-radius:999px;
	font:500 13px/1.2 var(--ssm-sans);
	color:var(--ssm-body);
	padding:11px 18px;
}
.ssm-canvas .ssm-chips--on-ink li{background:transparent;box-shadow:inset 0 0 0 1px rgba(255,255,255,.3);color:var(--ssm-on-ink)}
.ssm-canvas .ssm-chips--center{justify-content:center;margin-top:46px}

/* Offer panel — "All access: 12 months, plus 3 free." */
.ssm-offer{
	background:var(--ssm-wash);
	border-radius:var(--ssm-radius);
	padding:54px 56px;
	display:grid;
	grid-template-columns:minmax(0,1fr) auto;
	gap:48px;
	align-items:center;
}
.ssm-canvas .ssm-offer h2{margin:0 0 14px;font-size:30px;line-height:1.2}
.ssm-offer__text p{margin:0 0 24px;max-width:56ch;font:400 16px/1.6 var(--ssm-sans);color:var(--ssm-body)}
.ssm-offer__price{text-align:right;white-space:nowrap}
.ssm-figure{font:800 76px/1 var(--ssm-display);letter-spacing:-.03em;color:var(--ssm-teal)}
.ssm-figure span{font-size:26px;letter-spacing:0}
.ssm-offer__price .ssm-eyebrow{margin:12px 0 0;font-size:13px;letter-spacing:.08em}

/* Category tiles */
.ssm-canvas .ssm-tiles{
	display:grid;
	grid-template-columns:repeat(6,minmax(0,1fr));
	gap:12px;
	list-style:none;
	margin:0;
	padding:0;
}
.ssm-canvas .ssm-tiles li{margin:0}
.ssm-tiles a{
	display:block;
	text-align:center;
	padding:26px 12px;
	box-shadow:inset 0 0 0 1px var(--ssm-line);
	border-radius:12px;
	font:700 14px/1.3 var(--ssm-display);
	color:var(--ssm-ink);
	text-decoration:none;
	transition:box-shadow .12s ease;
}
.ssm-tiles a:hover{box-shadow:inset 0 0 0 1.5px var(--ssm-sky),0 4px 14px rgba(11,13,15,.07);color:var(--ssm-ink)}


/* 10. Calls to action ====================================================== */

/* Centred closing band — homepage */
.ssm-cta{background:var(--ssm-band-bg);padding:76px var(--ssm-gutter);text-align:center}
.ssm-canvas .ssm-cta h2{margin:0 0 14px;font-size:38px;line-height:1.15;letter-spacing:-.025em;color:var(--ssm-band-text)}
.ssm-cta p{margin:0 auto 30px !important;max-width:48ch;font:400 17px/1.6 var(--ssm-sans);color:var(--ssm-on-ink)}
.ssm-cta .ssm-actions{justify-content:center}

/* Split band — "Join the board", "Seen something you want a price on?" */
.ssm-joinband{background:var(--ssm-band-bg);padding:56px 0}
.ssm-joinband__in{display:flex;align-items:center;gap:48px}
.ssm-joinband__text{flex:1;min-width:0}
.ssm-joinband .ssm-eyebrow{color:var(--ssm-sky);margin-bottom:16px}
.ssm-canvas .ssm-joinband h2{margin:0 0 12px;font-size:30px;line-height:1.15;color:var(--ssm-band-text)}
.ssm-joinband p:not(.ssm-eyebrow){max-width:60ch;font:400 16px/1.6 var(--ssm-sans);color:var(--ssm-on-ink)}
.ssm-joinband .ssm-actions{flex:none}


/* 11. Membership tiers ===================================================== */

.ssm-tiers{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;align-items:start}
.ssm-tier{
	display:flex;
	flex-direction:column;
	min-height:452px;
	border-radius:var(--ssm-radius);
	padding:34px 30px 30px;
	box-sizing:border-box;
}
.ssm-tier--browse{box-shadow:inset 0 0 0 1px var(--ssm-line-2)}
.ssm-tier--single{background:var(--ssm-wash)}
.ssm-tier--all{background:var(--ssm-ink);margin-top:-16px}

.ssm-tier__name{
	display:flex;
	align-items:center;
	gap:10px;
	margin:0 0 24px !important;
	font:500 11px/1 var(--ssm-mono);
	letter-spacing:.14em;
	text-transform:uppercase;
	color:var(--ssm-mute);
}
.ssm-tier__name mark{
	background:var(--ssm-sky-tint);
	color:var(--ssm-teal-dark);
	font:600 10px/1 var(--ssm-mono);
	letter-spacing:.08em;
	padding:5px 7px;
	border-radius:4px;
}
.ssm-tier__price{font:800 52px/1 var(--ssm-display);letter-spacing:-.03em;color:var(--ssm-teal)}
.ssm-tier__price span{font-size:22px;letter-spacing:0}
.ssm-tier__basis{margin:12px 0 26px !important;font:400 14px/1.5 var(--ssm-sans);color:var(--ssm-mute)}

.ssm-canvas .ssm-ticks{
	list-style:none;
	margin:0 0 26px;
	padding:0 0 26px;
	border-bottom:1px solid var(--ssm-line-2);
	display:flex;
	flex-direction:column;
	gap:13px;
}
.ssm-canvas .ssm-ticks li{
	position:relative;
	margin:0;
	padding-left:19px;
	font:400 15px/1.5 var(--ssm-sans);
	color:var(--ssm-body);
}
.ssm-canvas .ssm-ticks li::before{
	content:"";
	position:absolute;
	left:0;top:8px;
	width:7px;height:7px;
	border-radius:2px;
	background:var(--ssm-teal);
}
.ssm-tier__cta{margin-top:auto !important}
.ssm-tier__cta .wp-block-button{width:100%}
.ssm-tier__cta .wp-block-button__link{width:100%;padding:16px 20px}

.ssm-tier--browse .wp-block-button__link{background:transparent;box-shadow:inset 0 0 0 1.5px var(--ssm-ink)}
.ssm-tier--browse .wp-block-button__link:hover{background:var(--ssm-ink);color:#fff}
.ssm-tier--single .wp-block-button__link{background:#fff;box-shadow:inset 0 0 0 1px var(--ssm-line-3)}
.ssm-tier--single .wp-block-button__link:hover{box-shadow:inset 0 0 0 1.5px var(--ssm-ink);background:#fff}

.ssm-tier--all .ssm-tier__name{color:var(--ssm-sky)}
.ssm-tier--all .ssm-tier__name mark{background:var(--ssm-sky);color:var(--ssm-ink)}
.ssm-tier--all .ssm-tier__price{color:var(--ssm-sky)}
.ssm-tier--all .ssm-tier__basis{color:var(--ssm-on-ink-mute)}
.ssm-canvas .ssm-tier--all .ssm-ticks{border-bottom-color:rgba(255,255,255,.18)}
.ssm-canvas .ssm-tier--all .ssm-ticks li{color:var(--ssm-on-ink)}
.ssm-canvas .ssm-tier--all .ssm-ticks li::before{background:var(--ssm-sky)}


/* 12. FAQ and reputation =================================================== */

.ssm-pagehead{padding:72px var(--ssm-gutter) 64px;text-align:center;border-bottom:1px solid var(--ssm-line)}
.ssm-canvas .ssm-pagehead h1{margin:0 0 16px;font-size:44px;line-height:1.1;letter-spacing:-.03em}

.ssm-section--faq{padding:40px 0 72px}
.ssm-faq{display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:64px;align-items:start}

.ssm-qa{border-bottom:1px solid var(--ssm-line)}
.ssm-qa summary{
	display:flex;
	align-items:flex-start;
	justify-content:space-between;
	gap:24px;
	padding:26px 0;
	cursor:pointer;
	list-style:none;
	font:700 19px/1.4 var(--ssm-display);
	letter-spacing:-.01em;
	color:var(--ssm-ink);
}
.ssm-qa summary::-webkit-details-marker{display:none}
.ssm-qa summary::after{
	content:"+";
	flex:none;
	width:24px;height:24px;
	margin-top:2px;
	border-radius:999px;
	background:var(--ssm-wash);
	display:flex;align-items:center;justify-content:center;
	font:600 15px/1 var(--ssm-sans);
	color:var(--ssm-ink);
	transition:background-color .12s ease,transform .15s ease;
}
.ssm-qa[open] summary::after{content:"×";background:var(--ssm-sky)}
.ssm-qa > p{padding:0 80px 28px 0;font:400 16px/1.7 var(--ssm-sans);color:var(--ssm-body)}

.ssm-aside{background:var(--ssm-wash);border-radius:var(--ssm-radius-lg);padding:32px}
.ssm-canvas .ssm-aside h3{margin:0 0 10px;font-size:19px;line-height:1.35}
.ssm-aside p:not([class*="ssm-"]){margin:0 0 22px;font:400 15px/1.65 var(--ssm-sans);color:var(--ssm-body)}
.ssm-aside__foot{margin-top:22px !important;padding-top:20px;border-top:1px solid var(--ssm-line-2);font:400 14px/1.6 var(--ssm-sans)}
.ssm-aside__foot a{color:var(--ssm-mute)}
.ssm-aside__foot a:hover{color:var(--ssm-teal)}

.ssm-section--wash .ssm-intro{margin-bottom:44px}
.ssm-pair{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:32px;max-width:760px;margin:0 auto}
.ssm-pair__item{border-top:2px solid var(--ssm-line-2);padding-top:20px;display:flex;flex-direction:column;gap:12px}
.ssm-canvas .ssm-pair__item h4{margin:0;font-size:15px}
.ssm-pair__item p{font:400 14px/1.6 var(--ssm-sans);color:var(--ssm-body)}
.ssm-footnote{margin-top:36px !important;text-align:center;font:400 14px/1.6 var(--ssm-sans);color:var(--ssm-mute)}

/* Stars and Top Seller — reused by the board once ratings are built */
.ssm-stars{display:inline-flex;align-items:center;gap:5px;min-height:24px}
.ssm-stars__on{color:var(--ssm-star);font:14px/1 Arial,sans-serif;letter-spacing:1px}
.ssm-stars__off{color:var(--ssm-star-off);font:14px/1 Arial,sans-serif;letter-spacing:1px}
.ssm-stars strong{font:600 13px/1 var(--ssm-sans);color:var(--ssm-ink)}
.ssm-stars__count{font:400 12px/1 var(--ssm-sans);color:var(--ssm-mute)}

.ssm-topseller{
	display:inline-flex;
	align-items:center;
	gap:5px;
	padding:5px 10px;
	border-radius:999px;
	background:var(--ssm-ink);
	font:700 11px/1 var(--ssm-mono);
	letter-spacing:.1em;
	text-transform:uppercase;
	color:#fff;
}
.ssm-topseller::before{content:"★";font:11px/1 Arial,sans-serif;color:var(--ssm-sky)}


/* 13. Trade board page ===================================================== */

.ssm-board{padding-bottom:80px}
.ssm-board__head{
	display:grid;
	grid-template-columns:minmax(0,1fr) auto;
	align-items:end;
	gap:8px 24px;
	margin-bottom:26px;
}
.ssm-board__head .ssm-eyebrow{grid-column:1;margin-bottom:6px}
.ssm-canvas .ssm-board__head h2{grid-column:1;margin:0;font-size:32px;line-height:1.1;letter-spacing:-.025em}
.ssm-board__note{grid-column:2;grid-row:2;text-align:right;font:400 13px/1.5 var(--ssm-sans);color:var(--ssm-mute)}

.ssm-notice{
	display:flex;
	align-items:center;
	gap:20px;
	flex-wrap:wrap;
	padding:18px 22px;
	border-radius:var(--ssm-radius);
	background:var(--ssm-ink);
	margin-bottom:24px;
}
.ssm-notice__text{flex:1;min-width:260px}
.ssm-notice__title{font:700 16px/1.3 var(--ssm-display);color:#fff;margin-bottom:5px !important}
.ssm-notice__text p:not([class*="ssm-"]){font:400 13.5px/1.5 var(--ssm-sans);color:var(--ssm-on-ink)}


/* 14. Forms (shared) ======================================================= */

.ssm-canvas input[type="text"],
.ssm-canvas input[type="email"],
.ssm-canvas input[type="tel"],
.ssm-canvas input[type="url"],
.ssm-canvas input[type="number"],
.ssm-canvas input[type="password"],
.ssm-canvas input[type="search"],
.ssm-canvas input[type="date"],
.ssm-canvas select,
.ssm-canvas textarea,
.ssm-page input[type="text"],
.ssm-page input[type="email"],
.ssm-page input[type="tel"],
.ssm-page input[type="url"],
.ssm-page input[type="number"],
.ssm-page input[type="password"],
.ssm-page input[type="search"],
.ssm-page input[type="date"],
.ssm-page select,
.ssm-page textarea{
	width:100%;
	box-sizing:border-box;
	background:#fff;
	border:1px solid var(--ssm-line-2);
	border-radius:10px;
	padding:12px 14px;
	font:400 15px/1.3 var(--ssm-sans);
	color:var(--ssm-ink);
	transition:border-color .12s ease,box-shadow .12s ease;
}
.ssm-canvas input:focus,
.ssm-canvas select:focus,
.ssm-canvas textarea:focus,
.ssm-page input:focus,
.ssm-page select:focus,
.ssm-page textarea:focus{
	outline:0;
	border-color:var(--ssm-teal);
	box-shadow:0 0 0 3px var(--ssm-sky-tint);
}
.ssm-canvas textarea,.ssm-page textarea{min-height:110px;line-height:1.55;resize:vertical}
.ssm-canvas ::placeholder,.ssm-page ::placeholder{color:var(--ssm-faint)}


/* 15. AWP Classifieds ======================================================
   Selectors taken from AWPCP 4.x rendered output. Listing rows become
   white rounded cards on the wash background, as on screen 01. */

#classiwrapper{font-family:var(--ssm-sans);color:var(--ssm-ink)}
#classiwrapper h1,#classiwrapper h2,#classiwrapper h3{font-family:var(--ssm-display);font-weight:800;letter-spacing:-.02em}
#classiwrapper a{color:var(--ssm-teal);text-decoration:none}
#classiwrapper a:hover{color:var(--ssm-teal-dark)}

.uiwelcome{font:400 16px/1.6 var(--ssm-sans);color:var(--ssm-body);max-width:62ch;margin:0 0 24px}

/* Search bar — pill input with an attached ink button, as in the board header */
#classiwrapper .awpcp-classifieds-search-bar{margin:0 0 28px}
.awpcp-classifieds-search-bar form{display:flex;flex-wrap:wrap;align-items:stretch;max-width:560px}
.awpcp-classifieds-search-bar--query-field{flex:1 1 auto;min-width:220px}
#classiwrapper .awpcp-classifieds-search-bar--query-field input[type="text"]{
	height:100%;
	border:1px solid var(--ssm-line-2);
	border-right:0;
	border-radius:999px 0 0 999px;
	padding:12px 18px;
	font-size:14px;
	box-shadow:none;
	background:#fff;
}
#classiwrapper .awpcp-classifieds-search-bar--submit-button input[type="submit"]{
	height:100%;
	background:var(--ssm-ink);
	color:#fff;
	border-radius:0 999px 999px 0;
	padding:0 22px;
	font:700 12px/1 var(--ssm-display);
	letter-spacing:.08em;
}
#classiwrapper .awpcp-classifieds-search-bar--submit-button input[type="submit"]:hover{background:var(--ssm-navy)}
/* Scoped to #classiwrapper to beat AWPCP's own margin:2px rule, which loads later. */
#classiwrapper .awpcp-classifieds-search-bar--advanced-search-link{
	flex:0 0 100%;
	margin:14px 0 0;
	padding:0;
	font:500 13px/1 var(--ssm-sans);
	text-align:right;
}
#classiwrapper .awpcp-classifieds-search-bar--advanced-search-link a{color:var(--ssm-mute);text-decoration:underline;text-underline-offset:3px}
#classiwrapper .awpcp-classifieds-search-bar--advanced-search-link a:hover{color:var(--ssm-teal)}

/* Menu strip — pill tabs, the "Post a listing" item in sky */
ul.awpcp-classifieds-menu{
	display:flex;
	flex-wrap:wrap;
	gap:8px;
	list-style:none;
	margin:0 0 24px;
	padding:0;
	border:0;
}
ul.awpcp-classifieds-menu > li,
li.awpcp-classifieds-menu--menu-item{margin:0;padding:0;list-style:none;float:none}
#classiwrapper a.awpcp-classifieds-menu--menu-item-link,
#classiwrapper a.awpcp-classifieds-menu--menu-item-link.button{
	display:inline-block;
	background:#fff;
	border:0;
	border-radius:999px;
	box-shadow:inset 0 0 0 1px var(--ssm-tag-line);
	text-shadow:none;
	height:auto;
	padding:11px 16px;
	font:700 12px/1 var(--ssm-display);
	letter-spacing:.06em;
	text-transform:uppercase;
	color:var(--ssm-ink);
}
#classiwrapper a.awpcp-classifieds-menu--menu-item-link:hover{background:var(--ssm-ink);box-shadow:none;color:#fff}
#classiwrapper .awpcp-classifieds-menu--post-listing-menu-item a.awpcp-classifieds-menu--menu-item-link{background:var(--ssm-sky);box-shadow:none;color:var(--ssm-ink)}
#classiwrapper .awpcp-classifieds-menu--post-listing-menu-item a.awpcp-classifieds-menu--menu-item-link:hover{background:var(--ssm-sky-hover)}

/* Category tree */
.classifiedcats{margin:0 0 28px}
.classifiedcats .fixfloat{clear:both}
#awpcpcatlayout ul.top-level-categories,
ul.showcategoriesmainlist{
	display:grid;
	grid-template-columns:repeat(auto-fill,minmax(260px,1fr));
	gap:12px;
	list-style:none;
	margin:0;
	padding:0;
}
#awpcpcatlayout ul.top-level-categories > li,
ul.showcategoriesmainlist > li{
	list-style:none;
	margin:0;
	padding:18px;
	width:auto;
	float:none;
	background:#fff;
	border-radius:var(--ssm-radius);
	box-shadow:inset 0 0 0 1px var(--ssm-line);
}
p.top-level-category,
p.maincategoryclass{margin:0;padding:0;background:none;border:0;font:700 17px/1.2 var(--ssm-display);color:var(--ssm-ink)}
#classiwrapper a.toplevelitem{color:var(--ssm-ink)}
#classiwrapper a.toplevelitem:hover{color:var(--ssm-teal)}
#awpcpcatlayout ul.top-level-categories ul{display:flex;flex-wrap:wrap;gap:7px;list-style:none;margin:12px 0 0;padding:0}
#awpcpcatlayout ul.top-level-categories ul li{margin:0;list-style:none}
#classiwrapper #awpcpcatlayout ul.top-level-categories ul a{
	display:inline-block;
	padding:6px 8px;
	border-radius:5px;
	box-shadow:inset 0 0 0 1px var(--ssm-tag-line);
	font:600 10px/1 var(--ssm-mono);
	letter-spacing:.08em;
	text-transform:uppercase;
	color:var(--ssm-body);
}
#classiwrapper #awpcpcatlayout ul.top-level-categories ul a:hover{background:var(--ssm-sky);box-shadow:none;color:var(--ssm-ink)}

/* Listing cards — thumbnail | body | price. Markup comes from the AWPCP
   "Ad Layout" template set in update-surplusstockmarket.php, so every value
   has its own element. AWPCP's stylesheet floats and sizes the old excerpt
   parts; #classiwrapper scoping outranks it. */
#classiwrapper .awpcp-listings{display:flex;flex-direction:column;gap:12px;margin:0 0 24px;padding:0;background:none;border:0}
#classiwrapper .awpcp-listings > .fixfloat{display:none}

#classiwrapper .ssm-listing{
	display:grid;
	grid-template-columns:148px minmax(0,1fr) 190px;
	gap:22px;
	align-items:center;
	margin:0;
	padding:18px;
	border:0;
	border-radius:var(--ssm-radius);
	background:#fff;
	box-shadow:inset 0 0 0 1px var(--ssm-line);
	font:400 14px/1.5 var(--ssm-sans);
	color:var(--ssm-body);
	transition:box-shadow .12s ease;
}
#classiwrapper .ssm-listing:hover{box-shadow:inset 0 0 0 1.5px var(--ssm-sky),0 4px 14px rgba(11,13,15,.07)}

/* Thumbnail — same box whether there is a photo or AWPCP's placeholder */
#classiwrapper .ssm-listing__thumb{
	width:148px;
	height:104px;
	border-radius:10px;
	overflow:hidden;
	background:var(--ssm-wash);
	box-shadow:0 0 0 1px rgba(22,96,127,.12);
}
#classiwrapper .ssm-listing__thumb a{display:block;width:100%;height:100%}
#classiwrapper .ssm-listing__thumb img{
	display:block;
	width:100% !important; /* AWPCP sets an inline width:80px */
	height:100%;
	max-width:none;
	object-fit:cover;
	border-radius:0;
}
#classiwrapper .ssm-listing__thumb img.awpcp-noimage-placeholder{object-fit:contain;padding:22px;box-sizing:border-box;opacity:.5}

#classiwrapper .ssm-listing__body{min-width:0}
#classiwrapper .ssm-listing__tags{display:flex;flex-wrap:wrap;gap:7px;margin:0 0 10px}
#classiwrapper .ssm-listing__tags span{
	padding:6px 8px;
	border-radius:5px;
	font:600 10px/1 var(--ssm-mono);
	letter-spacing:.08em;
	text-transform:uppercase;
	white-space:nowrap;
}
#classiwrapper .ssm-listing__cat{background:var(--ssm-sky);color:var(--ssm-ink)}
#classiwrapper .ssm-listing__parent{box-shadow:inset 0 0 0 1px var(--ssm-tag-line);color:var(--ssm-body)}
#classiwrapper .ssm-listing__tags span:empty{display:none}

#classiwrapper .ssm-listing__title{
	margin:0 0 6px;
	font:700 19px/1.3 var(--ssm-display);
	letter-spacing:-.01em;
	text-wrap:pretty;
}
#classiwrapper .ssm-listing__title a{color:var(--ssm-ink)}
#classiwrapper .ssm-listing__title a:hover{color:var(--ssm-teal)}
#classiwrapper .ssm-listing__excerpt{
	font:400 13.5px/1.5 var(--ssm-sans);
	color:var(--ssm-body);
	display:-webkit-box;
	-webkit-line-clamp:2;
	-webkit-box-orient:vertical;
	overflow:hidden;
}

#classiwrapper .ssm-listing__side{text-align:right}
#classiwrapper .ssm-listing__price{font:800 26px/1 var(--ssm-display);letter-spacing:-.02em;color:var(--ssm-teal)}
#classiwrapper .ssm-listing__price:empty::before{content:"POA";font-size:20px;color:var(--ssm-mute)}
#classiwrapper a.ssm-listing__cta{
	display:block;
	margin-top:12px;
	padding:12px 10px;
	border-radius:999px;
	background:var(--ssm-sky);
	color:var(--ssm-ink);
	font:700 12px/1 var(--ssm-display);
	letter-spacing:.05em;
	text-transform:uppercase;
	text-align:center;
	text-decoration:none;
}
#classiwrapper a.ssm-listing__cta:hover{background:var(--ssm-sky-hover);color:var(--ssm-ink)}
#classiwrapper .ssm-listing__date{
	margin-top:9px;
	font:500 10px/1 var(--ssm-mono);
	letter-spacing:.12em;
	text-transform:uppercase;
	color:var(--ssm-mute);
}

/* Wanted ads — warm wash, as on screen 01 */
#classiwrapper .ssm-listing.ssm-parent-Wanted{background:var(--ssm-wanted-wash);box-shadow:inset 0 0 0 1px #F0DFB6}
#classiwrapper .ssm-parent-Wanted .ssm-listing__parent{background:var(--ssm-flag);box-shadow:none;color:#fff}
#classiwrapper .ssm-parent-Wanted .ssm-listing__price{color:var(--ssm-good)}

/* Single listing page (prototype screen 02). Markup from the AWPCP "Single
   Ad Layout" set in update-surplusstockmarket.php; template
   templates/single-awpcp_listing.html. */
.ssm-single-page{padding:40px 0 96px}
.ssm-single-page > .wp-block-post-content{
	max-width:calc(var(--ssm-wrap) + var(--ssm-gutter) * 2);
	margin:0 auto;
	padding:0 var(--ssm-gutter);
	box-sizing:border-box;
}
.ssm-single-page .wp-block-post-content > *{max-width:none}

#classiwrapper .ssm-single{
	display:grid;
	grid-template-columns:minmax(0,1fr) 380px;
	gap:48px;
	align-items:start;
	margin-top:8px;
	font:400 15px/1.65 var(--ssm-sans);
	color:var(--ssm-body);
}
#classiwrapper .ssm-single__date{box-shadow:inset 0 0 0 1px var(--ssm-tag-line);color:var(--ssm-mute)}
#classiwrapper .ssm-single__title{
	margin:14px 0 24px;
	font:800 38px/1.12 var(--ssm-display);
	letter-spacing:-.025em;
	color:var(--ssm-ink);
	text-wrap:pretty;
}
#classiwrapper .ssm-single__photos{margin:0 0 32px}
#classiwrapper .ssm-single__photos .awpcp-ad-primary-image{float:none;margin:0;width:auto}
/* White, not wash: member photos are often shot on white, and a tinted frame
   shows their edges. */
#classiwrapper .ssm-single__photos .awpcp-ad-primary-image a.thumbnail{display:block;border-radius:var(--ssm-radius);overflow:hidden;background:#fff;box-shadow:inset 0 0 0 1px var(--ssm-line)}
#classiwrapper .ssm-single__photos .awpcp-ad-primary-image img{
	display:block;
	width:100%;
	height:auto;
	max-height:520px;
	object-fit:contain;
	padding:0;
	border:0;
	background:none;
	box-shadow:none;
}
#classiwrapper .ssm-single__photos a.enlarge{display:inline-block;margin-top:8px;font:500 12px/1 var(--ssm-sans);color:var(--ssm-mute)}
#classiwrapper .ssm-single__more{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin:10px 0 0;padding:0;list-style:none}
#classiwrapper .ssm-single__more:empty{display:none}
#classiwrapper .ssm-single__more li{margin:0;list-style:none}
#classiwrapper .ssm-single__more img{width:100%;height:96px;object-fit:cover;border-radius:10px;border:0;padding:0}

#classiwrapper .ssm-single__subhead{
	margin:0 0 14px;
	padding:0 0 10px;
	border-bottom:1px solid var(--ssm-line);
	font:700 13px/1 var(--ssm-display);
	letter-spacing:.1em;
	text-transform:uppercase;
	color:var(--ssm-ink);
}
#classiwrapper .ssm-single__notes{max-width:68ch}
#classiwrapper .ssm-single__notes p{margin:0 0 12px}
#classiwrapper .ssm-single__tools{display:flex;gap:16px;align-items:center;margin-top:28px;font:500 13px/1 var(--ssm-sans)}
#classiwrapper .ssm-single__tools a{color:var(--ssm-mute)}

/* Sidebar */
#classiwrapper .ssm-single__side{
	position:sticky;
	top:24px;
	display:flex;
	flex-direction:column;
	gap:16px;
	padding:28px;
	border-radius:var(--ssm-radius-lg);
	background:var(--ssm-wash);
}
#classiwrapper .ssm-single__price{font:800 44px/1 var(--ssm-display);letter-spacing:-.025em;color:var(--ssm-ink)}
#classiwrapper .ssm-single__enquire{
	padding:22px;
	border-radius:var(--ssm-radius);
	background:#fff;
	box-shadow:inset 0 0 0 1.5px var(--ssm-sky);
}
#classiwrapper .ssm-single__enquire h3{margin:0 0 6px;font:700 18px/1.3 var(--ssm-display);color:var(--ssm-ink)}
#classiwrapper .ssm-single__enquire p{margin:0 0 18px;font:400 13px/1.55 var(--ssm-sans);color:var(--ssm-mute)}
#classiwrapper a.ssm-single__cta{
	display:block;
	padding:15px 20px;
	border-radius:999px;
	background:var(--ssm-sky);
	color:var(--ssm-ink);
	font:700 14px/1 var(--ssm-display);
	letter-spacing:.04em;
	text-transform:uppercase;
	text-align:center;
	text-decoration:none;
}
#classiwrapper a.ssm-single__cta:hover{background:var(--ssm-sky-hover);color:var(--ssm-ink)}
#classiwrapper .ssm-single__seller{padding:18px 22px;border-radius:var(--ssm-radius);background:#fff;box-shadow:inset 0 0 0 1px var(--ssm-line)}
#classiwrapper .ssm-single__seller p{margin:0}
#classiwrapper .ssm-single__label{font:500 10px/1 var(--ssm-mono);letter-spacing:.12em;text-transform:uppercase;color:var(--ssm-mute);margin-bottom:10px !important}
#classiwrapper .ssm-single__seller-name{font:700 18px/1.3 var(--ssm-display);color:var(--ssm-ink)}
#classiwrapper .ssm-single__seller-meta{font:400 13px/1.5 var(--ssm-sans);color:var(--ssm-mute)}
#classiwrapper .ssm-single__seller-meta:empty{display:none}
#classiwrapper .ssm-single__trade{padding:16px 18px;border-radius:12px;background:var(--ssm-wanted-wash);box-shadow:inset 0 0 0 1px #F0DFB6}
#classiwrapper .ssm-single__trade p{margin:0;font:400 12.5px/1.55 var(--ssm-sans);color:var(--ssm-body)}
#classiwrapper .ssm-single__trade .ssm-single__trade-title{margin-bottom:4px;font:600 13px/1.4 var(--ssm-sans);color:var(--ssm-ink)}

/* Wanted ads */
#classiwrapper .ssm-single.ssm-parent-Wanted .ssm-listing__parent{background:var(--ssm-flag);box-shadow:none;color:#fff}
#classiwrapper .ssm-single.ssm-parent-Wanted .ssm-single__price{color:var(--ssm-good)}

@media (max-width:900px){
	#classiwrapper .ssm-single{grid-template-columns:1fr;gap:28px}
	#classiwrapper .ssm-single__side{position:static}
	#classiwrapper .ssm-single__title{font-size:28px}
	#classiwrapper .ssm-single__price{font-size:36px}
}

/* Single listing */
.awpcp-single-listing .awpcp-listing-title,
.awpcp-show-listing-page h1{
	font:800 34px/1.15 var(--ssm-display);
	letter-spacing:-.025em;
	max-width:28ch;
	margin:0 0 20px;
}
.awpcp-listing-fields,
.awpcp-listing-meta{
	display:grid;
	grid-template-columns:repeat(4,1fr);
	gap:0;
	margin:0 0 24px;
	background:#fff;
	border-radius:var(--ssm-radius);
	box-shadow:inset 0 0 0 1px var(--ssm-line);
	overflow:hidden;
}
.awpcp-listing-fields dt,
.awpcp-listing-meta dt{
	padding:16px 18px 0;
	margin:0 0 8px;
	font:500 10px/1 var(--ssm-mono);
	letter-spacing:.12em;
	text-transform:uppercase;
	color:var(--ssm-mute);
}
.awpcp-listing-fields dd,
.awpcp-listing-meta dd{padding:0 18px 16px;margin:0;font:600 17px/1.2 var(--ssm-sans);color:var(--ssm-ink)}

/* Forms — post a listing, search, enquiry */
.awpcp-form,
#awpcp-place-ad-form,
.awpcp-search-listings-form{background:#fff;border:0;border-radius:var(--ssm-radius);box-shadow:inset 0 0 0 1px var(--ssm-line);padding:28px}
.awpcp-form-field{margin-bottom:18px}
#classiwrapper label,
.awpcp-form label{
	display:block;
	margin:0 0 8px;
	font:500 10px/1 var(--ssm-mono);
	letter-spacing:.12em;
	text-transform:uppercase;
	color:var(--ssm-mute);
}
#classiwrapper label.screen-reader-text{position:absolute;left:-9999px}

.awpcp-contact-seller-form,
#awpcp-contact-form,
.awpcp-reply-to-listing-form{
	background:#fff;
	border:0;
	border-radius:var(--ssm-radius);
	box-shadow:inset 0 0 0 1px var(--ssm-line);
	border-top:3px solid var(--ssm-sky);
	padding:24px;
	margin-top:24px;
}

#classiwrapper .button,
#classiwrapper input[type="submit"]{
	background:var(--ssm-sky);
	color:var(--ssm-ink);
	border:0;
	border-radius:999px;
	box-shadow:none;
	text-shadow:none;
	height:auto;
	padding:14px 24px;
	font:700 13px/1 var(--ssm-display);
	letter-spacing:.04em;
	text-transform:uppercase;
	cursor:pointer;
}
#classiwrapper .button:hover,
#classiwrapper input[type="submit"]:hover{background:var(--ssm-sky-hover);color:var(--ssm-ink)}

/* Post a listing form sections (AWPCP 4 collapsible sections). Found in the
   7 Oct 2026 front-end check: AWPCP's grey title bars and square boxes. */
#classiwrapper .awpcp-submit-listing-section{
	margin:0 0 16px;
	border:0;
	border-radius:var(--ssm-radius);
	background:#fff;
	box-shadow:inset 0 0 0 1px var(--ssm-line);
	overflow:hidden;
}
#classiwrapper h2.awpcp-submit-listing-section-title{
	margin:0;
	padding:18px 24px;
	background:none;
	border-bottom:1px solid var(--ssm-line);
	font:700 17px/1.3 var(--ssm-display);
	letter-spacing:-.01em;
	color:var(--ssm-ink);
}
#classiwrapper .awpcp-submit-listing-section-content{padding:22px 24px}
#classiwrapper .awpcp-submit-listing-section .select2-container .select2-selection--single{
	height:44px;
	display:flex;
	align-items:center;
	border:1px solid var(--ssm-line-2);
	border-radius:10px;
}
#classiwrapper .awpcp-submit-listing-section .select2-selection__arrow{height:100%;top:0;right:8px}
#classiwrapper .awpcp-payment-term,
#classiwrapper .awpcp-payment-term-price-in-money{
	background:var(--ssm-wash);
	border:1px solid var(--ssm-line);
	border-radius:10px;
}
#classiwrapper input.button-primary + input.button,
#classiwrapper input[type="reset"]{background:#fff;box-shadow:inset 0 0 0 1.5px var(--ssm-ink)}

/* AWPCP messages ("Your listing has been submitted", errors) — the plugin's
   pale yellow boxes become the site's notice style. */
body:not(.wp-admin) #classiwrapper .awpcp-updated,
body:not(.wp-admin) #classiwrapper .awpcp-error{
	margin:0 0 12px;
	padding:14px 18px;
	border:0;
	border-left:3px solid var(--ssm-sky);
	border-radius:10px;
	background:var(--ssm-wash);
	font:400 14.5px/1.6 var(--ssm-sans);
	color:var(--ssm-body);
}
body:not(.wp-admin) #classiwrapper .awpcp-error{border-left-color:var(--ssm-flag);background:#FDF1F1;color:var(--ssm-ink)}

/* Listing title bar on the single listing page and the finish-step preview */
#classiwrapper #showawpcpadpage .awpcp-title,
#classiwrapper #showawpcpadpage .adtitle{
	padding:0 0 12px;
	margin:8px 0 20px;
	background:none;
	border:0;
	border-bottom:1px solid var(--ssm-line);
	font:800 28px/1.15 var(--ssm-display);
	letter-spacing:-.02em;
	color:var(--ssm-ink);
}
#classiwrapper #showawpcpadpage .awpcp-title a{color:var(--ssm-ink)}

/* Submit-listing step indicator — numbered circles joined by a rule.
   Completed: teal with a tick. Current: sky. Pending: grey outline.
   Prefixed with body to outrank AWPCP's own .awpcp-form-steps rules, which
   load later and hide the names of completed and pending steps. */
body .awpcp-form-steps{margin:0 0 32px}
body .awpcp-form-steps .m-awpcp-form-steps__list{
	display:flex;
	align-items:flex-start;
	gap:0;
	list-style:none;
	margin:0 !important;
	padding:0 !important;
}
body .awpcp-form-steps .awpcp-form-steps-step{
	position:relative;
	flex:1 1 0;
	min-width:0;
	margin:0;
	padding:0;
	background:none;
	border:0;
	border-radius:0;
	box-shadow:none;
}
/* Connector from this step's circle to the next */
body .awpcp-form-steps .awpcp-form-steps-step:not(:last-child)::after{
	content:"";
	position:absolute;
	top:15px;
	left:calc(50% + 24px);
	right:calc(-50% + 24px);
	height:2px;
	border-radius:2px;
	background:var(--ssm-line-2);
}
body .awpcp-form-steps .awpcp-form-steps-completed-step:not(:last-child)::after{background:var(--ssm-teal)}

body .awpcp-form-steps .awpcp-form-steps-step-inner{
	display:flex;
	flex-direction:column;
	align-items:center;
	gap:10px;
	padding:0 6px;
	color:var(--ssm-mute);
	font:500 13px/1.3 var(--ssm-sans);
	text-align:center;
	cursor:default;
}
body .awpcp-form-steps .awpcp-form-steps-step-number{
	display:flex;
	align-items:center;
	justify-content:center;
	width:32px;
	height:32px;
	padding:0;
	border:0;
	border-radius:999px;
	background:#fff;
	box-shadow:inset 0 0 0 1.5px var(--ssm-line-3);
	font:700 14px/1 var(--ssm-display);
	color:var(--ssm-mute);
}
/* AWPCP appends a full stop to the current step's number ("2.") */
body .awpcp-form-steps .awpcp-form-steps-step .awpcp-form-steps-step-number::after{content:none}
body .awpcp-form-steps .awpcp-form-steps-step-name{
	display:block;
	max-width:16ch;
	font:500 11px/1.3 var(--ssm-mono);
	letter-spacing:.1em;
	text-transform:uppercase;
	color:var(--ssm-mute);
}

/* Current */
body .awpcp-form-steps .awpcp-form-steps-current-step .awpcp-form-steps-step-number{
	background:var(--ssm-sky);
	box-shadow:0 0 0 5px var(--ssm-sky-tint);
	color:var(--ssm-ink);
}
body .awpcp-form-steps .awpcp-form-steps-current-step .awpcp-form-steps-step-name{color:var(--ssm-ink);font-weight:600}

/* Completed — the number is swapped for a tick */
body .awpcp-form-steps .awpcp-form-steps-completed-step .awpcp-form-steps-step-number{
	background:var(--ssm-teal);
	box-shadow:none;
	color:transparent;
	font-size:0;
}
body .awpcp-form-steps .awpcp-form-steps-completed-step .awpcp-form-steps-step-number::before{
	content:"";
	width:11px;
	height:6px;
	margin-top:-3px;
	border:solid #fff;
	border-width:0 0 2.5px 2.5px;
	transform:rotate(-45deg);
}
body .awpcp-form-steps .awpcp-form-steps-completed-step .awpcp-form-steps-step-name{display:block;color:var(--ssm-teal)}

/* Pending */
body .awpcp-form-steps .awpcp-form-steps-pending-step .awpcp-form-steps-step-name{display:block}
body .awpcp-form-steps .awpcp-form-steps-pending-step a{color:inherit}

@media (max-width:768px){
	/* Keep the circles, drop all but the current step's name */
	body .awpcp-form-steps .awpcp-form-steps-step-name{display:none !important}
	body .awpcp-form-steps .awpcp-form-steps-current-step .awpcp-form-steps-step-name{display:block !important}
}

/* Board toolbar — Category and "Ads per page" in one row above the list
   (built in inc/awpcp.php). */
.ssm-board-toolbar{
	display:flex;
	align-items:flex-end;
	justify-content:space-between;
	gap:16px 32px;
	flex-wrap:wrap;
	margin:0 0 20px;
	padding:16px 0 0;
	border-top:1px solid var(--ssm-line-2);
}
.ssm-board-toolbar__category{flex:1 1 320px;max-width:520px}
#classiwrapper .ssm-board-toolbar .awpcp-category-switcher,
#classiwrapper .ssm-board-toolbar .awpcp-category-dropdown-container{margin:0}
.ssm-board-toolbar__per-page{flex:none}

/* Category select (select2) — pill to match the per-page control */
#classiwrapper .ssm-board-toolbar .awpcp-category-dropdown-container{display:flex;align-items:center;gap:10px}
#classiwrapper .ssm-board-toolbar .awpcp-category-dropdown-label{
	flex:none;
	margin:0;
	font:500 10px/1 var(--ssm-mono);
	letter-spacing:.12em;
	text-transform:uppercase;
	color:var(--ssm-mute);
}
#classiwrapper .ssm-board-toolbar .select2-container{flex:1 1 auto;min-width:0}
#classiwrapper .ssm-board-toolbar .select2-container .select2-selection{
	min-height:40px;
	display:flex;
	align-items:center;
	padding:0 34px 0 16px;
	border:1px solid var(--ssm-line-2);
	border-radius:999px;
	background:#fff;
}
#classiwrapper .ssm-board-toolbar .select2-container--focus .select2-selection,
#classiwrapper .ssm-board-toolbar .select2-container--open .select2-selection{border-color:var(--ssm-teal);box-shadow:0 0 0 3px var(--ssm-sky-tint)}
#classiwrapper .ssm-board-toolbar .select2-selection__rendered{padding:0;font:500 14px/1.2 var(--ssm-sans);color:var(--ssm-ink)}
#classiwrapper .ssm-board-toolbar .select2-selection__rendered li{margin:0}
#classiwrapper .ssm-board-toolbar .select2-selection__placeholder,
#classiwrapper .ssm-board-toolbar .select2-search__field::placeholder{color:var(--ssm-mute)}
#classiwrapper .ssm-board-toolbar .select2-selection__arrow{height:100%;top:0;right:12px}

/* Category dropdown list. select2 appends it to <body>, outside the board,
   so it is targeted by AWPCP's dropdown class rather than #classiwrapper. */
.awpcp-category-dropdown-options.select2-dropdown{
	border:1px solid var(--ssm-line-2);
	border-radius:12px;
	box-shadow:0 12px 28px rgba(11,13,15,.1);
	overflow:hidden;
	font:400 14px/1.3 var(--ssm-sans);
}
/* AWPCP blanks the "All Categories" placeholder option so select2 can show
   placeholder text, but its results list doesn't hide it, leaving an empty
   row at the top. */
.awpcp-category-dropdown-options .select2-results__option:empty{display:none}
.awpcp-category-dropdown-options .select2-search--dropdown{padding:10px 10px 4px}
.awpcp-category-dropdown-options .select2-search--dropdown .select2-search__field{
	border:1px solid var(--ssm-line-2);
	border-radius:8px;
	padding:8px 12px;
	font:400 14px/1.2 var(--ssm-sans);
	outline:0;
}
.awpcp-category-dropdown-options .select2-search--dropdown .select2-search__field:focus{border-color:var(--ssm-teal);box-shadow:0 0 0 3px var(--ssm-sky-tint)}
.awpcp-category-dropdown-options .select2-results__option{padding:9px 14px;color:var(--ssm-ink)}
.awpcp-category-dropdown-options .awpcp-category-dropdown-option-level-1{font-weight:600}
.awpcp-category-dropdown-options .awpcp-category-dropdown-option-level-2{padding-left:28px;color:var(--ssm-body)}
.awpcp-category-dropdown-options .select2-results__option--highlighted[aria-selected],
.awpcp-category-dropdown-options .select2-results__option--highlighted{background:var(--ssm-sky-tint);color:var(--ssm-ink)}
.awpcp-category-dropdown-options .select2-results__option[aria-selected="true"]{background:var(--ssm-wash);color:var(--ssm-teal)}

/* Pager — AWPCP floats it right, which lets it hang out of the board
   section. Keep it in flow. */
#classiwrapper .awpcp-pagination{
	float:none;
	display:flex;
	flex-direction:row;
	align-items:center;
	justify-content:space-between;
	flex-wrap:wrap;
	gap:12px 24px;
	margin:0;
	padding:0;
}
#classiwrapper .awpcp-pagination:empty,
#classiwrapper .awpcp-pagination:not(:has(*)){display:none}
#classiwrapper .awpcp-listings ~ .awpcp-pagination{margin-top:24px}
/* The per-page form now lives in the toolbar; hide the copy below the list. */
#classiwrapper .awpcp-listings ~ .awpcp-pagination .awpcp-pagination-form{display:none}

#classiwrapper .awpcp-pagination-links{display:flex;align-items:center;flex-wrap:wrap;gap:6px;margin:0}
#classiwrapper .awpcp-pagination-summary{
	margin-right:8px;
	padding:0;
	font:500 11px/1 var(--ssm-mono);
	letter-spacing:.1em;
	text-transform:uppercase;
	color:var(--ssm-mute);
}
#classiwrapper .awpcp-pagination-links .awpcp-pagination-links--link{
	display:inline-flex;
	align-items:center;
	justify-content:center;
	min-width:38px;
	height:38px;
	margin:0;
	padding:0 12px;
	border-radius:999px;
	box-shadow:inset 0 0 0 1px var(--ssm-line-2);
	background:#fff;
	font:600 13px/1 var(--ssm-sans);
	color:var(--ssm-ink);
	text-decoration:none;
}
#classiwrapper .awpcp-pagination-links a.awpcp-pagination-links--link:hover{box-shadow:inset 0 0 0 1.5px var(--ssm-ink);color:var(--ssm-ink)}
/* The current page is the one item rendered as a span, not a link */
#classiwrapper .awpcp-pagination-links span.awpcp-pagination-links--link{background:var(--ssm-ink);box-shadow:none;color:#fff}

/* Per-page form */
#classiwrapper .awpcp-pagination-form{display:flex;align-items:center;gap:10px;margin:0;padding:0}
#classiwrapper .awpcp-pagination-form label{
	margin:0;
	font:500 10px/1 var(--ssm-mono);
	letter-spacing:.12em;
	text-transform:uppercase;
	color:var(--ssm-mute);
	white-space:nowrap;
}
#classiwrapper .awpcp-pagination-form select{
	width:auto;
	min-width:76px;
	height:40px;
	padding:0 34px 0 16px;
	border:1px solid var(--ssm-line-2);
	border-radius:999px;
	background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%230B0D0F' stroke-width='1.5'/%3E%3C/svg%3E") no-repeat right 14px center;
	appearance:none;
	-webkit-appearance:none;
	font:600 14px/1 var(--ssm-sans);
	color:var(--ssm-ink);
	cursor:pointer;
}
#classiwrapper .awpcp-pagination-form select:focus{outline:0;border-color:var(--ssm-teal);box-shadow:0 0 0 3px var(--ssm-sky-tint)}

@media (max-width:768px){
	.ssm-board-toolbar{align-items:stretch}
	.ssm-board-toolbar__category{flex-basis:100%;max-width:none}
}


/* 16. Paid Memberships Pro (3.x) ========================================== */

:root{
	--pmpro--color--base:#ffffff;
	--pmpro--color--contrast:#0B0D0F;
	--pmpro--color--accent:#16607F;
	--pmpro--color--accent--variation:#0F4D66;
	--pmpro--color--border:#E8EBED;
	--pmpro--color--border--variation:#E1E5E8;
	--pmpro--borderradius:14px;
}

.pmpro{font-family:var(--ssm-sans);color:var(--ssm-ink)}
.pmpro h1,.pmpro h2,.pmpro h3{font-family:var(--ssm-display);font-weight:800;letter-spacing:-.02em}

.pmpro_section{margin:0 0 28px}
.pmpro_card{
	background:#fff;
	border:0;
	border-radius:var(--ssm-radius);
	box-shadow:inset 0 0 0 1px var(--ssm-line);
	margin:0 0 20px;
	overflow:hidden;
}
.pmpro_card_title,
.pmpro_card_actions{padding:18px 24px;border-bottom:1px solid var(--ssm-line)}
.pmpro_card_actions{border-bottom:0;border-top:1px solid var(--ssm-line);background:var(--ssm-wash)}
.pmpro_card_title h2,
.pmpro_card_title h3,
.pmpro .pmpro_card_title{font:700 17px/1.3 var(--ssm-display);letter-spacing:-.01em;margin:0}
.pmpro_card_content{padding:24px}

/* The account page title already says "My account"; PMPro repeats it as the
   first section heading (FOLLOW-UPS.md item 19). */
#pmpro_account-profile > .pmpro_section_title{display:none}

/* "Welcome, name" with the avatar — PMPro puts both in one heading without
   aligning them. */
.pmpro .pmpro_heading-with-avatar{display:flex;align-items:center;gap:14px}
.pmpro .pmpro_heading-with-avatar .avatar{
	flex:none;
	width:44px;
	height:44px;
	margin:0;
	border-radius:999px;
	box-shadow:0 0 0 1px var(--ssm-line-2);
}

/* Buttons */
.pmpro_btn,
a.pmpro_btn,
input.pmpro_btn,
button.pmpro_btn,
.pmpro_btn-select,
#pmpro_form input[type="submit"]{
	display:inline-block;
	box-sizing:border-box;
	background:var(--ssm-sky);
	color:var(--ssm-ink);
	border:0;
	border-radius:999px;
	padding:16px 30px;
	font:700 14px/1 var(--ssm-display);
	letter-spacing:.04em;
	text-transform:uppercase;
	text-align:center;
	text-decoration:none;
	cursor:pointer;
	box-shadow:none;
}
.pmpro_btn:hover,
a.pmpro_btn:hover,
.pmpro_btn-select:hover,
#pmpro_form input[type="submit"]:hover{background:var(--ssm-sky-hover);color:var(--ssm-ink)}
.pmpro_btn-cancel,
a.pmpro_btn-cancel{background:transparent;color:var(--ssm-ink);box-shadow:inset 0 0 0 1.5px var(--ssm-ink)}
.pmpro_btn-cancel:hover{background:var(--ssm-ink);color:#fff}

/* Checkout and account forms */
.pmpro_form_fieldset{border:0;padding:0;margin:0}
.pmpro_form_legend,
.pmpro_form_heading{font:700 17px/1.3 var(--ssm-display);color:var(--ssm-ink);margin:0 0 18px;padding:0}
.pmpro_form_field{margin-bottom:18px}
.pmpro_form_label,
.pmpro_form_field label,
#pmpro_form label{
	display:block;
	margin:0 0 8px;
	font:500 10px/1 var(--ssm-mono);
	letter-spacing:.12em;
	text-transform:uppercase;
	color:var(--ssm-mute);
}
.pmpro_form_input,
#pmpro_form input[type="text"],
#pmpro_form input[type="email"],
#pmpro_form input[type="password"],
#pmpro_form select,
#pmpro_form textarea{
	width:100%;
	box-sizing:border-box;
	background:#fff;
	border:1px solid var(--ssm-line-2);
	border-radius:10px;
	padding:12px 14px;
	font:400 15px/1.3 var(--ssm-sans);
	color:var(--ssm-ink);
}
.pmpro_form_input:focus,
#pmpro_form input:focus,
#pmpro_form select:focus{outline:0;border-color:var(--ssm-teal);box-shadow:0 0 0 3px var(--ssm-sky-tint)}
.pmpro_form_hint{font:400 12px/1.5 var(--ssm-sans);color:var(--ssm-mute);margin-top:6px}
#pmpro_pricing_fields .pmpro_card_content{background:var(--ssm-wash)}
.pmpro_level_name_text strong,
#pmpro_pricing_fields strong{color:var(--ssm-teal)}

/* Fallback levels table, in case [pmpro_levels] is placed on a page */
table.pmpro_table{width:100%;border-collapse:collapse;font:400 15px/1.5 var(--ssm-sans)}
table.pmpro_table th,
table.pmpro_table td{padding:14px 16px;border-bottom:1px solid var(--ssm-line);text-align:left}
table.pmpro_table thead th{font:500 10px/1 var(--ssm-mono);letter-spacing:.12em;text-transform:uppercase;color:var(--ssm-mute)}

/* Messages */
.pmpro_message,
.pmpro_content_message,
.pmpro_no_access{
	background:var(--ssm-wash);
	border:0;
	border-left:3px solid var(--ssm-sky);
	border-radius:10px;
	padding:14px 18px;
	font:400 14px/1.6 var(--ssm-sans);
	color:var(--ssm-body);
}
.pmpro_error{border-left-color:var(--ssm-flag);background:#FDF1F1}
.pmpro_success{border-left-color:var(--ssm-good);background:#F1F9F5}


/* 17. Default page template ================================================
   Checkout, account, terms and any other page without a designed pattern. */

.ssm-page{padding:72px var(--ssm-gutter) 96px}
.ssm-page > *{max-width:760px}
.ssm-page .alignwide{max-width:var(--ssm-wrap)}
.ssm-page__title{margin:0 auto 32px;font:800 44px/1.1 var(--ssm-display);letter-spacing:-.03em}
.ssm-page .wp-block-post-content{font:400 16px/1.7 var(--ssm-sans);color:var(--ssm-body)}
.ssm-page .wp-block-post-content h2,
.ssm-page .wp-block-post-content h3{color:var(--ssm-ink)}


/* 18. Responsive ===========================================================
   One template set; 768px is the mobile breakpoint the 01m–11m screens
   were drawn at. 1100px collapses the overlapping hero art first. */

@media (max-width:1100px){
	.ssm-nav{gap:18px}
	.ssm-masthead__in{gap:24px}

	.ssm-hero,
	.ssm-hero--board,
	.ssm-hero--membership{padding:64px 0 0;overflow:hidden}
	.ssm-hero__text{max-width:640px}
	.ssm-canvas .ssm-hero__art{
		position:relative;
		top:auto;right:auto;
		width:min(560px,100%);
		margin:24px auto -8px;
	}
	.ssm-hero--home + .ssm-section--after-hero,
	.ssm-hero--board + .ssm-section--after-hero,
	.ssm-hero--membership + .ssm-section--after-hero{padding-top:80px}

	.ssm-band,.ssm-band--verified{padding:72px 0}
	.ssm-band__in,
	.ssm-band__in--flip{grid-template-columns:1fr;gap:32px}
	.ssm-band--direct .ssm-band__art,
	.ssm-band--verified .ssm-band__art{margin:0 auto;max-width:520px}
	.ssm-band__in--flip .ssm-band__art{order:2;max-width:340px}

	.ssm-tiers{grid-template-columns:1fr;max-width:520px;margin-inline:auto}
	.ssm-tier{min-height:0}
	.ssm-tier--all{margin-top:0}

	.ssm-faq{grid-template-columns:1fr;gap:40px}

	#classiwrapper .ssm-listing{grid-template-columns:120px minmax(0,1fr);row-gap:16px}
	#classiwrapper .ssm-listing__thumb{width:120px;height:90px}
	#classiwrapper .ssm-listing__side{
		grid-column:1 / -1;
		display:flex;
		align-items:center;
		gap:16px;
		text-align:left;
		padding-top:14px;
		border-top:1px solid var(--ssm-line);
	}
	#classiwrapper .ssm-listing__price{flex:1}
	#classiwrapper a.ssm-listing__cta{margin:0;padding:12px 20px}
	#classiwrapper .ssm-listing__date{margin:0;order:-1;flex-basis:100%}
	#classiwrapper .ssm-listing__side{flex-wrap:wrap}
}

@media (max-width:900px){
	.ssm-nav,
	.ssm-masthead__actions{display:none}
	.ssm-menu{display:block}
	.ssm-masthead{position:relative}
}

@media (max-width:768px){
	:root{--ssm-gutter:16px}

	.ssm-utility__left{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}
	.ssm-utility__in{font-size:12px;gap:12px}
	.ssm-utility__right{gap:14px}
	.ssm-masthead__in{padding:14px var(--ssm-gutter)}
	.ssm-logo img{height:48px}

	.ssm-footer__in{flex-direction:column;align-items:flex-start;gap:20px;padding:32px var(--ssm-gutter)}
	.ssm-footer__pub{margin-left:0}

	.ssm-hero,
	.ssm-hero--board,
	.ssm-hero--membership{padding-top:48px}
	.ssm-canvas .ssm-hero__title,
	.ssm-canvas .ssm-hero__title--xl,
	.ssm-canvas .ssm-hero--membership .ssm-hero__title{font-size:36px;line-height:1.08}
	.ssm-hero__lede,
	.ssm-hero--board .ssm-hero__lede,
	.ssm-hero--membership .ssm-hero__lede{font-size:16px}
	.ssm-actions .wp-block-button{flex:1 1 auto}
	.ssm-actions .wp-block-button__link{width:100%;padding-inline:20px}

	.ssm-section{padding:64px 0}
	.ssm-section--tight{padding:0 0 56px}
	.ssm-intro{margin-bottom:40px}
	.ssm-canvas .ssm-intro__title{font-size:30px}
	.ssm-intro__lede{font-size:16px}

	.ssm-steps{grid-template-columns:1fr;gap:40px}
	.ssm-step__art{height:200px}

	.ssm-canvas .ssm-band h2{font-size:28px}

	.ssm-offer{grid-template-columns:1fr;padding:32px 24px;gap:24px}
	.ssm-offer__price{text-align:left}
	.ssm-figure{font-size:56px}

	.ssm-canvas .ssm-tiles{grid-template-columns:repeat(2,minmax(0,1fr))}

	.ssm-cta{padding:56px var(--ssm-gutter)}
	.ssm-canvas .ssm-cta h2{font-size:30px}
	.ssm-joinband__in{flex-direction:column;align-items:stretch;gap:28px}
	.ssm-canvas .ssm-joinband h2{font-size:26px}

	.ssm-tier{padding:28px 22px 24px}
	.ssm-tier__price{font-size:44px}

	.ssm-pagehead{padding:48px var(--ssm-gutter) 40px}
	.ssm-canvas .ssm-pagehead h1{font-size:34px}
	.ssm-qa summary{font-size:17px;padding:22px 0}
	.ssm-qa > p{padding-right:0;font-size:15px}
	.ssm-pair{grid-template-columns:1fr;gap:28px}

	.ssm-board__head{grid-template-columns:1fr}
	.ssm-board__note{grid-column:1;grid-row:auto;text-align:left}
	.ssm-canvas .ssm-board__head h2{font-size:28px}

	#classiwrapper .ssm-listing{grid-template-columns:1fr;padding:14px}
	#classiwrapper .ssm-listing__thumb{width:100%;height:180px}
	.awpcp-listing-fields,
	.awpcp-listing-meta{grid-template-columns:repeat(2,1fr)}
	.awpcp-single-listing .awpcp-listing-title,
	.awpcp-show-listing-page h1{font-size:26px}

	.ssm-page{padding:48px var(--ssm-gutter) 64px}
	.ssm-page__title{font-size:34px}
}