/**
 * Seyleniya Cinnamon - the editorial sections.
 *
 * One block per section, in homepage order (blueprint §40):
 * ORIGIN, STORY, CRAFT, PRODUCT, TRUST, GLOBAL VISION, CONTACT.
 *
 * Mobile-first throughout; multi-column layouts arrive in responsive.css.
 */

/* ==================================================================
 * Hero (blueprint §9) - the most important section on the site
 * ============================================================== */

.sy-hero {
	position: relative;
	display: flex;
	align-items: center;
	/* Not 100vh: the hero must leave a hint of the next section visible so
	 * the reader knows to scroll, and must stay readable at 360px (§35). */
	min-height: min(46rem, 88svh);
	/* Yields to an explicit value, as .sy-section and the page hero do. The
	 * hero writes its own <section> rather than going through
	 * sy_section_open(), which is how it was missed. */
	padding-block: var(--sy-section-pt, var(--sy-space-2xl))
		var(--sy-section-pb, var(--sy-space-2xl));
	background-color: var(--sy-ground-base);
	overflow: hidden;
}

.sy-hero__media {
	position: absolute;
	inset: 0;
	z-index: 0;
}

.sy-hero__media img,
.sy-hero__media .sy-image--empty {
	width: 100%;
	height: 100%;
	border-radius: 0;
	object-fit: cover;
}

/*
 * A cream scrim, heaviest where the copy sits. Warm rather than grey, so a
 * photograph never turns the ground cold - and strong enough that black text
 * clears WCAG AA over any image the business supplies (§45).
 */
.sy-hero__media::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(
		to right,
		rgba(var(--sy-cream-rgb), 0.94) 0%,
		rgba(var(--sy-cream-rgb), 0.82) 42%,
		rgba(var(--sy-cream-rgb), 0.34) 100%
	);
}

.sy-hero__inner {
	position: relative;
	z-index: 1;
	max-width: 42rem;
}

.sy-hero__title {
	margin-bottom: var(--sy-space-md);
	font-size: var(--sy-display-xl);
	line-height: var(--sy-leading-tight);
	text-transform: uppercase;
	letter-spacing: 0.005em;
}

.sy-hero__lead {
	max-width: 38ch;
	margin-bottom: var(--sy-space-lg);
}

.sy-hero__mark {
	width: 3.5rem;
	margin-bottom: var(--sy-space-md);
	color: var(--sy-accent);
}

/* ==================================================================
 * Origin strip (blueprint §10) - the marquee, and the only one
 * ============================================================== */

.sy-origin-strip {
	/* A div rather than a .sy-section, so it needs the fallback spelled out
	 * here too, or its Space controls would sit in the panel doing nothing. */
	padding-block: var(--sy-section-pt, var(--sy-space-md))
		var(--sy-section-pb, var(--sy-space-md));
	background-color: var(--sy-ground-inverse);
	color: var(--sy-ground-inverse-text);
	overflow: hidden;
}

/*
 * No gap on the track. That is the whole fix.
 *
 * With `gap`, N items carry N-1 gaps, so a track of 2N items is
 * `2N items + (2N-1) gaps` while one true cycle is `N items + N gaps`. The
 * -50% keyframe then lands half a gap short and the strip visibly jumps every
 * loop. Carrying the spacing inside each item as padding makes the track
 * exactly `2N x (item + spacer)`, so -50% is precisely one cycle.
 */
.sy-origin-strip__track {
	display: flex;
	width: max-content;
	animation: sy-marquee 42s linear infinite;
}

.sy-origin-strip:hover .sy-origin-strip__track,
.sy-origin-strip:focus-within .sy-origin-strip__track {
	animation-play-state: paused;
}

.sy-origin-strip__item {
	display: inline-flex;
	align-items: center;
	/* The spacer lives inside the item so the cycle width stays exact. */
	gap: var(--sy-space-lg);
	padding-inline-end: var(--sy-space-lg);
	font-size: var(--sy-text-xs);
	font-weight: var(--sy-weight-medium);
	letter-spacing: var(--sy-tracking-eyebrow);
	text-transform: uppercase;
	white-space: nowrap;
}

.sy-origin-strip__dot {
	width: 4px;
	height: 4px;
	border-radius: var(--sy-radius-pill);
	background-color: var(--sy-taupe);
}

@keyframes sy-marquee {
	from { transform: translateX(0); }
	to { transform: translateX(-50%); }
}

/* Static, centred and readable when motion is unwelcome (§45). */
@media (prefers-reduced-motion: reduce) {
	.sy-origin-strip__track {
		animation: none;
		width: 100%;
		justify-content: center;
		flex-wrap: wrap;
	}

	/* Static, but show every phrase - hiding all but the first was hiding
	 * content from exactly the people who cannot watch it scroll past. */
	.sy-origin-strip__item {
		padding-inline-end: 0;
		gap: var(--sy-space-md);
		margin-inline: var(--sy-space-sm);
	}
}

/* ==================================================================
 * Brand introduction (blueprint §11)
 * ============================================================== */

.sy-brand-intro__media {
	position: relative;
}

.sy-brand-intro__body > * + * {
	margin-top: var(--sy-space-md);
}

/* ==================================================================
 * Ceylon cinnamon features (blueprint §12)
 * ============================================================== */

.sy-features__grid {
	gap: var(--sy-space-xl) var(--sy-grid-gap);
}

/* ==================================================================
 * Product showcase (blueprint §13)
 * ============================================================== */

.sy-products__head {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	justify-content: space-between;
	gap: var(--sy-space-md);
	margin-bottom: var(--sy-space-xl);
}

.sy-products__head h2 {
	margin: 0;
}

/* Explains why there are no prices yet. Phase 1 only (§58). */
.sy-products__note {
	margin-top: var(--sy-space-lg);
	font-size: var(--sy-text-sm);
	color: var(--sy-ink-64);
}

.sy-phase-2 .sy-products__note,
.sy-phase-3 .sy-products__note {
	display: none;
}

/* ==================================================================
 * Signature product - the Ceylon quill (blueprint §14)
 * ============================================================== */

.sy-signature {
	position: relative;
	overflow: hidden;
}

/*
 * The large C-shaped curve from the logo, sitting behind the copy. Purely
 * decorative and clipped by the section, so it never affects layout.
 */
.sy-signature__flourish {
	position: absolute;
	top: 50%;
	right: -14%;
	width: min(38rem, 70%);
	transform: translateY(-50%);
	color: var(--sy-taupe-24);
	pointer-events: none;
	z-index: 0;
}

.sy-signature .sy-container {
	position: relative;
	z-index: 1;
}

.sy-signature__body > * + * {
	margin-top: var(--sy-space-md);
}

.sy-signature__spec {
	display: grid;
	gap: var(--sy-space-sm);
	margin-top: var(--sy-space-lg);
	padding-top: var(--sy-space-lg);
	border-top: var(--sy-border);
}

.sy-signature__spec dt {
	font-size: var(--sy-text-xs);
	font-weight: var(--sy-weight-semibold);
	letter-spacing: var(--sy-tracking-eyebrow);
	text-transform: uppercase;
	color: var(--sy-accent-strong);
}

.sy-signature__spec dd {
	margin: var(--sy-space-3xs) 0 0;
	font-size: var(--sy-text-sm);
}

/* ==================================================================
 * Craftsmanship process (blueprint §15, §26)
 * ============================================================== */

.sy-craft__steps {
	display: grid;
	gap: var(--sy-space-lg);
	margin-top: var(--sy-space-xl);
	padding: 0;
	list-style: none;
	counter-reset: sy-step;
}

.sy-craft__step {
	position: relative;
	margin: 0;
	padding-top: var(--sy-space-md);
	border-top: 1px solid var(--sy-rule-strong);
	counter-increment: sy-step;
}

.sy-craft__step::before {
	content: counter(sy-step, decimal-leading-zero);
	display: block;
	margin-bottom: var(--sy-space-2xs);
	font-family: var(--sy-font-body);
	font-size: var(--sy-text-xs);
	font-weight: var(--sy-weight-semibold);
	letter-spacing: var(--sy-tracking-eyebrow);
	color: var(--sy-accent-strong);
}

.sy-craft__step-title {
	margin: 0 0 var(--sy-space-2xs);
	font-size: var(--sy-text-xl);
	letter-spacing: 0.06em;
	text-transform: uppercase;
}

.sy-craft__step-text {
	margin: 0;
	font-size: var(--sy-text-sm);
	color: var(--sy-ink-64);
}

.sy-section--ground-black .sy-craft__step-text {
	color: var(--sy-cream-56);
}

.sy-section--ground-black .sy-craft__step {
	border-top-color: var(--sy-taupe-40);
}

/* ==================================================================
 * Sri Lanka story (blueprint §16)
 * ============================================================== */

.sy-story__body > * + * {
	margin-top: var(--sy-space-md);
}

/* ==================================================================
 * Enquiry form with nothing beside it
 *
 * The split keeps its own half-width column whether or not anything is in
 * it. When the terms panel is empty there is no second column to balance, so
 * the form takes a readable measure of its own instead of sitting in half a
 * grid with air to its right.
 * ============================================================== */

.sy-form-single {
	max-width: var(--sy-container-narrow);
}

.sy-form-single__direct {
	margin-top: var(--sy-space-lg);
	padding-top: var(--sy-space-md);
	border-top: var(--sy-border);
	font-size: var(--sy-text-sm);
}

.sy-form-single__label {
	display: block;
	margin-bottom: var(--sy-space-3xs);
	font-size: var(--sy-text-xs);
	font-weight: var(--sy-weight-semibold);
	letter-spacing: var(--sy-tracking-eyebrow);
	text-transform: uppercase;
	color: var(--sy-accent-strong);
}

/* ==================================================================
 * Wholesale terms
 *
 * A block grid, built to the same rules as .sy-feature and .sy-craft__step:
 * rule-topped rather than carded (§33 warns against over-carding), a small
 * uppercase accent number, an uppercase heading at --sy-text-xl, and body
 * text one step down in muted ink.
 *
 * It was written to its own conventions first - display-font headings, body
 * at full size, symmetric gaps - and read as a foreign section on the page
 * for exactly that reason.
 * ============================================================== */

.sy-terms__grid {
	display: grid;
	/* Row gap generous, column gap the fluid grid gap, as .sy-features__grid. */
	gap: var(--sy-space-xl) var(--sy-grid-gap);
	grid-template-columns: minmax(0, 1fr);
	counter-reset: sy-term;
}

.sy-terms__item {
	display: flex;
	flex-direction: column;
	gap: var(--sy-space-xs);
	padding-top: var(--sy-space-md);
	border-top: 1px solid var(--sy-accent);
	counter-increment: sy-term;
}

/* The same numbered lead-in the craft steps use. */
.sy-terms__item::before {
	content: counter( sy-term, decimal-leading-zero );
	font-family: var(--sy-font-body);
	font-size: var(--sy-text-xs);
	font-weight: var(--sy-weight-semibold);
	letter-spacing: var(--sy-tracking-eyebrow);
	color: var(--sy-accent-strong);
}

.sy-terms__heading {
	margin: 0;
	font-size: var(--sy-text-xl);
	letter-spacing: 0.06em;
	text-transform: uppercase;
}

.sy-terms__text {
	margin: 0;
	font-size: var(--sy-text-sm);
	color: var(--sy-ink-64);
}

/*
 * The list reads at the same size and weight as the paragraphs around it. It
 * used to be a step smaller than the text above it, which made one block look
 * like two.
 */
.sy-terms__list {
	margin: 0;
	padding-left: 1.1em;
	list-style: none;
	font-size: var(--sy-text-sm);
	color: var(--sy-ink-64);
}

.sy-terms__list li {
	position: relative;
}

/* A brand rule rather than a bullet glyph, with the text hanging beside it. */
.sy-terms__list li::before {
	content: "";
	position: absolute;
	top: 0.62em;
	left: -1.1em;
	width: 0.4em;
	height: 1px;
	background-color: var(--sy-accent);
}

/* ==================================================================
 * Vision and Mission
 *
 * Two statements sharing the copy column beside one portrait image. The split
 * centres its columns, so a single short paragraph used to float in the middle
 * of a 4/5 crop with a quarter of the image's height empty above and below it.
 * Two statements fill that column with something worth reading instead.
 * ============================================================== */

.sy-vm__body > * + * {
	margin-top: var(--sy-space-md);
}

/*
 * The gap BETWEEN the two statements is wider than the gap inside one, so they
 * read as two things rather than four loose paragraphs.
 */
.sy-vm__item + .sy-vm__item {
	margin-top: var(--sy-space-xl);
}

.sy-vm__item > * + * {
	margin-top: var(--sy-space-sm);
}

.sy-vm__title {
	font-family: var(--sy-font-display);
	line-height: var(--sy-leading-tight);
}

.sy-vm__motif {
	display: block;
	width: 1.75rem;
	margin-bottom: var(--sy-space-sm);
	color: var(--sy-taupe-64);
}

/* ==================================================================
 * Interactive cinnamon detail (blueprint §17)
 *
 * A quiet hover/focus reveal, not a 3D experience. Keyboard operable, and
 * fully readable with JS off - the panels are plain <details> content.
 * ============================================================== */

.sy-detail__figure {
	position: relative;
}

.sy-detail__hotspots {
	display: grid;
	gap: var(--sy-space-sm);
	margin: 0;
	padding: 0;
	list-style: none;
}

.sy-detail__hotspot {
	margin: 0;
	border-bottom: var(--sy-border);
}

.sy-detail__hotspot summary {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--sy-space-sm);
	padding: var(--sy-space-md) 0;
	cursor: pointer;
	font-family: var(--sy-font-display);
	font-size: var(--sy-text-xl);
	list-style: none;
}

.sy-detail__hotspot summary::-webkit-details-marker {
	display: none;
}

.sy-detail__hotspot summary::after {
	content: "+";
	font-family: var(--sy-font-body);
	font-size: var(--sy-text-lg);
	color: var(--sy-accent-strong);
	transition: transform var(--sy-duration) var(--sy-ease);
}

.sy-detail__hotspot[open] summary::after {
	transform: rotate(45deg);
}

.sy-detail__hotspot-body {
	padding-bottom: var(--sy-space-md);
	font-size: var(--sy-text-sm);
	color: var(--sy-ink-64);
}

/* ==================================================================
 * Global vision (blueprint §18)
 * ============================================================== */

.sy-global {
	text-align: center;
}

.sy-global__inner {
	max-width: var(--sy-container-narrow);
	margin-inline: auto;
}

.sy-global__copy {
	margin-inline: auto;
}

.sy-global__map {
	width: min(46rem, 100%);
	margin: var(--sy-space-xl) auto 0;
	color: var(--sy-taupe-40);
}

.sy-global__statement {
	max-width: 34ch;
	margin-inline: auto;
	font-family: var(--sy-font-display);
	font-size: var(--sy-text-xl);
	line-height: var(--sy-leading-snug);
}

/* ==================================================================
 * Journal (blueprint §19, §27)
 * ============================================================== */

.sy-journal__filters {
	display: flex;
	flex-wrap: wrap;
	gap: var(--sy-space-xs);
	margin-bottom: var(--sy-space-xl);
	padding: 0;
	list-style: none;
}

.sy-journal__filters li {
	margin: 0;
}

.sy-journal__filter {
	display: inline-flex;
	align-items: center;
	min-height: 2.5rem;
	padding: 0 var(--sy-space-md);
	border: var(--sy-border);
	border-radius: var(--sy-radius-pill);
	font-size: var(--sy-text-xs);
	letter-spacing: 0.08em;
	text-transform: uppercase;
	text-decoration: none;
	transition: background-color var(--sy-duration) var(--sy-ease),
		border-color var(--sy-duration) var(--sy-ease),
		color var(--sy-duration) var(--sy-ease);
}

.sy-journal__filter:hover,
.sy-journal__filter[aria-current="page"] {
	background-color: var(--sy-ground-inverse);
	border-color: var(--sy-text);
	color: var(--sy-ground-inverse-text);
}

/*
 * A lone card in a multi-column grid stretches to the full row and reads as a
 * mistake. Cap it at a card's width and let the grid keep its alignment.
 * :has() is supported everywhere this theme targets; browsers without it get
 * the old full-width card, which is untidy rather than broken.
 */
.sy-grid:has(> .sy-card:only-child) {
	grid-template-columns: minmax(0, 26rem);
}

.sy-journal__empty {
	padding: var(--sy-space-xl);
	border: 1px dashed var(--sy-rule-strong);
	border-radius: var(--sy-radius-md);
	text-align: center;
	color: var(--sy-ink-64);
}

/* ==================================================================
 * Newsletter (blueprint §20)
 *
 * "Do not make this look like a generic marketing popup."
 * ============================================================== */

.sy-newsletter__inner {
	max-width: var(--sy-container-narrow);
	margin-inline: auto;
	text-align: center;
}

/*
 * The newsletter form's wrapper.
 *
 * This used to be `.sy-newsletter__form`, a two-column grid written for the
 * theme's own field markup - and the template has only ever emitted
 * `.sy-newsletter__form-wrap`. The two never met, so none of it applied.
 *
 * The grid is gone with it: the fields belong to the forms plugin now and
 * arrive as one child, so a grid here had nothing to lay out. What was
 * actually wanted is the space above, and left-aligned labels inside a
 * section that is otherwise centred.
 */
.sy-newsletter__form-wrap {
	margin-top: var(--sy-space-lg);
	text-align: left;
}

.sy-newsletter__consent {
	font-size: var(--sy-text-xs);
	color: var(--sy-ink-64);
	text-align: center;
}

/* ==================================================================
 * Wholesale and contact (blueprint §21)
 * ============================================================== */

.sy-wholesale__paths {
	display: grid;
	gap: var(--sy-grid-gap);
	margin-top: var(--sy-space-xl);
}

.sy-wholesale__path {
	display: flex;
	flex-direction: column;
	gap: var(--sy-space-sm);
	padding: var(--sy-space-lg);
	background-color: var(--sy-ground-raised);
	border: var(--sy-border);
	border-radius: var(--sy-radius-md);
}

.sy-section--ground-white .sy-wholesale__path {
	background-color: var(--sy-ground-base);
}

.sy-wholesale__path h3 {
	margin: 0;
	font-size: var(--sy-text-xl);
}

.sy-wholesale__path p {
	margin: 0;
	font-size: var(--sy-text-sm);
	color: var(--sy-ink-64);
}

.sy-wholesale__path .sy-btn {
	margin-top: auto;
	align-self: flex-start;
}

/* ==================================================================
 * Page hero - the inner-page equivalent of the homepage hero
 * ============================================================== */

.sy-page-hero {
	padding-block: var(--sy-section-pt, var(--sy-space-2xl))
		var(--sy-section-pb, var(--sy-space-xl));
	background-color: var(--sy-ground-base);
	text-align: center;
}

.sy-page-hero__inner {
	max-width: var(--sy-container-narrow);
	margin-inline: auto;
}

.sy-page-hero__title {
	margin-bottom: var(--sy-space-sm);
	text-transform: uppercase;
}

/* --- Heading size, on the two hero sections ----------------------- */

/*
 * Compound selectors on purpose. `.sy-title--md` alone is one class, exactly
 * as specific as `.sy-hero__title`, so which one won would come down to source
 * order - the fragility that has bitten this stylesheet twice already. Two
 * classes beats one, whatever the order.
 */
.sy-hero__title.sy-title--sm,
.sy-page-hero__title.sy-title--sm {
	font-size: var(--sy-display-sm);
}

.sy-hero__title.sy-title--md,
.sy-page-hero__title.sy-title--md {
	font-size: var(--sy-display-md);
}

.sy-hero__title.sy-title--lg,
.sy-page-hero__title.sy-title--lg {
	font-size: var(--sy-display-lg);
}

.sy-hero__title.sy-title--xl,
.sy-page-hero__title.sy-title--xl {
	font-size: var(--sy-display-xl);
}

/* --- How much room the page hero takes ---------------------------- */

/*
 * Kept for anything that saved one before the numeric control existed. They
 * yield to an explicit value for the same reason --tight does.
 */
.sy-page-hero--compact {
	padding-block: var(--sy-section-pt, var(--sy-space-lg))
		var(--sy-section-pb, var(--sy-space-md));
}

.sy-page-hero--generous {
	padding-block: var(--sy-section-pt, var(--sy-space-3xl))
		var(--sy-section-pb, var(--sy-space-2xl));
}

/* ==================================================================
 * Editorial article body
 * ============================================================== */

.sy-article {
	max-width: var(--sy-container-narrow);
	margin-inline: auto;
}

.sy-article > * + * {
	margin-top: var(--sy-space-md);
}

.sy-article h2 {
	margin-top: var(--sy-space-xl);
}

.sy-article img,
.sy-article figure {
	margin-block: var(--sy-space-xl);
}

.sy-article figcaption {
	margin-top: var(--sy-space-2xs);
	font-size: var(--sy-text-xs);
	color: var(--sy-ink-64);
	text-align: center;
}

/* ==================================================================
 * 404
 * ============================================================== */

.sy-404__mark {
	width: 3.5rem;
	margin: 0 auto var(--sy-space-md);
	color: var(--sy-taupe-40);
}

.sy-404__actions {
	justify-content: center;
	margin-top: var(--sy-space-lg);
}

/* ==================================================================
 * Product card price (Phase 2 onward)
 * ============================================================== */

.sy-product-card__price {
	margin: 0 0 var(--sy-space-2xs);
	font-family: var(--sy-font-display);
	font-size: var(--sy-text-lg);
}

.sy-product-card__price del {
	margin-right: var(--sy-space-2xs);
	color: var(--sy-ink-40);
}

/* ==================================================================
 * Craft & Origin timeline (blueprint §26)
 * ============================================================== */

.sy-timeline {
	display: grid;
	gap: var(--sy-space-2xl);
}

.sy-timeline__stage {
	position: relative;
}

.sy-timeline__title {
	margin: 0 0 var(--sy-space-2xs);
	font-size: var(--sy-display-sm);
	letter-spacing: 0.04em;
	text-transform: uppercase;
}

/* ==================================================================
 * Contact and wholesale detail column
 * ============================================================== */

.sy-contact__details {
	padding: var(--sy-space-lg);
	background-color: var(--sy-ground-base);
	border-radius: var(--sy-radius-md);
}

.sy-section--ground-cream .sy-contact__details {
	background-color: var(--sy-ground-raised);
}

.sy-contact__details h2 {
	margin-bottom: var(--sy-space-sm);
	font-size: var(--sy-text-xl);
}

.sy-contact__details .sy-signature__spec {
	margin-top: 0;
	padding-top: var(--sy-space-md);
}

/* ==================================================================
 * Shop - category tiles
 * ============================================================== */

.sy-cat-tile {
	display: flex;
	flex-direction: column;
	background-color: var(--sy-ground-base);
	border-radius: var(--sy-radius-md);
	overflow: hidden;
	text-decoration: none;
	transition: box-shadow var(--sy-duration) var(--sy-ease),
		transform var(--sy-duration) var(--sy-ease);
}

.sy-section--ground-cream .sy-cat-tile {
	background-color: var(--sy-ground-raised);
}

.sy-cat-tile:hover {
	box-shadow: var(--sy-shadow-lift);
	transform: translateY(-2px);
	color: inherit;
}

.sy-cat-tile__media {
	display: block;
	aspect-ratio: 1 / 1;
	overflow: hidden;
}

.sy-cat-tile__media img,
.sy-cat-tile__media .sy-image--empty {
	width: 100%;
	height: 100%;
	border-radius: 0;
	object-fit: cover;
	transition: transform var(--sy-duration-slow) var(--sy-ease-out);
}

.sy-cat-tile:hover .sy-cat-tile__media img {
	transform: scale(1.04);
}

.sy-cat-tile__body {
	display: flex;
	flex-direction: column;
	gap: var(--sy-space-3xs);
	padding: var(--sy-space-md);
}

.sy-cat-tile__name {
	font-family: var(--sy-font-display);
	font-size: var(--sy-text-xl);
	line-height: var(--sy-leading-snug);
}

.sy-cat-tile__count {
	font-size: var(--sy-text-xs);
	letter-spacing: var(--sy-tracking-eyebrow);
	text-transform: uppercase;
	color: var(--sy-accent-strong);
}

/* ==================================================================
 * FAQ
 * ============================================================== */

.sy-faq-group + .sy-faq-group {
	margin-top: var(--sy-space-xl);
}

.sy-faq-group__title {
	margin-bottom: var(--sy-space-sm);
	padding-bottom: var(--sy-space-2xs);
	border-bottom: 1px solid var(--sy-accent);
	font-size: var(--sy-text-xl);
	letter-spacing: 0.06em;
	text-transform: uppercase;
}

/* The FAQ answers are prose, so they need a comfortable measure and a little
 * more room than the terse homepage detail panels. */
.sy-faq-group .sy-detail__hotspot-body {
	max-width: 66ch;
	padding-bottom: var(--sy-space-md);
	font-size: var(--sy-text-base);
	line-height: var(--sy-leading-body);
}

.sy-faq-group .sy-detail__hotspot summary {
	font-size: var(--sy-text-lg);
	padding-block: var(--sy-space-sm);
}

/* ==================================================================
 * Trust (blueprint 38)
 *
 * Deliberately typographic. A row of certification badges is the usual
 * treatment here, and this brand has none it can evidence yet, so the section
 * earns confidence by being specific rather than by looking official.
 * ============================================================== */

.sy-trust {
	display: grid;
	gap: var(--sy-space-lg) var(--sy-grid-gap);
	grid-template-columns: minmax(0, 1fr);
	margin: 0;
}

.sy-trust__item {
	padding-top: var(--sy-space-md);
	border-top: 1px solid var(--sy-accent);
}

.sy-trust__label {
	margin-bottom: var(--sy-space-2xs);
	font-family: var(--sy-font-body);
	font-size: var(--sy-text-xs);
	font-weight: var(--sy-weight-semibold);
	letter-spacing: var(--sy-tracking-eyebrow);
	text-transform: uppercase;
	color: var(--sy-accent-strong);
}

.sy-trust__body {
	margin: 0;
	font-size: var(--sy-text-sm);
	color: var(--sy-ink-80);
}

.sy-trust__note {
	max-width: 62ch;
	margin-top: var(--sy-space-xl);
	padding-top: var(--sy-space-md);
	border-top: var(--sy-border);
	font-size: var(--sy-text-sm);
	color: var(--sy-ink-64);
}

@media (min-width: 40em) {
	.sy-trust {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (min-width: 56.25em) {
	.sy-trust {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

/* Brand marks in the sections where their meaning is literal (blueprint 3). */

.sy-trust__seal {
	display: block;
	width: 2.25rem;
	margin-bottom: var(--sy-space-sm);
	color: var(--sy-accent);
}

.sy-story__motif {
	display: block;
	width: 1.75rem;
	margin-bottom: var(--sy-space-sm);
	color: var(--sy-taupe-64);
}