/**
 * Plans page - shared base (palette, typography, buttons).
 *
 * The Plans page uses its own violet palette + Schibsted/Hanken Grotesk fonts,
 * scoped to the `.plns` root each plans-* block renders, so it never leaks into
 * the rest of the theme's Signal palette. Per-section layout lives in each
 * block's own style.css; this file holds only what every plans block shares.
 */

.plns {
	/* Mapped to the theme's Signal palette + fonts (homepage branding) so the
	   plans page is visually consistent with the rest of the site. */
	--violet: #835AFF;          /* --signal */
	--violet-600: #6E44E8;      /* --signal-hi */
	--violet-tint: #F1EBFF;     /* --signal-tint */
	--violet-tint-2: #FAF7FF;   /* --signal-tint-2 */
	--ink: #1A0533;
	--ink-2: #2B1147;
	--cream: #F5F0E8;           /* --bone */
	--paper: #FFFFFF;
	--text: #2B1147;
	--muted: #6B7280;           /* --ink-3 */
	--line: #EAEAEA;
	--line-2: #EAEAEA;
	--line-3: #F0EDE7;          /* --line-soft */
	--lime: #835AFF;            /* theme has no lime accent - use signal */
	--disp: "Space Grotesk", system-ui, sans-serif;
	--body: "IBM Plex Sans", system-ui, sans-serif;
	--mono: "IBM Plex Mono", ui-monospace, monospace;

	font-family: var(--body);
	color: var(--text);
	line-height: 1.55;
	-webkit-font-smoothing: antialiased;
}
.plns *, .plns *::before, .plns *::after { box-sizing: border-box; }
.plns .wrap { max-width: 1296px; margin: 0 auto; padding: 0 clamp(20px, 5vw, 72px); }
.plns a { color: inherit; text-decoration: none; }

/* Eyebrow - matches the theme's .ng-eyebrow (mono, ink-3, signal bar). */
.plns .eyebrow { font-family: var(--mono); font-size: 12px; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); font-weight: 500; display: inline-flex; align-items: center; gap: 10px; }
.plns .eyebrow::before { content: ""; width: 22px; height: 2px; background: var(--violet); }
.plns .eyebrow .dim { color: var(--muted); }

/* Headings - Space Grotesk weight 400, theme tracking (homepage branding). */
.plns h1, .plns h2, .plns h3 { font-family: var(--disp); color: var(--ink); font-weight: 400; line-height: 1.04; letter-spacing: -.022em; margin: 0; }
.plns h1 { font-size: clamp(40px, 6.5vw, 76px); letter-spacing: -.04em; line-height: 0.96; }
.plns h2 { font-size: clamp(30px, 4.4vw, 50px); }
.plns h3 { font-size: 20px; letter-spacing: -.01em; }
.plns h1 em, .plns h2 em { color: var(--violet); }
.plns em { font-style: italic; }
.plns p { margin: 0; }

/* Buttons - match the theme's branded .ng-btn (violet --signal, 2px radius,
   IBM Plex Sans), so plans CTAs are consistent with the nav "Book Your Audit"
   CTA and the rest of the site rather than the mockup's rounded variant. */
.plns .btn { display: inline-flex; align-items: center; gap: 10px; font-family: "IBM Plex Sans", system-ui, sans-serif; font-weight: 500; font-size: 15px; border-radius: 2px; padding: 14px 22px; cursor: pointer; border: 1px solid transparent; transition: all .15s ease; letter-spacing: -.005em; white-space: nowrap; }
.plns .btn-primary { background: var(--signal); border-color: var(--signal); color: #fff; }
.plns .btn-primary:hover { background: var(--signal-hi); border-color: var(--signal-hi); }
.plns .btn-dark { background: var(--signal-ink); border-color: var(--signal-ink); color: #fff; }
.plns .btn-dark:hover { background: var(--ink-2); border-color: var(--ink-2); }
.plns .btn-ghost { background: transparent; color: var(--signal-ink); border-color: var(--signal-ink); }
.plns .btn-ghost:hover { background: var(--signal); border-color: var(--signal); color: #fff; }
.plns .btn-light { background: #fff; color: var(--signal-ink); border-color: #fff; }
.plns .link-arrow { font-family: "IBM Plex Sans", system-ui, sans-serif; font-weight: 500; color: var(--signal-ink); border-bottom: 1px solid var(--signal-ink); padding-bottom: 2px; transition: color .15s ease; }
.plns .link-arrow:hover { color: var(--signal); border-color: var(--signal); }

/* Section heading cluster (shared by several sections) */
.plns .sec-head { max-width: 920px; }
.plns .sec-head h2 { margin-top: 14px; }
.plns .sec-head p { color: var(--muted); margin-top: 16px; font-size: 17px; max-width: 88ch; }

@media (max-width: 640px) {
	.plns .wrap { padding: 0 20px; }
}