/*
 * Shared visual layer for the standalone public pages.
 *
 * WHY THIS FILE EXISTS. /pricing, /customers, /refund-policy and their Hebrew
 * twins each carry their own complete stylesheet, and every one of them drew
 * the same picture: one cream background from the nav to the last line of the
 * footer, with sections separated by nothing but a hairline. The landing page
 * has bands, surfaces and cards; these had a wall. The owner's word for it was
 * "very white", and on the Hebrew pages — which are the ones the launch market
 * actually reads — it was the whole experience.
 *
 * It is loaded AFTER each page's own <style>, so equal-specificity rules here
 * win, and it deliberately introduces its own --pg-* tokens rather than
 * redefining the pages' variables: a page that already means something by
 * --blue keeps meaning it.
 *
 * WRITTEN FOR BOTH DIRECTIONS. Every offset is a logical property
 * (padding-inline, inset-inline-start, border-inline-start), so the Hebrew
 * pages get the same design mirrored rather than a second set of rules that
 * can drift out of step with the first.
 *
 * Colours are the app's own tokens, copied from landing.html's :root so the
 * standalone pages and the landing page are visibly the same product.
 */

:root {
	--pg-plum: #2a2230;
	--pg-plum-2: #201a26;
	--pg-plum-up: #3a2f44;
	--pg-wash: #f6e8e5;
	--pg-surface: #ffffff;
	--pg-line: #e8dcd8;
	--pg-violet: #6654c7;
	--pg-violet-lo: #eee9ff;
	--pg-violet-up: #d0c4ff;
	--pg-on-plum: #f7f1f8;
	--pg-on-plum-soft: #cdbfd2;
}

/* ---------------------------------------------------------------- the band */

/*
 * The hero stops being the top of the cream and becomes a plum panel. A panel
 * rather than a full-bleed band on purpose: full-bleed inside a max-width
 * container needs 100vw, which includes the scrollbar and produces exactly the
 * horizontal overflow scripts/check-mobile-edges.ts exists to catch.
 */
.hero,
.header {
	position: relative;
	overflow: hidden;
	margin-top: 20px;
	padding: clamp(30px, 6.5vw, 58px) clamp(20px, 5vw, 44px);
	border-radius: 30px;
	background: radial-gradient(130% 150% at 78% -20%, var(--pg-plum-up) 0%, var(--pg-plum) 52%, var(--pg-plum-2) 100%);
	color: var(--pg-on-plum);
	box-shadow: 0 18px 50px rgba(37, 31, 42, 0.14);
}

/* The landing hero carries a violet bloom; without it this band reads as flat
   near-black rather than as the same brand. aria-hidden by construction: it is
   a pseudo-element, so it is never in the accessibility tree. */
.hero::before,
.header::before {
	content: '';
	position: absolute;
	inset-block-start: -55%;
	inset-inline-end: -25%;
	width: 115%;
	padding-block-end: 115%;
	border-radius: 50%;
	background: radial-gradient(circle, rgba(102, 84, 199, 0.5) 0%, rgba(102, 84, 199, 0.16) 42%, rgba(102, 84, 199, 0) 70%);
	pointer-events: none;
}

.hero > *,
.header > * {
	position: relative;
	z-index: 1;
}

.hero h1,
.header h1 {
	color: var(--pg-on-plum);
}

/* The accent colour was picked to sit on cream; on plum it goes muddy. */
.hero h1 .accent,
.header h1 .accent {
	color: var(--pg-violet-up);
}

.hero .hero-lead,
.header .header-lead,
.hero > p,
.header > p,
.hero .note,
.header .note,
.hero .last-updated,
.header .last-updated {
	color: var(--pg-on-plum-soft);
}

.hero a,
.header a {
	color: var(--pg-violet-up);
}

/* The outline button was dark-on-cream; on plum that is dark-on-dark. */
.hero .secondary,
.header .secondary {
	background: transparent;
	color: var(--pg-on-plum);
	border-color: rgba(247, 241, 248, 0.38);
}

.hero .secondary:hover,
.header .secondary:hover {
	background: rgba(247, 241, 248, 0.08);
	border-color: rgba(247, 241, 248, 0.6);
}

/* --------------------------------------------------------- section rhythm */

/*
 * Each section becomes a tinted panel. Tinted rather than white because the
 * pricing page already puts WHITE cards inside its sections: a white panel
 * would have swallowed them, where this makes them stand up.
 */
.sec,
.doc-section {
	margin-top: clamp(20px, 3.4vw, 34px);
	padding: clamp(22px, 4vw, 34px) clamp(18px, 4vw, 30px);
	border: 1px solid var(--pg-line);
	border-radius: 26px;
	background: var(--pg-wash);
}

/* A short violet rule beside the heading, so a scan finds the sections. */
.sec > h2,
.doc-section > h2 {
	position: relative;
	padding-inline-start: 16px;
}

.sec > h2::before,
.doc-section > h2::before {
	content: '';
	position: absolute;
	inset-inline-start: 0;
	top: 0.16em;
	bottom: 0.16em;
	width: 5px;
	border-radius: 3px;
	background: var(--pg-violet);
}

/* ------------------------------------------------------------- faq blocks */

/*
 * Rows divided by hairlines read as a table of contents. Cards read as
 * answers. The open one lifts, so the thing you just asked for is the thing
 * the page is holding up.
 */
.sec .faq,
.doc-section .faq {
	margin-top: 10px;
	padding: 0 clamp(14px, 3vw, 18px);
	border: 1px solid var(--pg-line);
	border-radius: 16px;
	background: var(--pg-surface);
}

.sec .faq:last-of-type,
.doc-section .faq:last-of-type {
	border-bottom: 1px solid var(--pg-line);
}

.sec .faq[open],
.doc-section .faq[open] {
	box-shadow: 0 10px 28px rgba(37, 31, 42, 0.1);
	border-color: var(--pg-violet-up);
}

.sec .faq summary,
.doc-section .faq summary {
	padding: 15px 0;
}

.sec .faq p,
.doc-section .faq p {
	margin-bottom: 15px;
}

/* ----------------------------------------------------------- notes, asides */

/* A note is an aside, and asides in a wall of text need an edge to find. */
.sec > .note,
.doc-section > .note {
	margin-top: 18px;
	padding: 13px 16px;
	border-radius: 14px;
	border-inline-start: 4px solid var(--pg-violet);
	background: var(--pg-violet-lo);
	color: #4a3f52;
}

.sec > .note a,
.doc-section > .note a {
	color: var(--pg-violet);
}

/* ------------------------------------------------------------- the footer */

/*
 * The footer was the same cream as the body, so the page did not end — it just
 * stopped. This is the landing page's footer, which these pages should have
 * matched from the start.
 */
.footer {
	margin-top: clamp(40px, 6vw, 72px);
	padding: clamp(38px, 5vw, 56px) 0 clamp(34px, 4vw, 48px);
	border-top: 0;
	background: var(--pg-plum-2);
	color: var(--pg-on-plum-soft);
}

/*
 * The column grid was declared on .footer, whose only child is .page — so it
 * governed one item and the columns inside .page never used it. Moving it one
 * level down is what the rule was always trying to say.
 */
.footer {
	display: block;
}

.footer > .page {
	display: grid;
	gap: 30px;
}

@media (min-width: 760px) {
	.footer > .page {
		grid-template-columns: 1.3fr 1fr 1.1fr;
		gap: 34px;
	}

	.footer .footer-divider,
	.footer .footer-bottom {
		grid-column: 1 / -1;
	}
}

.footer .brand,
.footer h4,
.footer strong {
	color: var(--pg-on-plum);
}

.footer a {
	color: var(--pg-on-plum-soft);
}

.footer a:hover {
	color: var(--pg-on-plum);
}

.footer .footer-brand-line,
.footer .footer-bottom {
	color: var(--pg-on-plum-soft);
}

.footer .footer-divider {
	height: 1px;
	background: rgba(247, 241, 248, 0.16);
}

.footer .footer-brand-pill {
	background: rgba(247, 241, 248, 0.08);
	border-color: rgba(247, 241, 248, 0.22);
	color: var(--pg-on-plum-soft);
}

.footer .footer-social {
	color: var(--pg-violet-up);
}

/* -------------------------------------------------------------- the crumb */

.breadcrumb {
	margin-top: 18px;
	color: #6e6070;
}

.breadcrumb a {
	color: var(--pg-violet);
}

/* ------------------------------------------------------------ tap targets */

/* The same 24x24 floor as the landing page: these were 19px tall, the height
   of the text, with no vertical padding to stand on. */
.topnav-link { padding-block: 9px; display: inline-block; }
.footer a { padding-block: 4px; display: inline-block; }
.footer .footer-social { padding-block: 4px; }