/* Prism Site — the parts theme.json cannot express.
   Tokens come from theme.json presets (--wp--preset--*); nothing here
   invents a colour the palette does not already name. */

:root {
	--ps-radius: 12px;
	--ps-radius-sm: 8px;
	--ps-hair: 1px solid var(--wp--preset--color--hairline);
	--ps-spectrum: var(--wp--preset--gradient--spectrum);
	--ps-ease: cubic-bezier(.2, .7, .2, 1);
}

html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
	*, *::before, *::after { transition-duration: 0ms !important; animation-duration: 0ms !important; }
}
body { -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
:where(.wp-site-blocks) > * { margin-block-start: 0; }

/* ── Header ─────────────────────────────────────────────────────────── */
/* The frosted glass sits on a layer BEHIND the header, never on the header
   itself: a backdrop-filter makes its element the containing block for every
   position:fixed child, and the mobile menu's full-screen overlay then
   shrank to the 63px header strip with the page showing through below. */
/* Sticky on the template-part WRAPPER: WordPress wraps .site-header in a
   <header> of exactly its own height, so a sticky .site-header had nowhere
   to stick and scrolled away with the page. */
header.wp-block-template-part { position: sticky; top: 0; z-index: 50; }
.admin-bar header.wp-block-template-part { top: 32px; }
@media (max-width: 782px) { .admin-bar header.wp-block-template-part { top: 46px; } }
.site-header {
	position: relative; z-index: 0;
	border-bottom: var(--ps-hair);
	background: transparent !important;
}
.site-header::before {
	content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
	background: rgba(255, 255, 255, .86);
	backdrop-filter: saturate(1.6) blur(14px);
	-webkit-backdrop-filter: saturate(1.6) blur(14px);
}
.brand { display: inline-flex; align-items: center; line-height: 0; }
.brand img { height: 30px; width: auto; }
.site-nav a { color: var(--wp--preset--color--ink); text-decoration: none; }
.site-nav a:hover { color: var(--wp--preset--color--accent); }
.site-nav .current-menu-item > a, .site-nav a[aria-current] { color: var(--wp--preset--color--accent); }
.site-header__right { gap: 1.25rem; }

/* ── Sections ───────────────────────────────────────────────────────── */
.section { padding: var(--wp--preset--spacing--70) var(--wp--preset--spacing--40); }
.section--tight { padding-block: var(--wp--preset--spacing--60); }
.section--paper { background: var(--wp--preset--color--paper); border-block: var(--ps-hair); }
.section--night {
	background: var(--wp--preset--gradient--night-glow), var(--wp--preset--color--night);
	color: var(--wp--preset--color--night-ink);
}
.section--night :is(h1, h2, h3, h4) { color: #fff; }
.section--night a:not(.wp-block-button__link) { color: #9ec0ff; }
.section__inner { max-width: 1200px; margin-inline: auto; }
.section__narrow { max-width: 760px; margin-inline: auto; }

.eyebrow {
	font-family: var(--wp--preset--font-family--mono);
	font-size: var(--wp--preset--font-size--xs);
	font-weight: 500; letter-spacing: .08em; text-transform: uppercase;
	color: var(--wp--preset--color--accent);
	margin: 0 0 .75rem;
}
.section--night .eyebrow { color: #8fb4ff; }
.lede { font-size: var(--wp--preset--font-size--lg); color: var(--wp--preset--color--muted); line-height: 1.5; max-width: 46rem; }
.section--night .lede { color: #aab3c2; }
.center { text-align: center; }
.center .lede { margin-inline: auto; }

/* The spectrum rule: the logo's five bands, used once per section at most. */
.spectrum-rule { height: 4px; width: 88px; border-radius: 4px; background: var(--ps-spectrum); margin: 0 0 1.5rem; }
.center .spectrum-rule { margin-inline: auto; }

/* ── Buttons ────────────────────────────────────────────────────────── */
.btn-row { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: 2rem; align-items: center; }
.center .btn-row { justify-content: center; }
.btn {
	display: inline-flex; align-items: center; gap: .55rem;
	padding: .8rem 1.3rem; border-radius: var(--ps-radius-sm);
	font-weight: 600; font-size: var(--wp--preset--font-size--sm); line-height: 1;
	text-decoration: none !important; border: 1px solid transparent;
	transition: background-color 120ms var(--ps-ease), border-color 120ms var(--ps-ease), transform 120ms var(--ps-ease);
}
.btn:active { transform: scale(.985); }
.btn--primary { background: var(--wp--preset--color--accent); color: #fff !important; }
.btn--primary:hover { background: var(--wp--preset--color--accent-deep); }
.btn--ghost { border-color: var(--wp--preset--color--hairline); color: var(--wp--preset--color--ink) !important; background: var(--wp--preset--color--paper); }
.btn--ghost:hover { border-color: var(--wp--preset--color--accent); }
.section--night .btn--ghost { background: transparent; color: #fff !important; border-color: rgba(255, 255, 255, .22); }
.section--night .btn--ghost:hover { border-color: rgba(255, 255, 255, .6); }
.btn:focus-visible, .site-nav a:focus-visible { outline: 2px solid rgba(37, 99, 235, .55); outline-offset: 2px; }

/* App Store button (Prism Store plugin renders it). */
.appstore {
	display: inline-flex; align-items: center; gap: .65rem;
	background: #000; color: #fff !important; text-decoration: none !important;
	border-radius: 10px; padding: .55rem 1.1rem .55rem .9rem; border: 1px solid rgba(255, 255, 255, .25);
	line-height: 1.1;
}
.appstore svg { width: 22px; height: 22px; fill: currentColor; }
.appstore small { display: block; font-size: .68rem; opacity: .85; }
.appstore strong { display: block; font-size: 1.05rem; font-weight: 600; letter-spacing: -.01em; }
.appstore--soon { background: transparent; color: inherit !important; border: 1px dashed currentColor; opacity: .85; cursor: default; }

/* ── Hero ───────────────────────────────────────────────────────────── */
.hero { padding-top: var(--wp--preset--spacing--70); padding-bottom: 0; overflow: hidden; }
.hero h1 { font-size: var(--wp--preset--font-size--hero); font-weight: 600; letter-spacing: -.03em; line-height: 1.04; margin: 0 0 1.25rem; max-width: 16ch; }
.hero.center h1 { margin-inline: auto; }
.hero__shot { margin-top: var(--wp--preset--spacing--60); position: relative; }
.hero__shot::before {
	content: ""; position: absolute; inset: 8% 6% auto; height: 70%;
	background: var(--ps-spectrum); filter: blur(90px); opacity: .28; z-index: 0;
}
.hero__shot .screen { position: relative; z-index: 1; margin-bottom: -2px; border-bottom-left-radius: 0; border-bottom-right-radius: 0; }

/* ── Screens ────────────────────────────────────────────────────────── */
.screen {
	margin: 0; border-radius: var(--ps-radius); overflow: hidden;
	background: var(--wp--preset--color--paper);
	border: var(--ps-hair); box-shadow: var(--wp--preset--shadow--card);
}
.section--night .screen { border-color: rgba(255, 255, 255, .1); box-shadow: var(--wp--preset--shadow--lift); background: var(--wp--preset--color--night-2); }
.screen img { display: block; width: 100%; height: auto; }
.screen__bar { display: flex; gap: 6px; padding: 9px 12px; border-bottom: var(--ps-hair); background: #f7f8fa; }
.section--night .screen__bar { background: #1a1e26; border-bottom-color: rgba(255, 255, 255, .06); }
.screen__bar i { width: 9px; height: 9px; border-radius: 50%; background: #d4d8df; }
.section--night .screen__bar i { background: #3a404c; }
.screen--phone { max-width: 300px; border-radius: 34px; border: 8px solid #10131a; margin-inline: auto; }
.screen__placeholder {
	aspect-ratio: 16 / 10; display: grid; place-content: center; gap: .5rem; text-align: center; padding: 1.5rem;
	color: var(--wp--preset--color--muted); font-size: var(--wp--preset--font-size--sm);
	background:
		linear-gradient(var(--wp--preset--color--paper), var(--wp--preset--color--paper)) padding-box,
		repeating-linear-gradient(45deg, rgba(91, 100, 114, .05) 0 10px, transparent 10px 20px);
}
.screen--phone .screen__placeholder { aspect-ratio: 9 / 19; }
.screen__placeholder code { font-family: var(--wp--preset--font-family--mono); font-size: .75rem; opacity: .7; }
.section--night .screen__placeholder { background: #14171d; color: #8c95a5; }

/* ── Grids & cards ──────────────────────────────────────────────────── */
.grid { display: grid; gap: 1.25rem; margin-top: var(--wp--preset--spacing--50); }
.grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 960px) { .grid--3, .grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) { .grid--2, .grid--3, .grid--4 { grid-template-columns: 1fr; } }

.card {
	background: var(--wp--preset--color--paper); border: var(--ps-hair); border-radius: var(--ps-radius);
	padding: 1.5rem; box-shadow: var(--wp--preset--shadow--card);
}
.card h3 { font-size: var(--wp--preset--font-size--md); margin: .25rem 0 .5rem; }
.card p { margin: 0; color: var(--wp--preset--color--muted); font-size: var(--wp--preset--font-size--sm); }
.section--night .card { background: rgba(255, 255, 255, .03); border-color: rgba(255, 255, 255, .08); box-shadow: none; }
.section--night .card p { color: #aab3c2; }
.card__icon {
	width: 36px; height: 36px; border-radius: 9px; display: grid; place-items: center; margin-bottom: .75rem;
	background: rgba(37, 99, 235, .09); color: var(--wp--preset--color--accent);
}
.card__icon svg { width: 20px; height: 20px; stroke: currentColor; fill: none; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.card__icon--rose   { background: rgba(224, 91, 78, .1);  color: var(--wp--preset--color--rose); }
.card__icon--amber  { background: rgba(217, 154, 58, .12); color: #b77a1c; }
.card__icon--teal   { background: rgba(53, 179, 154, .12); color: #23917b; }
.card__icon--violet { background: rgba(165, 143, 232, .14); color: #7b62cf; }

/* Product duo (Prism + Spectra) */
.duo { display: grid; grid-template-columns: 1fr 1fr; gap: 1.25rem; }
@media (max-width: 800px) { .duo { grid-template-columns: 1fr; } }
.duo__item { display: flex; flex-direction: column; gap: .75rem; padding: 2rem; border-radius: var(--ps-radius); border: var(--ps-hair); background: var(--wp--preset--color--paper); box-shadow: var(--wp--preset--shadow--card); }
.duo__item header { display: flex; align-items: center; gap: .9rem; }
.duo__item header img { width: 52px; height: 52px; }
.duo__item h3 { margin: 0; font-size: var(--wp--preset--font-size--lg); }
.duo__item .kind { font-family: var(--wp--preset--font-family--mono); font-size: var(--wp--preset--font-size--xs); color: var(--wp--preset--color--muted); }
.duo__item p { margin: 0; color: var(--wp--preset--color--muted); }
.duo__item .btn-row { margin-top: auto; padding-top: .5rem; }

/* Feature rows: copy beside a screenshot, alternating. */
.feature { display: grid; grid-template-columns: 5fr 7fr; gap: var(--wp--preset--spacing--60); align-items: center; padding-block: var(--wp--preset--spacing--50); }
.feature--flip { grid-template-columns: 7fr 5fr; }
.feature--flip .feature__copy { order: 2; }
@media (max-width: 900px) { .feature, .feature--flip { grid-template-columns: 1fr; } .feature--flip .feature__copy { order: 0; } }
/* A feature whose screenshots follow below it, full width (Comparisons: scorecard + compare). */
.feature--stacked { grid-template-columns: 1fr; padding-bottom: var(--wp--preset--spacing--30); }
.feature--stacked .feature__copy { max-width: 46rem; }
.compare-pair { align-items: start; }
.feature h3 { font-size: var(--wp--preset--font-size--xl); margin: 0 0 .75rem; }
.feature p { color: var(--wp--preset--color--muted); }
.ticks { list-style: none; padding: 0; margin: 1.25rem 0 0; display: grid; gap: .55rem; }
.ticks li { position: relative; padding-left: 1.6rem; font-size: var(--wp--preset--font-size--sm); }
.ticks li::before { content: ""; position: absolute; left: 0; top: .42em; width: .9rem; height: .5rem; border-left: 2px solid var(--wp--preset--color--teal); border-bottom: 2px solid var(--wp--preset--color--teal); transform: rotate(-45deg); }

/* Layer tabs on the Prism page (anchor links, no JS). */
.chips { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: 1.5rem; }
.center .chips { justify-content: center; }
.chip { font-size: var(--wp--preset--font-size--xs); font-weight: 500; padding: .4rem .8rem; border-radius: 999px; border: var(--ps-hair); background: var(--wp--preset--color--paper); color: var(--wp--preset--color--ink) !important; text-decoration: none !important; }
.chip:hover { border-color: var(--wp--preset--color--accent); }

/* Flow diagram (Spectra → Prism). */
.flow { display: grid; grid-template-columns: 1fr auto 1fr auto 1fr; gap: 1rem; align-items: stretch; margin-top: var(--wp--preset--spacing--50); }
.flow__arrow { align-self: center; font-family: var(--wp--preset--font-family--mono); color: var(--wp--preset--color--muted); }
@media (max-width: 800px) { .flow { grid-template-columns: 1fr; } .flow__arrow { transform: rotate(90deg); justify-self: center; } }

/* Stats strip */
.stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; background: var(--wp--preset--color--hairline); border: var(--ps-hair); border-radius: var(--ps-radius); overflow: hidden; margin-top: var(--wp--preset--spacing--50); }
.stats > div { background: var(--wp--preset--color--paper); padding: 1.25rem; }
.stats strong { display: block; font-family: var(--wp--preset--font-family--mono); font-size: var(--wp--preset--font-size--xl); font-weight: 500; letter-spacing: -.02em; }
.stats span { font-size: var(--wp--preset--font-size--xs); color: var(--wp--preset--color--muted); }
@media (max-width: 760px) { .stats { grid-template-columns: repeat(2, 1fr); } }

/* ── Pricing ────────────────────────────────────────────────────────── */
.plans { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.25rem; margin-top: var(--wp--preset--spacing--50); align-items: stretch; }
@media (max-width: 960px) { .plans { grid-template-columns: 1fr; max-width: 480px; margin-inline: auto; } }
.plan { position: relative; display: flex; flex-direction: column; padding: 2rem; border-radius: var(--ps-radius); border: var(--ps-hair); background: var(--wp--preset--color--paper); box-shadow: var(--wp--preset--shadow--card); }
.plan--featured { border: 2px solid var(--wp--preset--color--accent); }
.plan__badge { position: absolute; top: -12px; left: 2rem; background: var(--wp--preset--color--accent); color: #fff; font-size: .72rem; font-weight: 600; letter-spacing: .04em; padding: .25rem .6rem; border-radius: 999px; }
.plan h3 { margin: 0; font-size: var(--wp--preset--font-size--lg); }
.plan__tag { color: var(--wp--preset--color--muted); font-size: var(--wp--preset--font-size--sm); margin: .35rem 0 1.25rem; min-height: 2.8em; }
.plan__price { font-family: var(--wp--preset--font-family--mono); font-size: var(--wp--preset--font-size--xxl); font-weight: 500; letter-spacing: -.03em; line-height: 1; }
.plan__price .woocommerce-Price-currencySymbol { font-size: .55em; vertical-align: .55em; margin-right: .1em; }
.plan__term { font-size: var(--wp--preset--font-size--xs); color: var(--wp--preset--color--muted); margin-top: .4rem; }
.plan .ticks { margin-bottom: 1.75rem; }
.plan .btn { margin-top: auto; justify-content: center; }
.plan--missing { opacity: .6; }
.plans--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 840px; margin-inline: auto; }
.plans--1 { grid-template-columns: minmax(0, 1fr); max-width: 520px; margin-inline: auto; }
@media (max-width: 960px) { .plans--2 { grid-template-columns: 1fr; } }
.plan--soon { background: transparent; box-shadow: none; border-style: dashed; }
.plan__badge--soon { background: var(--wp--preset--color--amber); color: var(--wp--preset--color--ink); }
.plan__price--soon { font-size: var(--wp--preset--font-size--xl); color: var(--wp--preset--color--muted); }

/* FAQ */
.faq details { border-bottom: var(--ps-hair); padding: 1.1rem 0; }
.faq summary { cursor: pointer; font-weight: 600; list-style: none; display: flex; justify-content: space-between; gap: 1rem; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; font-family: var(--wp--preset--font-family--mono); color: var(--wp--preset--color--muted); transition: transform 180ms var(--ps-ease); }
.faq details[open] summary::after { transform: rotate(45deg); }
.faq details p { margin: .75rem 0 0; color: var(--wp--preset--color--muted); }

/* Video */
.video { margin: 0; }
.video video { width: 100%; border-radius: var(--ps-radius); background: #000; display: block; }
.video figcaption { margin-top: .75rem; font-size: var(--wp--preset--font-size--sm); color: var(--wp--preset--color--muted); }
.video__soon { font-family: var(--wp--preset--font-family--mono); font-size: .7rem; text-transform: uppercase; letter-spacing: .06em; padding: .15rem .45rem; border-radius: 4px; background: rgba(217, 154, 58, .14); color: #9a6514; margin-right: .4rem; }
.section--night .video figcaption { color: #aab3c2; }

/* Photo (product imagery) */
.photo { margin: 0; border-radius: var(--ps-radius); overflow: hidden; border: var(--ps-hair); }
.photo img { display: block; width: 100%; height: auto; }
.photo figcaption { font-size: var(--wp--preset--font-size--xs); color: var(--wp--preset--color--muted); padding: .6rem .9rem; background: var(--wp--preset--color--paper); border-top: var(--ps-hair); }

/* Callout */
.callout { border-left: 3px solid var(--wp--preset--color--accent); padding: .25rem 0 .25rem 1.25rem; color: var(--wp--preset--color--muted); }

/* ── Footer ─────────────────────────────────────────────────────────── */
.site-footer { background: var(--wp--preset--color--night); color: #9aa3b2; padding: var(--wp--preset--spacing--60) var(--wp--preset--spacing--40) var(--wp--preset--spacing--40); font-size: var(--wp--preset--font-size--sm); }
.site-footer__grid { max-width: 1200px; margin: 0 auto; display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 2rem; }
@media (max-width: 760px) { .site-footer__grid { grid-template-columns: 1fr 1fr; } }
.site-footer h4 { color: #fff; font-size: var(--wp--preset--font-size--xs); text-transform: uppercase; letter-spacing: .08em; font-weight: 600; margin: 0 0 .9rem; }
.site-footer ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .5rem; }
.site-footer a { color: #c9d0db; text-decoration: none; }
.site-footer a:hover { color: #fff; }
.site-footer__brand img { height: 28px; width: auto; }
.site-footer__brand p { max-width: 30ch; margin-top: 1rem; }
.site-footer__legal { max-width: 1200px; margin: var(--wp--preset--spacing--50) auto 0; padding-top: 1.25rem; border-top: 1px solid rgba(255, 255, 255, .08); display: flex; flex-wrap: wrap; justify-content: space-between; gap: 1rem; font-size: var(--wp--preset--font-size--xs); }
.site-footer__spectrum { height: 3px; background: var(--ps-spectrum); }

/* ── WooCommerce touches ────────────────────────────────────────────── */
.woocommerce ul.products li.product { box-sizing: border-box; }
.woocommerce ul.products li.product, .wc-block-grid__product { background: var(--wp--preset--color--paper); border: var(--ps-hair); border-radius: var(--ps-radius); padding: 1rem !important; box-shadow: var(--wp--preset--shadow--card); }
.woocommerce ul.products li.product img { border-radius: var(--ps-radius-sm); }
.woocommerce ul.products li.product .price, .woocommerce div.product p.price { font-family: var(--wp--preset--font-family--mono); color: var(--wp--preset--color--ink); }
.woocommerce a.button, .woocommerce button.button { border-radius: var(--ps-radius-sm); background: var(--wp--preset--color--accent); color: #fff; font-weight: 600; }
.woocommerce a.button:hover, .woocommerce button.button:hover { background: var(--wp--preset--color--accent-deep); color: #fff; }
.prism-licence-note { border: var(--ps-hair); border-left: 3px solid var(--wp--preset--color--accent); background: var(--wp--preset--color--paper); border-radius: var(--ps-radius-sm); padding: .9rem 1.1rem; font-size: var(--wp--preset--font-size--sm); margin: 1rem 0; }

/* Photo with a phone screenshot overlapping its corner: the input and the result together. */
.combo { position: relative; padding: 0 96px 48px 0; }
.combo__phone { position: absolute; right: 0; bottom: 0; width: 200px; }
.combo__phone .screen--phone { max-width: none; border-width: 6px; border-radius: 28px; box-shadow: var(--wp--preset--shadow--lift); }
/* The caption wraps clear of the phone that overlaps it (phone width − combo padding + gap). */
.combo__photo figcaption { padding-right: 116px; }
@media (max-width: 640px) {
	.combo { padding: 0 56px 40px 0; }
	.combo__phone { width: 140px; }
	.combo__phone .screen--phone { border-width: 5px; border-radius: 20px; }
	.combo__photo figcaption { padding-right: 96px; }
}

/* The six-stage strip: Catalog → Complete. Numbers come from CSS, so the
   list reads correctly to a screen reader as an ordered list. */
.steps { list-style: none; counter-reset: step; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: .75rem; padding: 0; margin: var(--wp--preset--spacing--50) 0 0; text-align: left; }
.steps li { counter-increment: step; position: relative; padding: 1rem 1rem 1.1rem; border-radius: var(--ps-radius-sm); background: var(--wp--preset--color--paper); border: var(--ps-hair); }
.steps li::before { content: counter(step, decimal-leading-zero); display: block; font-family: var(--wp--preset--font-family--mono); font-size: var(--wp--preset--font-size--xs); color: var(--wp--preset--color--muted); margin-bottom: .35rem; }
.steps li::after { content: ""; position: absolute; left: 1rem; right: 1rem; top: 0; height: 3px; border-radius: 0 0 3px 3px; background: var(--ps-spectrum); opacity: .85; }
.steps b { display: block; font-weight: 600; }
.steps span { display: block; font-size: var(--wp--preset--font-size--xs); color: var(--wp--preset--color--muted); margin-top: .2rem; line-height: 1.4; }
@media (max-width: 960px) { .steps { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 520px) { .steps { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.feature .eyebrow { margin-bottom: .5rem; }

/* A screen recording in the phone frame. */
.screen--video video { display: block; width: 100%; height: auto; background: #fff; }

/* Headline call-outs: two badges under a hero's lede. */
.callouts { list-style: none; display: flex; flex-wrap: wrap; gap: .75rem; padding: 0; margin: 1.75rem 0 0; }
.center .callouts { justify-content: center; }
.callouts a { display: inline-flex; align-items: center; gap: .5rem; padding: .7rem 1.25rem .7rem 1rem; border-radius: 999px; font-size: var(--wp--preset--font-size--md); font-weight: 600; letter-spacing: -.005em; text-decoration: none !important; color: var(--wp--preset--color--ink) !important; background: var(--wp--preset--color--paper); border: var(--ps-hair); transition: border-color 120ms var(--ps-ease); }
.callouts a { border-color: rgba(53, 179, 154, .45); background: rgba(53, 179, 154, .08); }
.callouts a:hover { border-color: var(--wp--preset--color--accent); }
.callouts svg { width: 22px; height: 22px; stroke: var(--wp--preset--color--teal); fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.section--night .callouts a { color: #fff !important; background: rgba(53, 179, 154, .14); border-color: rgba(53, 179, 154, .55); }
.section--night .callouts svg { stroke: #5fd3b9; }
.section--night .callouts a:hover { border-color: rgba(255, 255, 255, .5); }

/* Two analysed photos side by side: UV and screen size. */
.analysis-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; align-items: start; }
.analysis-pair .photo { background: #0b0d11; }
.analysis-pair figcaption { line-height: 1.45; }
@media (max-width: 520px) { .analysis-pair { grid-template-columns: 1fr; } }

/* Two screenshots of one screen, stacked: the live curve over the queue. */
.screen-stack { display: grid; gap: .9rem; }
.screen-stack { gap: 1.5rem; }
.screen-cap p { margin: .6rem 0 0; font-size: var(--wp--preset--font-size--sm); color: var(--wp--preset--color--muted); }
@media (max-width: 640px) { .screen-stack .screen:last-child { width: 100%; margin-top: 0; } }

/* A feature shown full width: copy in two columns above a large screenshot. */
.feature-wide { padding-block: var(--wp--preset--spacing--50); }
.feature-wide__copy { display: grid; grid-template-columns: 1fr 1fr; gap: var(--wp--preset--spacing--60); align-items: end; margin-bottom: var(--wp--preset--spacing--50); }
.feature-wide__copy h3 { font-size: var(--wp--preset--font-size--xl); margin: 0 0 .75rem; }
.feature-wide__copy p { color: var(--wp--preset--color--muted); }
.feature-wide__copy .ticks { margin: 0; }
@media (max-width: 900px) { .feature-wide__copy { grid-template-columns: 1fr; gap: 1rem; } }

/* Appearance switcher (patterns/customise.php). */
.customiser { margin-top: var(--wp--preset--spacing--50); }
.customiser__controls { display: flex; flex-wrap: wrap; justify-content: center; gap: 1rem 2rem; margin-bottom: 1.5rem; }
.customiser__group { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; justify-content: center; }
.customiser__label { font-family: var(--wp--preset--font-family--mono); font-size: var(--wp--preset--font-size--xs); text-transform: uppercase; letter-spacing: .08em; color: var(--wp--preset--color--muted); }
.customiser__buttons { display: inline-flex; flex-wrap: wrap; gap: 2px; padding: 3px; border-radius: 10px; background: var(--wp--preset--color--hairline); }
.customiser__btn { font: inherit; font-size: var(--wp--preset--font-size--sm); font-weight: 500; padding: .4rem .8rem; border: 0; border-radius: 7px; background: transparent; color: var(--wp--preset--color--ink); cursor: pointer; transition: background-color 120ms var(--ps-ease); }
.customiser__btn:hover { background: rgba(255, 255, 255, .6); }
.customiser__btn[aria-pressed="true"] { background: var(--wp--preset--color--paper); box-shadow: var(--wp--preset--shadow--card); font-weight: 600; }
.customiser__btn:focus-visible { outline: 2px solid rgba(37, 99, 235, .55); outline-offset: 2px; }
.customiser__note { text-align: center; font-size: var(--wp--preset--font-size--xs); color: var(--wp--preset--color--muted); margin: 1rem 0 0; }

/* Keep the menu on one line between phone and wide desktop widths. */
.site-nav .wp-block-navigation__container { flex-wrap: nowrap; white-space: nowrap; }
@media (max-width: 1080px) { .site-nav .wp-block-navigation__container { gap: 1rem !important; } }
@media (max-width: 860px) { .site-nav .wp-block-navigation__container { gap: .7rem !important; } .site-nav { font-size: .875rem; } }

/* The developer credit under a hero. */
.credit { font-size: var(--wp--preset--font-size--xs); color: var(--wp--preset--color--muted); margin-top: .75rem; }
.section--night .credit { color: #8c95a5; }

/* A non-link call-out badge (About: "Scales with the harvest"). */
.callouts__badge { display: inline-flex; align-items: center; gap: .5rem; padding: .7rem 1.25rem .7rem 1rem; border-radius: 999px; font-size: var(--wp--preset--font-size--md); font-weight: 600; color: var(--wp--preset--color--ink); background: rgba(53, 179, 154, .08); border: 1px solid rgba(53, 179, 154, .45); }
.scale-note { margin-top: var(--wp--preset--spacing--50); }
.scale-note .callouts { justify-content: center; margin: 0 0 .75rem; }
.scale-note .lede { margin: 0 auto; }

/* "Why" points: three one-line reasons, side by side. */
.why-points { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; max-width: 1000px; margin: var(--wp--preset--spacing--50) auto 0; }
.why-points > div { padding-top: .9rem; border-top: 3px solid var(--wp--preset--color--hairline); color: var(--wp--preset--color--muted); }
.why-points > div:nth-child(1) { border-top-color: var(--wp--preset--color--teal); }
.why-points > div:nth-child(2) { border-top-color: var(--wp--preset--color--violet); }
.why-points > div:nth-child(3) { border-top-color: var(--wp--preset--color--amber); }
.why-points > div:nth-child(4) { border-top-color: var(--wp--preset--color--rose, #e11d48); }
.why-points:has(> :nth-child(4)) { grid-template-columns: repeat(2, 1fr); max-width: 820px; }
.why-points b { display: block; color: var(--wp--preset--color--ink); margin-bottom: .25rem; }
.scale-note p { color: var(--wp--preset--color--muted); margin: 0 auto; }
@media (max-width: 760px) { .why-points, .why-points:has(> :nth-child(4)) { grid-template-columns: 1fr; } }

/* The price line under a buy button. */
.price-note { margin: .9rem 0 0; font-size: var(--wp--preset--font-size--xs); color: var(--wp--preset--color--muted); }
.section--night .price-note { color: #8c95a5; }
.prism-checkout-trust { font-size: var(--wp--preset--font-size--xs); color: var(--wp--preset--color--muted); line-height: 1.6; margin: 1rem 0 0; }
.plan__after { text-align: center; font-size: var(--wp--preset--font-size--xs); color: var(--wp--preset--color--muted); margin: .6rem 0 0; }

/* Spectra launch list ([spectra_notify]). */
.notify { display: flex; flex-wrap: wrap; gap: .6rem; align-items: center; margin-top: 1.25rem; max-width: 30rem; }
.notify input[type=email] { flex: 1 1 14rem; min-width: 0; font: inherit; font-size: var(--wp--preset--font-size--sm); padding: .75rem .9rem; border-radius: var(--ps-radius-sm); border: 1px solid rgba(255,255,255,.25); background: rgba(255,255,255,.06); color: #fff; }
.notify input[type=email]::placeholder { color: #8c95a5; }
.notify small { flex-basis: 100%; font-size: var(--wp--preset--font-size--xs); color: #8c95a5; }
.notify__hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.notify--done { color: #5fd3b9; font-weight: 600; }
.screen-reader-text { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }

/* Checkout add-ons (prism-store: prism_store_checkout_addons_html). */
.prism-addons { margin: 0 0 1.5rem; padding: 1.25rem 1.25rem 1rem; border: 1px solid var(--ps-line, #e3e6ec); border-radius: var(--ps-radius, 12px); background: #fff; }
.prism-addons h2 { font-size: var(--wp--preset--font-size--md, 1.15rem); margin: 0 0 .25rem; }
.prism-addons > p { margin: 0 0 1rem; font-size: var(--wp--preset--font-size--sm); color: #5b6472; }
.prism-addons ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .6rem; grid-template-columns: 1fr; }
.addon { display: grid; grid-template-columns: 56px 1fr auto; grid-template-rows: auto auto; column-gap: .75rem; row-gap: .4rem; align-items: center; padding: .7rem; border: 1px solid var(--ps-line, #e3e6ec); border-radius: 10px; }
.addon:first-child { border-color: #2563eb; box-shadow: 0 0 0 1px #2563eb inset; }
.addon__img { width: 56px; height: 56px; object-fit: cover; border-radius: 8px; grid-row: 1 / 3; }
.addon__text { display: flex; flex-direction: column; gap: .15rem; min-width: 0; font-size: var(--wp--preset--font-size--xs, .8rem); color: #5b6472; }
.addon__text strong { color: #1e2229; font-size: var(--wp--preset--font-size--sm, .9rem); }
.addon__price { font-weight: 600; font-variant-numeric: tabular-nums; grid-column: 3; grid-row: 1; }
.addon__add { grid-column: 3; grid-row: 2; justify-self: end; font-weight: 600; font-size: .85rem; padding: .35rem .75rem; border-radius: 999px; background: #2563eb; color: #fff; text-decoration: none; white-space: nowrap; }
.addon__add:hover { background: #1d4ed8; color: #fff; }
.prism-addons__done { margin: 0 0 .75rem; padding: .55rem .75rem; border-radius: 8px; background: #ecfdf5; color: #065f46; font-weight: 600; font-size: var(--wp--preset--font-size--sm); }

/* A close-up of one panel of a screen (prism_site_screen variant 'panel'). */
.screen--panel { max-width: 380px; width: 100%; margin-inline: auto; border-radius: 14px; overflow: hidden; }
.screen--panel img { display: block; width: 100%; height: auto; }
.screen-cap .screen--panel { max-width: none; }

/* Body copy on a dark section: the night ink read too dim beside the screenshots. */
.section--night .feature__copy p { color: #d3d9e3; }

/* A card laid out as one row with an action at the end (Coffee Spectra, paired). */
.card--row { display: flex; align-items: center; gap: 1rem; max-width: 52rem; margin-top: var(--wp--preset--spacing--40, 1.5rem); }
.card--row .card__icon { flex: none; margin: 0; }
.card--row__text { flex: 1; min-width: 0; }
.card--row__text h3, .card--row__text p { margin: 0; }
.card--row__text p { margin-top: .25rem; }
@media (max-width: 640px) { .card--row { flex-wrap: wrap; } }

/* ── Left-hand section nav (Prism page) ─────────────────────────────────
   Wide screens only: a full-height dark rail fixed to the left edge, in the
   app's own rail colours and glyphs; the rest of the page (header
   included) moves right to make room. Below 1100px the rail is hidden and
   the hero's jump chips do the job. Groups follow the pipeline board's
   stages, in its order. */
.page-nav { display: none; }
@media (min-width: 1100px) {
	/* The rail slides in as a drawer while the hero scrolls away: --nav-p
	   runs 0 → 1 (page-nav.js), the rail moves by it and the page beside it
	   makes the same room, so nothing ever sits under the rail. The hero is
	   never moved, so the scroll position cannot feed back on itself. */
	.page-nav {
		display: flex; flex-direction: column; position: fixed; top: 0; bottom: 0; left: 0; z-index: 60;
		width: 236px; box-sizing: border-box; overflow: hidden;
		padding: 1.5rem 1.1rem 1.25rem; background: #f4f5f8; border-right: 1px solid rgba(148, 163, 184, .30);
		color: #1e2229;
		transform: translateX(calc((var(--nav-p, 0) - 1) * 100%));
		box-shadow: 0 0 calc(32px * var(--nav-p, 0)) rgba(15, 23, 42, .10);
		will-change: transform;
	}
	.admin-bar .page-nav { top: 32px; }
	.page-with-nav__body,
	body:has(.page-nav) .site-header,
	body:has(.page-nav) footer.wp-block-template-part { margin-left: calc(236px * var(--nav-p, 0)); }
	.hero .chips { display: none; }
	/* Room either side of the content when the rail takes 236px of the width. */
	.page-with-nav__body .section { padding-inline: clamp(1.5rem, 3.5vw, 3.5rem); }
}
}
.page-nav__brand {
	display: flex; gap: .7rem; align-items: center; padding: .25rem .6rem 1.1rem; margin-bottom: .25rem;
	border-bottom: 1px solid rgba(148, 163, 184, .30); color: #1e2229 !important; text-decoration: none;
}
.page-nav__brand svg { width: 20px; height: 20px; color: #1d4ed8; flex: none; }
.page-nav__brand, .page-nav__brand:hover { text-decoration: none !important; }
.page-nav__brand span { font-weight: 600; line-height: 1.2; color: #1e2229; }
.page-nav__brand small { display: block; font-weight: 400; font-size: var(--wp--preset--font-size--xs); color: #5b6472; margin-top: .15rem; }
.page-nav__stage {
	display: flex; gap: .6rem; align-items: center; margin: 1.15rem .6rem .35rem;
	font-family: var(--wp--preset--font-family--mono); font-size: var(--wp--preset--font-size--xs);
	letter-spacing: .08em; text-transform: uppercase; color: #5b6472;
}
.page-nav__stage svg { color: #5b6472; flex: none; }
.page-nav ul { list-style: none; margin: 0; padding: 0; }
.page-nav li a {
	display: block; padding: .34rem .6rem .34rem 2.2rem; border-radius: 7px;
	font-size: var(--wp--preset--font-size--sm); line-height: 1.35;
	color: #1e2229 !important; text-decoration: none; transition: background-color .15s, color .15s;
}
.page-nav li a:hover { background: rgba(15, 23, 42, .05); }
.page-nav li a[aria-current] { background: rgba(37, 99, 235, .08); color: #1d4ed8 !important; font-weight: 600; box-shadow: inset 2px 0 0 #2563eb; }
.page-nav__list { flex: 1; min-height: 0; overflow-y: auto; scrollbar-width: thin; scrollbar-color: #cfd4dc transparent; margin-inline: -.4rem; padding-inline: .4rem; }
.page-nav__buy { flex: none; padding-top: 1rem; border-top: 1px solid rgba(148, 163, 184, .30); margin-top: .75rem; }
.page-nav, .page-nav * { box-sizing: border-box; }
.page-nav__buy .btn { display: flex; justify-content: center; width: 100%; padding-inline: .75rem; white-space: nowrap; }
/* Anchors land below the sticky header. */
.page-with-nav [id] { scroll-margin-top: 88px; }

/* A grid column must be allowed to shrink below its content's natural width,
   or a 3200px screenshot pushes a feature row past the window's edge. */
.feature > *, .feature-wide > * { min-width: 0; }

/* Mobile menu overlay: full-width rows with phone-sized tap targets. */
.wp-block-navigation__responsive-container.is-menu-open { padding: 1rem 1.25rem 2rem; }
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content { padding-top: 3.5rem; align-items: stretch; }
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container { align-items: stretch !important; gap: 0 !important; width: 100%; }
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item { border-bottom: var(--ps-hair); width: 100%; }
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content {
	display: block; width: 100%; padding: .95rem .25rem !important;
	font-size: var(--wp--preset--font-size--lg, 1.25rem); font-weight: 600; text-align: left;
}