/*
Theme Name: 7DaysCare
Theme URI: https://7dayscare.com/
Author: 7DaysCare
Author URI: https://7dayscare.com/
Description: Practice software, a marketplace and a self-hosted platform for mental health care. The 7DaysCare brand as an Elementor-friendly WordPress theme: one stylesheet, a header and footer you edit in WordPress, and page components you can drop into any Elementor widget.
Version: 1.1.0
Requires at least: 6.0
Tested up to: 6.7
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: sevendayscare
Tags: one-column, custom-logo, custom-menu, featured-images, threaded-comments, translation-ready, blog, portfolio
*/

/* =====================================================================
   7DaysCare — the one stylesheet
   ---------------------------------------------------------------------
   This file replaces the four the drafts used to load (guides.css,
   botanical.css, blueprints.css, home.css). Those stacked a second brand
   on top of a first: guides.css declared a blue-and-emerald palette and
   botanical.css overrode nearly all of it. Here the 7DaysCare values are
   declared once, resolved, so there is nothing to override and one file
   to read.

   Naming follows WordPress. Structure uses the names WordPress and
   Underscores already use — .site-header, .site-branding,
   .main-navigation, .entry-content, .site-footer, .screen-reader-text —
   so WordPress, Elementor and third-party plugins style the right things
   without being told. Everything this theme adds is prefixed `sdc-`, and
   every custom property is `--sdc-`, so nothing collides with a plugin.

   CONTENTS
     1  Tokens
     2  Base elements
     3  Accessibility
     4  Layout
     5  Site header and navigation
     6  Site footer
     7  Buttons
     8  Hero
     9  Sections and bands
    10  Cards
    11  Chips and tags
    12  Plans and prices
    13  Tables
    14  FAQ
    15  WordPress content
    16  Elementor compatibility
    17  Responsive
    18  Print
   ===================================================================== */


/* ---------------------------------------------------------------------
   1  TOKENS
   Resolved 7DaysCare values. The source of truth is
   docs/7dayscare/tokens.json; these are its light theme, flattened.
   --------------------------------------------------------------------- */

:root {
	/* Brand field — teal into navy. The hero, the footer, deep panels. */
	--sdc-teal: #255258;
	--sdc-navy: #042953;
	--sdc-navy-deep: #021a33;
	--sdc-warm: #8a503c;
	--sdc-glow: #b17c48;
	--sdc-ivory: #f7f8f3;
	--sdc-button-navy: #01274e;
	--sdc-tile: #10324b;

	/* Mint — THE lead colour. Whole fields, never a tint, never a control.
	   White on mint is 1.34:1, so a word on mint is ink or ink-muted. */
	--sdc-mint: #97efbd;
	--sdc-mint-soft: #d4efe2;
	--sdc-mint-wash: #f3faf6;

	/* Accent — the C in the logo, #98452e. Everything warm derives from it,
	   so the mark and the interface carry one hue. */
	--sdc-accent-50: #fdf0ec;
	--sdc-accent-100: #fadcd3;
	--sdc-accent-200: #f5b5a3;
	--sdc-accent-300: #f29f87;
	--sdc-accent-400: #e2785a;
	--sdc-accent-500: #cf5330;
	--sdc-accent-600: #b6553a;
	--sdc-accent-700: #98452e;
	--sdc-accent-800: #723422;
	--sdc-accent-900: #4e2418;

	/* Teal scale */
	--sdc-brand-50: #eef3f3;
	--sdc-brand-100: #d2e2e1;
	--sdc-brand-200: #a7c6c4;
	--sdc-brand-300: #6fa3a2;
	--sdc-brand-400: #3d7b7c;
	--sdc-brand-500: #265c60;
	--sdc-brand-600: #1b4c52;
	--sdc-brand-700: #143c45;
	--sdc-brand-800: var(--sdc-navy);
	--sdc-brand-900: var(--sdc-navy-deep);

	/* Greens — the mint's text-weight steps. Mint itself never carries a word. */
	--sdc-green-600: #1b7a55;
	--sdc-green-700: #16624a;
	--sdc-green-800: #0f4a37;

	/* Neutrals. 50 is the ivory page ground — warm, never pure white,
	   because a clinician reads this for six hours. */
	--sdc-neutral-0: #ffffff;
	--sdc-neutral-50: var(--sdc-ivory);
	--sdc-neutral-100: #eef0ea;
	--sdc-neutral-200: #e1e4dc;
	--sdc-neutral-300: #c9cdc3;
	--sdc-neutral-400: #656c62;
	--sdc-neutral-500: #5f665c;
	--sdc-neutral-600: #4d554c;
	--sdc-neutral-700: #39403a;
	--sdc-neutral-800: #222a26;
	--sdc-neutral-900: #14201f;

	/* Semantic */
	--sdc-text: var(--sdc-neutral-900);
	--sdc-text-secondary: var(--sdc-neutral-600);
	--sdc-text-muted: var(--sdc-neutral-400);
	--sdc-text-brand: var(--sdc-navy);
	--sdc-headline-ink: #0b162a;
	--sdc-bg: var(--sdc-neutral-0);
	--sdc-bg-subtle: var(--sdc-neutral-50);
	--sdc-border: var(--sdc-neutral-200);
	--sdc-border-strong: var(--sdc-neutral-300);
	--sdc-on-dark: rgba(255, 255, 255, 0.78);

	/* Status */
	--sdc-ok: #1f6b52;
	--sdc-warn: #8a5600;
	--sdc-error: #9d2a1f;
	--sdc-info: #1f5d7a;

	/* Gradients */
	--sdc-gradient-brand: linear-gradient(118deg, var(--sdc-warm) 0%, var(--sdc-teal) 46%, var(--sdc-navy) 100%);
	--sdc-gradient-cta: linear-gradient(118deg, var(--sdc-teal), var(--sdc-navy));
	--sdc-gradient-mark: linear-gradient(135deg, var(--sdc-teal), var(--sdc-navy));

	/* Type. Lora carries display, Vazirmatn carries interface and body in
	   Latin and Persian at matching metrics, IBM Plex Mono carries code. */
	--sdc-font-display: 'Lora', Georgia, 'Iowan Old Style', serif;
	--sdc-font-body: 'Vazirmatn', system-ui, -apple-system, sans-serif;
	--sdc-font-mono: 'IBM Plex Mono', ui-monospace, 'SF Mono', monospace;

	--sdc-text-xs: 0.75rem;
	--sdc-text-sm: 0.875rem;
	--sdc-text-base: 1rem;
	--sdc-text-lg: 1.125rem;
	--sdc-text-xl: 1.25rem;
	--sdc-text-2xl: 1.5rem;
	--sdc-text-3xl: 1.875rem;
	--sdc-text-4xl: 2.25rem;

	--sdc-leading-tight: 1.2;
	--sdc-leading-snug: 1.35;
	--sdc-leading-normal: 1.5;
	--sdc-leading-relaxed: 1.65;
	--sdc-tracking-tight: -0.02em;
	--sdc-tracking-tighter: -0.04em;
	--sdc-tracking-widest: 0.16em;

	/* Space */
	--sdc-space-1: 0.25rem;
	--sdc-space-2: 0.5rem;
	--sdc-space-3: 0.75rem;
	--sdc-space-4: 1rem;
	--sdc-space-5: 1.25rem;
	--sdc-space-6: 1.5rem;
	--sdc-space-8: 2rem;
	--sdc-space-10: 2.5rem;
	--sdc-space-12: 3rem;
	--sdc-space-16: 4rem;
	--sdc-space-20: 5rem;
	--sdc-space-24: 6rem;

	/* The content measure. Elementor reads its own container width from
	   its settings; keep the two the same and sections line up. */
	--sdc-content-width: 1280px;
	--sdc-gutter: 1.25rem;

	/* Effects */
	--sdc-radius-md: 8px;
	--sdc-radius-lg: 12px;
	--sdc-radius-xl: 16px;
	--sdc-radius-2xl: 24px;
	--sdc-radius-3xl: 32px;
	--sdc-radius-full: 9999px;
	--sdc-shadow-sm: 0 2px 4px rgba(4, 41, 83, 0.06), 0 1px 2px rgba(4, 41, 83, 0.04);
	--sdc-shadow-md: 0 4px 12px rgba(4, 41, 83, 0.08), 0 2px 4px rgba(4, 41, 83, 0.04);
	--sdc-shadow-lg: 0 8px 24px rgba(4, 41, 83, 0.10), 0 4px 8px rgba(4, 41, 83, 0.06);
	--sdc-shadow-xl: 0 16px 48px rgba(4, 41, 83, 0.12), 0 8px 16px rgba(4, 41, 83, 0.08);
	--sdc-shadow-brand: 0 4px 20px rgba(4, 41, 83, 0.28);
	--sdc-shadow-brand-lg: 0 8px 40px rgba(4, 41, 83, 0.36);
	--sdc-ease: cubic-bezier(0.4, 0, 0.2, 1);
	--sdc-transition-fast: 150ms var(--sdc-ease);
	--sdc-transition: 250ms var(--sdc-ease);
}


/* ---------------------------------------------------------------------
   2  BASE ELEMENTS
   --------------------------------------------------------------------- */

*,
*::before,
*::after {
	box-sizing: border-box;
}

body {
	margin: 0;
	font-family: var(--sdc-font-body);
	font-size: var(--sdc-text-base);
	line-height: var(--sdc-leading-normal);
	color: var(--sdc-text);
	background-color: var(--sdc-bg);
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

h1,
h2,
h3,
h4,
h5,
h6 {
	margin: 0 0 var(--sdc-space-4);
	font-family: var(--sdc-font-display);
	font-weight: 700;
	line-height: var(--sdc-leading-tight);
	letter-spacing: var(--sdc-tracking-tight);
	color: var(--sdc-headline-ink);
}

h1 { font-size: clamp(2.2rem, 5vw, 3.4rem); }
h2 { font-size: clamp(1.8rem, 3vw, var(--sdc-text-4xl)); }
h3 { font-size: var(--sdc-text-xl); }
h4 { font-size: var(--sdc-text-lg); }

p {
	margin: 0 0 var(--sdc-space-4);
}

a {
	color: var(--sdc-accent-700);
	text-decoration: none;
	transition: color var(--sdc-transition-fast);
}

a:hover,
a:focus {
	color: var(--sdc-accent-600);
	text-decoration: underline;
}

img,
svg,
video {
	max-width: 100%;
	height: auto;
	display: block;
}

ul,
ol {
	margin: 0 0 var(--sdc-space-4);
	padding-inline-start: 1.25rem;
}

li {
	margin-bottom: var(--sdc-space-2);
}

blockquote {
	margin: 0 0 var(--sdc-space-6);
	padding: var(--sdc-space-5) var(--sdc-space-6);
	background: var(--sdc-accent-50);
	border-inline-start: 3px solid var(--sdc-accent-700);
	border-radius: 0 var(--sdc-radius-lg) var(--sdc-radius-lg) 0;
}

code,
kbd,
pre,
samp {
	font-family: var(--sdc-font-mono);
	font-size: 0.9em;
}

code {
	padding: 0.15em 0.4em;
	background: var(--sdc-neutral-100);
	border-radius: var(--sdc-radius-md);
}

pre {
	overflow-x: auto;
	padding: var(--sdc-space-5);
	background: var(--sdc-navy-deep);
	color: var(--sdc-ivory);
	border-radius: var(--sdc-radius-lg);
}

hr {
	height: 1px;
	margin: var(--sdc-space-10) 0;
	border: 0;
	background: var(--sdc-border);
}

/* Form controls. line-strong, never line: an edge that marks a control
   has to carry contrast. */
input,
select,
textarea {
	font: inherit;
	color: inherit;
	max-width: 100%;
	padding: 0.65rem 0.9rem;
	background: var(--sdc-neutral-0);
	border: 1px solid var(--sdc-border-strong);
	border-radius: var(--sdc-radius-md);
}

input:focus,
select:focus,
textarea:focus {
	outline: 2px solid var(--sdc-accent-700);
	outline-offset: 1px;
	border-color: var(--sdc-accent-700);
}

:focus-visible {
	outline: 2px solid var(--sdc-accent-700);
	outline-offset: 2px;
}


/* ---------------------------------------------------------------------
   3  ACCESSIBILITY
   The WordPress names, because WordPress and its plugins use them.
   --------------------------------------------------------------------- */

.screen-reader-text {
	border: 0;
	clip: rect(1px, 1px, 1px, 1px);
	clip-path: inset(50%);
	height: 1px;
	margin: -1px;
	overflow: hidden;
	padding: 0;
	position: absolute !important;
	width: 1px;
	word-wrap: normal !important;
}

.screen-reader-text:focus {
	background-color: var(--sdc-neutral-0);
	clip: auto !important;
	clip-path: none;
	color: var(--sdc-navy);
	display: block;
	font-size: var(--sdc-text-sm);
	font-weight: 700;
	height: auto;
	inset-inline-start: var(--sdc-space-5);
	line-height: normal;
	padding: var(--sdc-space-3) var(--sdc-space-5);
	text-decoration: none;
	top: var(--sdc-space-5);
	width: auto;
	z-index: 100000;
	border-radius: var(--sdc-radius-md);
	box-shadow: var(--sdc-shadow-lg);
}

.skip-link:focus {
	position: absolute !important;
}

@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
		scroll-behavior: auto !important;
	}
}


/* ---------------------------------------------------------------------
   4  LAYOUT
   --------------------------------------------------------------------- */

.sdc-wrap {
	width: min(100% - (var(--sdc-gutter) * 2), var(--sdc-content-width));
	margin-inline: auto;
}

.site {
	display: flex;
	min-height: 100vh;
	flex-direction: column;
}

.site-content {
	flex: 1 0 auto;
}

/* The full-width template and an Elementor page carry their own widths, so
   nothing here may cap them. */
.site-main--full > .entry-content > *,
.site-main--full .entry-content {
	max-width: none;
}

/* WordPress alignment, so a block or an Elementor section can break the
   measure without a wrapper. */
.alignwide {
	width: min(100% - (var(--sdc-gutter) * 2), 1440px);
	margin-inline: auto;
	max-width: none;
}

.alignfull {
	width: 100%;
	max-width: none;
	margin-inline: 0;
}

.alignleft {
	float: left;
	margin: 0 var(--sdc-space-6) var(--sdc-space-4) 0;
}

.alignright {
	float: right;
	margin: 0 0 var(--sdc-space-4) var(--sdc-space-6);
}

.aligncenter {
	margin-inline: auto;
}

.sdc-center {
	text-align: center;
}

.sdc-center .sdc-section-lede {
	margin-inline: auto;
}


/* ---------------------------------------------------------------------
   5  SITE HEADER AND NAVIGATION
   Ivory nav over the teal hero. Sticky, because the call to action lives
   in it.
   --------------------------------------------------------------------- */

.site-header {
	position: sticky;
	top: 0;
	z-index: 50;
	background: var(--sdc-ivory);
	border-bottom: 1px solid var(--sdc-border);
}

.site-header-inner {
	display: flex;
	align-items: center;
	gap: var(--sdc-space-6);
	min-height: 76px;
}

/* --- branding ------------------------------------------------------- */

.site-branding {
	display: flex;
	align-items: center;
	gap: var(--sdc-space-3);
}

.site-branding a {
	display: flex;
	align-items: center;
	gap: var(--sdc-space-3);
	color: inherit;
	text-decoration: none;
}

/* The uploaded logo, from Appearance - Customize - Site Identity. */
.custom-logo-link {
	display: inline-flex;
	align-items: center;
}

/* The supplied lockup, used in the header and the footer.
 *
 * Its ink is navy: the 7D, the wordmark and half the wave. That is 14.36:1
 * on the ivory nav and 1.14:1 on the navy footer — invisible. The brand book
 * names this in §7.2 as the missing reverse logo, and until there is one the
 * footer gives it a light plate to sit on rather than a ground it disappears
 * into. The artwork is used exactly as supplied either way. */
.sdc-logo {
	display: block;
	width: auto;
	height: 44px;
}

.custom-logo {
	width: auto;
	max-height: 48px;
}

.site-footer .site-branding {
	display: inline-flex;
	align-items: center;
	padding: 0.7rem 1rem;
	background: var(--sdc-ivory);
	border-radius: var(--sdc-radius-lg);
}

.site-footer .sdc-logo,
.site-footer .custom-logo {
	height: 40px;
	max-height: 40px;
}

/* The mark alone, kept for a site that uploads a square logo or none. */
.sdc-mark {
	position: relative;
	display: grid;
	place-items: center;
	width: 40px;
	height: 40px;
	flex: none;
	overflow: hidden;
	border-radius: var(--sdc-radius-full);
	background: var(--sdc-gradient-mark);
}

.sdc-mark img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	background: var(--sdc-neutral-0);
}

/* The wordmark is live type, Lora 700 — 7Days in ink, Care in accent. */
.site-title,
.sdc-wordmark {
	margin: 0;
	font-family: var(--sdc-font-display);
	font-size: var(--sdc-text-lg);
	font-weight: 700;
	letter-spacing: var(--sdc-tracking-tight);
	white-space: nowrap;
	line-height: 1.1;
}

.sdc-wordmark-a {
	color: var(--sdc-headline-ink);
}

.sdc-wordmark-b {
	color: var(--sdc-accent-700);
}

.site-description {
	margin: 0;
	font-size: var(--sdc-text-xs);
	color: var(--sdc-text-secondary);
}

/* --- navigation ----------------------------------------------------- */

/* The navigation is a flex row either way: a <ul> when WordPress prints the
   menu, and bare <a>s on the static pages. Both are styled, because the
   theme and those pages share this stylesheet. */
.main-navigation {
	margin-inline-start: auto;
	display: flex;
	align-items: center;
	gap: var(--sdc-space-5);
}

.main-navigation ul {
	display: flex;
	align-items: center;
	gap: var(--sdc-space-5);
	margin: 0;
	padding: 0;
	list-style: none;
}

.main-navigation li {
	margin: 0;
	position: relative;
}

/* :not(.sdc-btn) matters. This selector is (0,1,1) and .sdc-btn is (0,1,0),
   so without it the nav's call to action loses its display, its size and
   its colour to the link styling and renders as a tall block. */
.main-navigation a:not(.sdc-btn) {
	display: block;
	font-size: var(--sdc-text-sm);
	font-weight: 500;
	color: var(--sdc-text-secondary);
	white-space: nowrap;
	text-decoration: none;
}

.main-navigation a:not(.sdc-btn):hover,
.main-navigation a:not(.sdc-btn):focus {
	color: var(--sdc-brand-600);
	text-decoration: none;
}

.main-navigation .current-menu-item > a,
.main-navigation .current_page_item > a {
	font-weight: 700;
	color: var(--sdc-navy);
}

/* A menu item given the class `sdc-nav-cta` in Appearance - Menus
   renders as the button. No second menu to maintain. */
.main-navigation .sdc-nav-cta > a {
	padding: 0 var(--sdc-space-6);
	height: 40px;
	display: inline-flex;
	align-items: center;
	border-radius: var(--sdc-radius-full);
	background: var(--sdc-button-navy);
	color: var(--sdc-neutral-0);
	font-weight: 600;
	box-shadow: var(--sdc-shadow-brand);
}

.main-navigation .sdc-nav-cta > a:hover {
	color: var(--sdc-neutral-0);
	filter: brightness(1.07);
	transform: translateY(-2px);
}

/* Sub-menus */
.main-navigation ul ul {
	position: absolute;
	top: 100%;
	inset-inline-start: 0;
	display: none;
	flex-direction: column;
	gap: 0;
	min-width: 220px;
	padding: var(--sdc-space-3);
	background: var(--sdc-neutral-0);
	border: 1px solid var(--sdc-border);
	border-radius: var(--sdc-radius-lg);
	box-shadow: var(--sdc-shadow-lg);
}

.main-navigation li:hover > ul,
.main-navigation li:focus-within > ul {
	display: flex;
}

.main-navigation ul ul a {
	padding: var(--sdc-space-2) var(--sdc-space-3);
	border-radius: var(--sdc-radius-md);
	white-space: normal;
}

.main-navigation ul ul a:hover {
	background: var(--sdc-mint-wash);
}

/* --- the toggle ----------------------------------------------------- */

.menu-toggle {
	display: none;
	align-items: center;
	gap: var(--sdc-space-2);
	margin-inline-start: auto;
	padding: 0.6rem 0.9rem;
	font: inherit;
	font-size: var(--sdc-text-sm);
	font-weight: 600;
	color: var(--sdc-navy);
	background: transparent;
	border: 1px solid var(--sdc-border-strong);
	border-radius: var(--sdc-radius-md);
	cursor: pointer;
}

.menu-toggle-bars {
	position: relative;
	display: block;
	width: 18px;
	height: 2px;
	background: currentColor;
}

.menu-toggle-bars::before,
.menu-toggle-bars::after {
	content: "";
	position: absolute;
	inset-inline-start: 0;
	width: 100%;
	height: 2px;
	background: currentColor;
}

.menu-toggle-bars::before { top: -6px; }
.menu-toggle-bars::after { top: 6px; }


/* ---------------------------------------------------------------------
   6  SITE FOOTER
   Deep navy. The logo sits here as well as in the header — the same
   uploaded file, so there is one logo to change.
   --------------------------------------------------------------------- */

.site-footer {
	margin-top: var(--sdc-space-16);
	padding-block: var(--sdc-space-16) var(--sdc-space-8);
	background: var(--sdc-navy-deep);
	color: rgba(255, 255, 255, 0.58);
}

.site-footer h2,
.site-footer h3,
.site-footer h4 {
	margin: 0 0 var(--sdc-space-4);
	font-size: var(--sdc-text-sm);
	font-weight: 700;
	letter-spacing: var(--sdc-tracking-widest);
	text-transform: uppercase;
	color: var(--sdc-neutral-0);
}

.site-footer ul {
	margin: 0;
	padding: 0;
	list-style: none;
}

.site-footer li {
	margin-bottom: var(--sdc-space-3);
}

.site-footer a {
	color: rgba(255, 255, 255, 0.72);
	font-size: var(--sdc-text-sm);
}

.site-footer a:hover,
.site-footer a:focus {
	color: var(--sdc-mint);
	text-decoration: none;
}

.site-footer-grid {
	display: grid;
	grid-template-columns: 2fr 1fr 1fr 1fr;
	gap: var(--sdc-space-10);
}

.site-footer .site-branding {
	margin-bottom: var(--sdc-space-4);
}

/* On navy the wordmark flips: white, with the accent at its hero-safe
   step so Care still reads as the accent. */
.site-footer .sdc-wordmark-a {
	color: var(--sdc-neutral-0);
}

.site-footer .sdc-wordmark-b {
	color: var(--sdc-accent-200);
}

.sdc-footer-blurb {
	max-width: 36ch;
	font-size: var(--sdc-text-sm);
	line-height: var(--sdc-leading-relaxed);
}

.site-info {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--sdc-space-5);
	margin-top: var(--sdc-space-12);
	padding-top: var(--sdc-space-6);
	border-top: 1px solid rgba(255, 255, 255, 0.12);
	font-size: var(--sdc-text-xs);
}


/* ---------------------------------------------------------------------
   7  BUTTONS
   .sdc-btn is the theme's. .wp-element-button and .wp-block-button__link
   are WordPress's own, given the same shape so a core block or an
   Elementor button matches without being restyled by hand.
   --------------------------------------------------------------------- */

.sdc-btn,
.wp-element-button,
.wp-block-button__link,
button.sdc-btn,
input[type="submit"] {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--sdc-space-2);
	height: 48px;
	padding-inline: var(--sdc-space-8);
	font-family: var(--sdc-font-body);
	font-size: var(--sdc-text-base);
	font-weight: 600;
	line-height: 1;
	text-align: center;
	text-decoration: none;
	white-space: nowrap;
	cursor: pointer;
	border: 1px solid transparent;
	border-radius: var(--sdc-radius-full);
	transition: transform var(--sdc-transition-fast), box-shadow var(--sdc-transition-fast), filter var(--sdc-transition-fast), background-color var(--sdc-transition-fast), color var(--sdc-transition-fast);
}

.sdc-btn:hover,
.sdc-btn:focus {
	text-decoration: none;
}

.sdc-btn--sm {
	height: 40px;
	padding-inline: var(--sdc-space-6);
	font-size: var(--sdc-text-sm);
}

.sdc-btn--lg {
	height: 56px;
	padding-inline: var(--sdc-space-10);
	font-size: var(--sdc-text-lg);
}

/* The one call to action: solid navy, sampled from the mockup, not a
   gradient. The brand puts an ivory nav and a navy action over the teal
   field, and the gradient belongs to the field itself. */
.sdc-btn--primary,
.wp-element-button,
.wp-block-button__link,
input[type="submit"] {
	background: var(--sdc-button-navy);
	color: var(--sdc-neutral-0);
	box-shadow: var(--sdc-shadow-brand);
}

.sdc-btn--primary:hover,
.sdc-btn--primary:focus,
.wp-element-button:hover,
.wp-block-button__link:hover,
input[type="submit"]:hover {
	background: #03356a;
	color: var(--sdc-neutral-0);
	transform: translateY(-2px);
	box-shadow: var(--sdc-shadow-brand-lg);
}

/* Terracotta — the consumer call to action. accent-700, because accent
   itself is 3.3:1 behind white and fails. */
.sdc-btn--accent {
	background: var(--sdc-accent-700);
	color: var(--sdc-neutral-0);
}

.sdc-btn--accent:hover,
.sdc-btn--accent:focus {
	background: var(--sdc-accent-800);
	color: var(--sdc-neutral-0);
	transform: translateY(-2px);
}

.sdc-btn--ghost {
	background: var(--sdc-neutral-0);
	border-color: var(--sdc-border-strong);
	color: var(--sdc-text);
}

.sdc-btn--ghost:hover,
.sdc-btn--ghost:focus {
	border-color: var(--sdc-accent-500);
	color: var(--sdc-accent-700);
	transform: translateY(-2px);
}

.sdc-btn--ghost.sdc-on-dark {
	background: transparent;
	border-color: rgba(255, 255, 255, 0.35);
	color: var(--sdc-neutral-0);
}

.sdc-btn--ghost.sdc-on-dark:hover,
.sdc-btn--ghost.sdc-on-dark:focus {
	border-color: var(--sdc-accent-300);
	color: var(--sdc-accent-200);
}

.sdc-btn--invert {
	background: var(--sdc-neutral-0);
	color: var(--sdc-brand-700);
}

.sdc-btn--invert:hover,
.sdc-btn--invert:focus {
	color: var(--sdc-brand-800);
	transform: translateY(-2px);
	box-shadow: var(--sdc-shadow-lg);
}


/* ---------------------------------------------------------------------
   8  HERO
   Warm through teal into navy, with the leaf silhouettes over it.
   --------------------------------------------------------------------- */

.sdc-hero {
	position: relative;
	overflow: hidden;
	padding-block: clamp(var(--sdc-space-16), 7vw, var(--sdc-space-24));
	background: var(--sdc-gradient-brand);
	color: var(--sdc-neutral-0);
}

/* The leaves. background-image, so a page needs no extra markup, and
   decorative, so it carries nothing readable. */
.sdc-hero::before {
	content: "";
	position: absolute;
	inset: 0;
	background-image: url("assets/img/leaves.svg");
	background-repeat: no-repeat;
	background-position: right -4rem top -2rem;
	background-size: min(62%, 760px);
	opacity: 0.5;
	pointer-events: none;
}

.sdc-hero > * {
	position: relative;
}

.sdc-hero h1,
.sdc-hero h2 {
	color: var(--sdc-neutral-0);
	font-size: clamp(2.4rem, 5.2vw, 4rem);
	letter-spacing: var(--sdc-tracking-tighter);
}

.sdc-hero-grid {
	display: grid;
	grid-template-columns: 1.05fr 0.95fr;
	gap: var(--sdc-space-16);
	align-items: center;
}

.sdc-hero-lede {
	max-width: 52ch;
	margin: var(--sdc-space-5) 0 var(--sdc-space-8);
	font-size: var(--sdc-text-lg);
	line-height: var(--sdc-leading-relaxed);
	color: var(--sdc-on-dark);
}

.sdc-hero-actions {
	display: flex;
	flex-wrap: wrap;
	gap: var(--sdc-space-4);
}

/* Mint and the hero-safe accent step, for a word inside a headline. */
.sdc-tone-mint {
	color: var(--sdc-mint);
}

.sdc-tone-accent {
	color: var(--sdc-accent-200);
}

.sdc-eyebrow {
	margin: 0 0 var(--sdc-space-4);
	font-size: var(--sdc-text-xs);
	font-weight: 700;
	letter-spacing: var(--sdc-tracking-widest);
	text-transform: uppercase;
	color: var(--sdc-accent-700);
}

.sdc-hero .sdc-eyebrow,
.sdc-on-dark .sdc-eyebrow {
	color: var(--sdc-accent-200);
}

/* A page head for everything that is not the home page.
 *
 * The ground, and the colour of a word on it, are the brand's own and are
 * carried in below: a warm-into-teal-into-navy gradient with white text, not
 * a flat field. Only the measure and the rhythm are set here, because
 * setting a colour here would land dark ink on that dark gradient — which is
 * exactly what this rule used to do. */
.sdc-page-head {
	padding-block: var(--sdc-space-16) var(--sdc-space-12);
}

.sdc-page-head p {
	max-width: 68ch;
	margin: 0;
	font-size: var(--sdc-text-lg);
}


/* ---------------------------------------------------------------------
   9  SECTIONS AND BANDS
   --------------------------------------------------------------------- */

.sdc-band {
	padding-block: clamp(var(--sdc-space-16), 6vw, var(--sdc-space-24));
}

.sdc-band--subtle {
	background: var(--sdc-bg-subtle);
}

.sdc-band--mint {
	background: var(--sdc-mint);
}

.sdc-band--mint-wash {
	background: var(--sdc-mint-wash);
}

.sdc-band--dark {
	background: var(--sdc-navy);
	color: var(--sdc-on-dark);
}

.sdc-band--dark h2,
.sdc-band--dark h3,
.sdc-band--dark h4 {
	color: var(--sdc-neutral-0);
}

.sdc-section-title {
	font-size: clamp(1.8rem, 3vw, var(--sdc-text-4xl));
	font-weight: 700;
}

.sdc-section-lede {
	max-width: 66ch;
	margin: var(--sdc-space-4) 0 var(--sdc-space-10);
	font-size: var(--sdc-text-lg);
	line-height: var(--sdc-leading-relaxed);
	color: var(--sdc-text-secondary);
}

.sdc-band--dark .sdc-section-lede {
	color: var(--sdc-on-dark);
}

/* A plain responsive grid, for anything that comes in twos to fours. */
.sdc-grid {
	display: grid;
	gap: var(--sdc-space-6);
}

.sdc-grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.sdc-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.sdc-grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }


/* ---------------------------------------------------------------------
   10  CARDS
   --------------------------------------------------------------------- */

.sdc-card {
	padding: var(--sdc-space-6);
	background: var(--sdc-neutral-0);
	border: 1px solid var(--sdc-border);
	border-radius: var(--sdc-radius-xl);
	transition: transform var(--sdc-transition-fast), box-shadow var(--sdc-transition-fast);
}

/* An edge or a shadow, never both. */
.sdc-card--raised {
	border-color: transparent;
	box-shadow: var(--sdc-shadow-md);
}

.sdc-card--link:hover {
	transform: translateY(-3px);
	box-shadow: var(--sdc-shadow-lg);
}

.sdc-card h3 {
	margin-bottom: var(--sdc-space-3);
}

.sdc-card p:last-child,
.sdc-card ul:last-child {
	margin-bottom: 0;
}

.sdc-card--featured {
	border-color: var(--sdc-accent-700);
	box-shadow: var(--sdc-shadow-lg);
}

/* The icon tile that heads a card. */
.sdc-icon-tile {
	display: grid;
	place-items: center;
	width: 48px;
	height: 48px;
	margin-bottom: var(--sdc-space-5);
	font-size: var(--sdc-text-xl);
	background: var(--sdc-mint-wash);
	border-radius: var(--sdc-radius-lg);
	color: var(--sdc-green-700);
}

.sdc-band--dark .sdc-icon-tile {
	background: var(--sdc-tile);
	color: var(--sdc-mint);
}

/* A feature card, as the features page lists them. */
.sdc-feature-list {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
	gap: var(--sdc-space-5);
}

.sdc-feature {
	padding: var(--sdc-space-6);
	background: var(--sdc-neutral-0);
	border: 1px solid var(--sdc-border);
	border-radius: var(--sdc-radius-lg);
}

.sdc-feature h3 {
	font-size: var(--sdc-text-lg);
	margin-bottom: var(--sdc-space-3);
}

.sdc-feature ul {
	margin: 0;
	padding-inline-start: 1.1rem;
	font-size: var(--sdc-text-sm);
	color: var(--sdc-text-secondary);
}

.sdc-feature-group {
	margin-bottom: var(--sdc-space-16);
}

.sdc-feature-group-head {
	display: flex;
	align-items: center;
	gap: var(--sdc-space-4);
	margin-bottom: var(--sdc-space-3);
	padding-bottom: var(--sdc-space-3);
	border-bottom: 1px solid var(--sdc-border);
}

.sdc-feature-group-count {
	display: grid;
	place-items: center;
	min-width: 32px;
	height: 32px;
	padding-inline: var(--sdc-space-2);
	font-family: var(--sdc-font-mono);
	font-size: var(--sdc-text-sm);
	background: var(--sdc-mint);
	border-radius: var(--sdc-radius-full);
	color: var(--sdc-green-800);
}


/* ---------------------------------------------------------------------
   11  CHIPS AND TAGS
   --------------------------------------------------------------------- */

.sdc-chip {
	display: inline-flex;
	align-items: center;
	gap: var(--sdc-space-2);
	padding: 0.3rem 0.75rem;
	font-size: var(--sdc-text-xs);
	font-weight: 600;
	background: var(--sdc-neutral-0);
	border: 1px solid var(--sdc-border-strong);
	border-radius: var(--sdc-radius-full);
	color: var(--sdc-text-secondary);
}

.sdc-chip--on {
	background: var(--sdc-mint);
	border-color: transparent;
	color: var(--sdc-green-800);
}

.sdc-chip--accent {
	background: var(--sdc-accent-50);
	border-color: var(--sdc-accent-700);
	color: var(--sdc-accent-700);
}

.sdc-chips {
	display: flex;
	flex-wrap: wrap;
	gap: var(--sdc-space-2);
	margin-bottom: var(--sdc-space-4);
}

/* Status, always beside a word — never colour alone. */
.sdc-status--ok { color: var(--sdc-ok); }
.sdc-status--warn { color: var(--sdc-warn); }
.sdc-status--error { color: var(--sdc-error); }
.sdc-status--info { color: var(--sdc-info); }

.sdc-ticks {
	margin: 0;
	padding: 0;
	list-style: none;
}

.sdc-ticks li {
	position: relative;
	padding-inline-start: 1.75rem;
	margin-bottom: var(--sdc-space-3);
}

.sdc-ticks li::before {
	content: "✓";
	position: absolute;
	inset-inline-start: 0;
	font-weight: 700;
	color: var(--sdc-green-600);
}

.sdc-band--dark .sdc-ticks li::before {
	color: var(--sdc-mint);
}

.sdc-crosses li::before {
	content: "✕";
	color: var(--sdc-text-muted);
}


/* ---------------------------------------------------------------------
   12  PLANS AND PRICES
   --------------------------------------------------------------------- */

.sdc-plans {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
	gap: var(--sdc-space-6);
	align-items: start;
}

.sdc-plan {
	position: relative;
	display: flex;
	flex-direction: column;
	padding: var(--sdc-space-8) var(--sdc-space-6);
	background: var(--sdc-neutral-0);
	border: 1px solid var(--sdc-border);
	border-radius: var(--sdc-radius-2xl);
}

.sdc-plan--featured {
	border-color: var(--sdc-accent-700);
	box-shadow: var(--sdc-shadow-xl);
}

.sdc-plan-name {
	font-size: var(--sdc-text-xl);
	margin-bottom: var(--sdc-space-2);
}

.sdc-plan-for {
	font-size: var(--sdc-text-sm);
	color: var(--sdc-text-secondary);
	margin-bottom: var(--sdc-space-5);
}

.sdc-price {
	display: flex;
	align-items: baseline;
	gap: var(--sdc-space-2);
	font-family: var(--sdc-font-display);
	font-size: clamp(2rem, 4vw, 2.75rem);
	font-weight: 700;
	line-height: 1;
	color: var(--sdc-headline-ink);
}

.sdc-price-period {
	font-family: var(--sdc-font-body);
	font-size: var(--sdc-text-sm);
	font-weight: 500;
	color: var(--sdc-text-secondary);
}

.sdc-price-note {
	margin: var(--sdc-space-3) 0 var(--sdc-space-6);
	font-size: var(--sdc-text-sm);
	color: var(--sdc-text-secondary);
}

.sdc-plan .sdc-btn {
	margin-top: auto;
}

.sdc-plan-flag {
	position: absolute;
	top: calc(var(--sdc-space-4) * -1);
	inset-inline-start: var(--sdc-space-6);
	padding: 0.3rem 0.75rem;
	font-size: var(--sdc-text-xs);
	font-weight: 700;
	letter-spacing: var(--sdc-tracking-widest);
	text-transform: uppercase;
	background: var(--sdc-accent-700);
	color: var(--sdc-neutral-0);
	border-radius: var(--sdc-radius-full);
}


/* ---------------------------------------------------------------------
   13  TABLES
   A mint header band, hairline row rules.
   --------------------------------------------------------------------- */

.sdc-table-wrap {
	overflow-x: auto;
	border: 1px solid var(--sdc-border);
	border-radius: var(--sdc-radius-lg);
}

table {
	width: 100%;
	border-collapse: collapse;
	font-size: var(--sdc-text-sm);
}

th,
td {
	padding: var(--sdc-space-3) var(--sdc-space-4);
	text-align: start;
	border-bottom: 1px solid var(--sdc-border);
	vertical-align: top;
}

thead th {
	background: var(--sdc-mint);
	color: var(--sdc-green-800);
	font-family: var(--sdc-font-body);
	font-weight: 700;
	white-space: nowrap;
}

tbody tr:last-child th,
tbody tr:last-child td {
	border-bottom: 0;
}

tbody tr:hover {
	background: var(--sdc-mint-wash);
}

.sdc-table-group th {
	background: var(--sdc-bg-subtle);
	color: var(--sdc-navy);
	font-size: var(--sdc-text-xs);
	letter-spacing: var(--sdc-tracking-widest);
	text-transform: uppercase;
}

/* The cell that carries the row's subject. */
.sdc-cell--strong {
	font-weight: 600;
	color: var(--sdc-headline-ink);
	white-space: nowrap;
}

@media (max-width: 640px) {
	.sdc-cell--strong {
		white-space: normal;
	}
}


/* ---------------------------------------------------------------------
   14  FAQ
   <details>, so it works with no JavaScript.
   --------------------------------------------------------------------- */

.sdc-faq {
	max-width: 76ch;
}

.sdc-faq details {
	padding: var(--sdc-space-5) 0;
	border-bottom: 1px solid var(--sdc-border);
}

.sdc-faq summary {
	font-family: var(--sdc-font-display);
	font-size: var(--sdc-text-lg);
	font-weight: 700;
	cursor: pointer;
	list-style: none;
	display: flex;
	justify-content: space-between;
	gap: var(--sdc-space-4);
	color: var(--sdc-headline-ink);
}

.sdc-faq summary::-webkit-details-marker {
	display: none;
}

.sdc-faq summary::after {
	content: "+";
	font-weight: 400;
	color: var(--sdc-accent-700);
}

.sdc-faq details[open] summary::after {
	content: "−";
}

.sdc-faq details > *:not(summary) {
	margin-top: var(--sdc-space-4);
	color: var(--sdc-text-secondary);
}


/* ---------------------------------------------------------------------
   15  WORDPRESS CONTENT
   The names WordPress emits, so a post, a page, a widget and a comment
   are styled without touching the templates.
   --------------------------------------------------------------------- */

.entry-content > * {
	margin-inline: auto;
	max-width: 76ch;
}

/* A block or an Elementor section that opts out of the measure. */
.entry-content > .alignwide,
.entry-content > .alignfull,
.entry-content > .sdc-band,
.entry-content > .sdc-hero,
.entry-content > .elementor {
	max-width: none;
}

.entry-header {
	margin-bottom: var(--sdc-space-8);
}

.entry-title {
	margin-bottom: var(--sdc-space-3);
}

.entry-meta {
	font-size: var(--sdc-text-sm);
	color: var(--sdc-text-muted);
}

.entry-footer {
	margin-top: var(--sdc-space-8);
	padding-top: var(--sdc-space-5);
	border-top: 1px solid var(--sdc-border);
	font-size: var(--sdc-text-sm);
	color: var(--sdc-text-secondary);
}

.post-thumbnail img {
	border-radius: var(--sdc-radius-xl);
}

.wp-caption,
figure {
	margin: 0 0 var(--sdc-space-6);
}

.wp-caption-text,
figcaption {
	font-size: var(--sdc-text-sm);
	color: var(--sdc-text-muted);
	text-align: center;
	margin-top: var(--sdc-space-2);
}

.sticky .entry-title::after {
	content: "★";
	color: var(--sdc-accent-700);
	margin-inline-start: var(--sdc-space-2);
}

.bypostauthor > .comment-body {
	border-inline-start: 2px solid var(--sdc-mint);
	padding-inline-start: var(--sdc-space-4);
}

.comment-list {
	list-style: none;
	padding: 0;
}

.comment-body {
	padding: var(--sdc-space-5) 0;
	border-bottom: 1px solid var(--sdc-border);
}

/* Pagination */
.navigation.pagination,
.nav-links {
	display: flex;
	flex-wrap: wrap;
	gap: var(--sdc-space-3);
	margin-top: var(--sdc-space-10);
}

.page-numbers {
	display: grid;
	place-items: center;
	min-width: 40px;
	height: 40px;
	padding-inline: var(--sdc-space-3);
	border: 1px solid var(--sdc-border-strong);
	border-radius: var(--sdc-radius-md);
	color: var(--sdc-text);
}

.page-numbers.current {
	background: var(--sdc-navy);
	border-color: var(--sdc-navy);
	color: var(--sdc-neutral-0);
}

/* Widgets */
.widget {
	margin-bottom: var(--sdc-space-8);
}

.widget-title {
	font-size: var(--sdc-text-lg);
	margin-bottom: var(--sdc-space-4);
}

/* The archive and search page head, on mint. */
.page-header {
	padding-block: var(--sdc-space-12);
	background: var(--sdc-mint);
	margin-bottom: var(--sdc-space-12);
}

.page-title {
	margin: 0;
}


/* ---------------------------------------------------------------------
   16  ELEMENTOR COMPATIBILITY
   Elementor lays out its own sections. The theme's job is to stay out of
   the way: no measure on an Elementor page, and the theme's typography
   and buttons carried into Elementor's widgets so a dropped widget
   already looks like the brand.
   --------------------------------------------------------------------- */

/* Elementor manages its own width. Never cap it. */
.elementor-section,
.elementor-container,
.elementor-widget-container {
	max-width: none;
}

/* The canvas and full-width templates have no header, so nothing of the
   theme's page chrome should reserve space. */
.elementor-template-canvas .site-header,
.elementor-template-canvas .site-footer {
	display: none;
}

/* Elementor's own button, given the theme's shape. Specificity matches
   Elementor's so this lands without !important. */
.elementor-button,
.elementor .elementor-button {
	border-radius: var(--sdc-radius-full);
	font-family: var(--sdc-font-body);
	font-weight: 600;
}

.elementor-button-link.elementor-size-md,
.elementor-button.elementor-size-md {
	padding-inline: var(--sdc-space-8);
}

/* Headings and body inside Elementor inherit the brand, so a new text
   widget is Lora or Vazirmatn without anybody setting it. */
.elementor-widget-heading .elementor-heading-title {
	font-family: var(--sdc-font-display);
	letter-spacing: var(--sdc-tracking-tight);
	color: var(--sdc-headline-ink);
}

.elementor-widget-text-editor,
.elementor-widget-theme-post-content {
	font-family: var(--sdc-font-body);
	color: var(--sdc-text);
}

/* An Elementor section the editor has given one of the theme's band
   classes keeps the band's padding without fighting Elementor's own. */
.elementor-section.sdc-band {
	padding-block: clamp(var(--sdc-space-16), 6vw, var(--sdc-space-24));
}

/* Elementor's icon list ticks, in the brand green. */
.elementor-icon-list-icon i,
.elementor-icon-list-icon svg {
	color: var(--sdc-green-600);
	fill: var(--sdc-green-600);
}


/* ---------------------------------------------------------------------
   17  RESPONSIVE
   --------------------------------------------------------------------- */

@media (max-width: 1024px) {
	.sdc-hero-grid {
		grid-template-columns: 1fr;
		gap: var(--sdc-space-10);
	}

	.site-footer-grid {
		grid-template-columns: 1fr 1fr;
	}

	.sdc-grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.sdc-grid--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 860px) {
	/* The nav collapses. The toggle is a real button, so it works from the
	   keyboard, and the panel is the same <ul> the desktop nav uses. */
	.menu-toggle {
		display: inline-flex;
	}

	.main-navigation {
		position: absolute;
		top: 100%;
		inset-inline: 0;
		display: none;
		padding: var(--sdc-space-5) var(--sdc-gutter) var(--sdc-space-8);
		background: var(--sdc-ivory);
		border-bottom: 1px solid var(--sdc-border);
		box-shadow: var(--sdc-shadow-lg);
	}

	.main-navigation.is-open {
		display: block;
	}

	.main-navigation ul {
		flex-direction: column;
		align-items: stretch;
		gap: var(--sdc-space-1);
	}

	.main-navigation a {
		padding: var(--sdc-space-3) 0;
		font-size: var(--sdc-text-base);
	}

	.main-navigation .sdc-nav-cta > a {
		margin-top: var(--sdc-space-3);
		justify-content: center;
	}

	.main-navigation ul ul {
		position: static;
		display: flex;
		box-shadow: none;
		border: 0;
		padding: 0 0 0 var(--sdc-space-4);
		background: transparent;
	}

	.site-header-inner {
		position: relative;
	}
}

@media (max-width: 640px) {
	:root {
		--sdc-gutter: 1rem;
	}

	.site-footer-grid,
	.sdc-grid--2,
	.sdc-grid--3,
	.sdc-grid--4 {
		grid-template-columns: 1fr;
	}

	.sdc-hero::before {
		background-size: 120%;
		opacity: 0.3;
	}

	.sdc-hero-actions .sdc-btn {
		width: 100%;
	}
}


/* ---------------------------------------------------------------------
   18  PRINT
   --------------------------------------------------------------------- */

@media print {
	.site-header,
	.site-footer,
	.menu-toggle,
	.sdc-hero::before {
		display: none !important;
	}

	body {
		background: #fff;
		color: #000;
	}

	.sdc-hero,
	.sdc-band--dark {
		background: #fff !important;
		color: #000 !important;
	}

	a::after {
		content: " (" attr(href) ")";
		font-size: 0.8em;
	}
}


/* ==== BEGIN generated page components ====
   The five marketing pages' own components, carried from the four
   stylesheets they used to load. Written by
   scripts/sevendayscare_wp.py — edit the map there, re-run it.
   ==== */

.sdc-grad-text { background:var(--sdc-gradient-cta); -webkit-background-clip:text; background-clip:text; color:transparent;}
.sdc-nav-link {
  font-size:var(--sdc-text-sm); font-weight:500; color:var(--sdc-text-secondary);
  display:inline-flex; align-items:center; gap:var(--sdc-space-1);
  background:none; border:0; font-family:inherit; cursor:pointer; padding:0;}
.sdc-nav-link:hover { color:var(--sdc-brand-600);}
.sdc-nav-link.sdc-is-key { font-weight:700; color:var(--sdc-brand-700);}
.sdc-nav-link.sdc-is-key:hover { color:var(--sdc-brand-800);}
.main-navigation > .sdc-nav-link, .sdc-nav-link { white-space:nowrap;}
.sdc-notice {
  border:1px solid var(--sdc-accent-200); border-radius:var(--sdc-radius-xl);
  background:var(--sdc-accent-50); padding:var(--sdc-space-5) var(--sdc-space-6);
  margin-bottom:var(--sdc-space-8);}
.sdc-notice strong { display:block; color:var(--sdc-accent-800); font-family:var(--sdc-font-display); font-size:var(--sdc-text-lg);}
.sdc-notice p { margin:var(--sdc-space-2) 0 var(--sdc-space-3); color:var(--sdc-neutral-700); font-size:var(--sdc-text-sm);}
.sdc-notice a { font-size:var(--sdc-text-sm); font-weight:600;}
.sdc-category-grid { display:grid; grid-template-columns:repeat(auto-fit, minmax(320px, 1fr)); gap:var(--sdc-space-6);}
.sdc-category-card {
  position:relative; background:#fff; border:1px solid var(--sdc-border);
  border-radius:var(--sdc-radius-xl); padding:var(--sdc-space-8); overflow:hidden;
  transition:transform var(--sdc-transition), box-shadow var(--sdc-transition);
  display:flex; flex-direction:column;}
.sdc-category-card::after { content:''; position:absolute; inset:0 0 auto; height:4px; background:var(--sdc-gradient-cta); transform:scaleX(0); transform-origin:left; transition:transform var(--sdc-transition);}
.sdc-category-card:hover { transform:translateY(-5px); box-shadow:var(--sdc-shadow-xl);}
.sdc-category-card:hover::after { transform:scaleX(1);}
.sdc-category-card-top { display:flex; align-items:center; justify-content:space-between; margin-bottom:var(--sdc-space-5);}
.sdc-category-index { font-family:var(--sdc-font-mono); font-size:var(--sdc-text-sm); color:var(--sdc-text-muted);}
.sdc-category-card h3 { font-size:var(--sdc-text-2xl); font-weight:700;}
.sdc-category-card h3 a { color:var(--sdc-text-brand);}
.sdc-category-tagline { color:var(--sdc-text-secondary); margin:var(--sdc-space-3) 0 var(--sdc-space-4); line-height:var(--sdc-leading-relaxed);}
.sdc-category-card .sdc-btn { margin-top:auto; align-self:flex-start;}
.sdc-cta { background:var(--sdc-gradient-brand); border-radius:var(--sdc-radius-3xl); padding:clamp(var(--sdc-space-10), 5vw, var(--sdc-space-20)); text-align:center; color:#fff;}
.sdc-cta h2 { font-size:clamp(1.8rem, 3.4vw, var(--sdc-text-4xl)); font-weight:700;}
.sdc-cta p { color:rgba(255,255,255,.85); max-width:56ch; margin:var(--sdc-space-4) auto var(--sdc-space-8); font-size:var(--sdc-text-lg);}
.sdc-cta-actions { display:flex; gap:var(--sdc-space-4); justify-content:center; flex-wrap:wrap;}
.sdc-crumbs { display:flex; gap:var(--sdc-space-2); font-size:var(--sdc-text-sm); color:rgba(255,255,255,.55); margin-bottom:var(--sdc-space-6);}
.sdc-crumbs a { color:rgba(255,255,255,.75);}
.sdc-crumbs a:hover { color:var(--sdc-accent-300);}
.sdc-doc { min-width:0; font-size:var(--sdc-text-base); line-height:var(--sdc-leading-relaxed); color:var(--sdc-neutral-700);}
.sdc-doc h2 { display:flex; align-items:baseline; gap:var(--sdc-space-4); font-size:clamp(1.5rem, 2.6vw, var(--sdc-text-3xl)); font-weight:700; color:var(--sdc-text-brand); margin:var(--sdc-space-16) 0 var(--sdc-space-5); scroll-margin-top:146px;}
.sdc-doc .section:first-child h2 { margin-top:0;}
.sdc-doc h3 { font-size:var(--sdc-text-xl); font-weight:600; color:var(--sdc-neutral-800); margin:var(--sdc-space-10) 0 var(--sdc-space-3); scroll-margin-top:146px;}
.sdc-doc h4 { font-size:var(--sdc-text-lg); font-weight:600; margin:var(--sdc-space-8) 0 var(--sdc-space-2);}
.sdc-doc p { margin:0 0 var(--sdc-space-4);}
.sdc-doc strong { color:var(--sdc-neutral-900); font-weight:600;}
.sdc-doc ul, .sdc-doc ol { margin:0 0 var(--sdc-space-5); padding-left:var(--sdc-space-6);}
.sdc-doc li { margin-bottom:var(--sdc-space-2);}
.sdc-doc hr { border:0; border-top:1px solid var(--sdc-border); margin:var(--sdc-space-12) 0;}
.sdc-doc blockquote { margin:0 0 var(--sdc-space-5); padding:var(--sdc-space-4) var(--sdc-space-6); border-left:4px solid var(--sdc-brand-200); background:var(--sdc-bg-subtle); border-radius:0 var(--sdc-radius-lg) var(--sdc-radius-lg) 0; color:var(--sdc-text-secondary);}
.sdc-doc blockquote p:last-child { margin-bottom:0;}
.sdc-doc table { border-collapse:collapse; width:100%; font-size:var(--sdc-text-sm);}
.sdc-doc table th, .sdc-doc table td { overflow-wrap:anywhere;}
.sdc-doc th { background:var(--sdc-brand-50); color:var(--sdc-text-brand); text-align:left; font-weight:600; padding:var(--sdc-space-3) var(--sdc-space-4); border-bottom:1px solid var(--sdc-border); white-space:nowrap;}
.sdc-doc td { padding:var(--sdc-space-3) var(--sdc-space-4); border-bottom:1px solid var(--sdc-neutral-100, var(--sdc-neutral-100)); vertical-align:top;}
.sdc-doc tbody tr:nth-child(even) { background:var(--sdc-neutral-50);}
.sdc-doc tbody tr:last-child td { border-bottom:0;}
.sdc-doc code { font-family:var(--sdc-font-mono); font-size:.86em; background:var(--sdc-neutral-100); padding:.15em .4em; border-radius:var(--sdc-radius-md, 4px); color:var(--sdc-brand-700);}
.sdc-doc pre.code, .sdc-doc pre.mermaid { background:var(--sdc-neutral-50); border:1px solid var(--sdc-border); border-radius:var(--sdc-radius-lg); padding:var(--sdc-space-5); overflow-x:auto; margin:0 0 var(--sdc-space-6);}
.sdc-doc pre.code code { background:none; padding:0; color:var(--sdc-neutral-700); font-size:var(--sdc-text-xs); line-height:var(--sdc-leading-snug);}
.sdc-doc pre.mermaid { text-align:left;}
.sdc-doc pre.mermaid svg { display:block; margin-inline:auto; max-width:100%; height:auto;}
.site-footer-brand .sdc-wordmark-b { color:#fff;}
@media (max-width: 560px) {
	.stats, .site-footer-grid { grid-template-columns:1fr;}
}
.bp-card.sdc-is-key {
  background:linear-gradient(180deg, #fdf6fd 0%, #fff 62%);
  border-color:var(--sdc-navy); box-shadow:0 1px 0 var(--sdc-navy) inset;}
.bp-card.sdc-is-key:hover { border-color:var(--sdc-navy-deep); box-shadow:var(--sdc-shadow-lg);}
.bp-card.sdc-is-key em { color:var(--sdc-navy-deep);}
.bp-card.sdc-is-key b { color:var(--sdc-navy-deep); font-size:var(--sdc-text-xl);}
.bp-card.sdc-is-key > span { color:var(--sdc-text);}
.jpick a.sdc-is-key { background: linear-gradient(180deg, #fdf6fd 0%, var(--sdc-neutral-0) 62%);
                  border-color: var(--sdc-navy); box-shadow: 0 1px 0 var(--sdc-navy) inset;}
.jpick a.sdc-is-key:hover { border-color: var(--sdc-navy-deep); box-shadow: var(--sdc-shadow-lg);}
.jpick a.sdc-is-key em, .jpick a.sdc-is-key b, .jpick a.sdc-is-key i { color: var(--sdc-navy-deep);}
.jpick a.sdc-is-key li::before { color: var(--sdc-navy);}
@media print {
	.site-header, .langstrip, .toc, .site-footer, .sdc-page-head::before { display:none !important;}
}
.sdc-hero,
.bp-head,
.sdc-page-head {
  position:relative; color:#fff;
  background:
    radial-gradient(46% 54% at 90% 1%,   rgba(177,124,72,.95) 0%, rgba(177,124,72,0) 64%),
    radial-gradient(56% 62% at -6% 104%, rgba(138,80,60,1) 0%,   rgba(138,80,60,0) 70%),
    radial-gradient(30% 46% at  4% 68%,  rgba(150,88,62,.60) 0%,  rgba(150,88,62,0) 72%),
    linear-gradient(104deg,
      #255258 0%, #245156 38%, #1d4652 56%, #103355 76%, var(--sdc-navy) 100%);}
@media (max-width: 780px) {
	.sdc-hero, .bp-head, .sdc-page-head {
    background:
      linear-gradient(170deg,
        rgba(3,26,40,.58) 0%, rgba(3,26,40,.50) 46%, rgba(3,26,40,.30) 72%, rgba(3,26,40,.12) 100%),
      radial-gradient(60% 34% at 94% 0%,  rgba(177,124,72,.55) 0%, rgba(177,124,72,0) 70%),
      radial-gradient(74% 40% at -8% 104%, rgba(138,80,60,.75) 0%, rgba(138,80,60,0) 72%),
      linear-gradient(150deg,
        #255258 0%, #245156 34%, #1d4652 56%, #103355 78%, var(--sdc-navy) 100%);}
}
.sdc-hero::before,
.bp-head::before,
.sdc-page-head::before {
  content:''; position:absolute; inset:0; z-index:0; pointer-events:none;
  color:#ffffff; opacity:.13;
  background-image:url('leaves.svg');
  background-size:1120px 1120px;
  -webkit-mask-image:radial-gradient(130% 115% at 8% 86%, #000 0%, #000 38%, rgba(0,0,0,.35) 68%, rgba(0,0,0,0) 92%);
          mask-image:radial-gradient(130% 115% at 8% 86%, #000 0%, #000 38%, rgba(0,0,0,.35) 68%, rgba(0,0,0,0) 92%);
  display:block;}
.sdc-hero > *, .bp-head > *, .sdc-page-head > * { position:relative; z-index:1;}
.bp-head .sdc-eyebrow, .sdc-page-head .sdc-eyebrow, .sdc-hero .sdc-eyebrow,
.bp-head .sdc-crumbs,  .sdc-page-head .sdc-crumbs,  .sdc-hero .sdc-crumbs { max-width:62ch;}
.bp-head .sdc-crumbs, .bp-head .sdc-crumbs a,
.sdc-page-head .sdc-crumbs, .sdc-page-head .sdc-crumbs a { color:rgba(255,255,255,.68);}
.sdc-hero .sdc-eyebrow, .sdc-page-head .sdc-eyebrow, .bp-head .sdc-eyebrow { color:var(--sdc-accent-200);}
.sdc-grad-text {
  background:linear-gradient(96deg, var(--sdc-accent-300) 0%, var(--sdc-accent-200) 72%);
  -webkit-background-clip:text; background-clip:text; color:transparent;}
.stat::before, .sdc-category-card::after { background:linear-gradient(90deg, var(--sdc-teal), var(--sdc-accent-500));}
.sdc-icon-tile, .panel-icon { background:var(--sdc-tile); box-shadow:none;}
.hero-panel .sdc-icon-tile svg, .hero-panel .panel-icon svg { color:var(--sdc-mint);}
.site-footer-brand .sdc-wordmark-a { color:#fff;}
.site-footer-brand .sdc-wordmark-b { color:var(--sdc-accent-300);}
.sdc-tag.sdc-is-free { background:var(--sdc-accent-50); color:var(--sdc-accent-800); border-color:var(--sdc-accent-200);}
.bp-head .sdc-crumbs, .bp-head .sdc-crumbs a { color: rgba(255,255,255,.62);}
.bp-head .sdc-crumbs a:hover { color: var(--sdc-accent-300);}
.bp-head .sdc-hero-lede { color: rgba(255,255,255,.78); font-size: var(--sdc-text-lg); line-height: var(--sdc-leading-relaxed); max-width: 60ch; margin: var(--sdc-space-5) 0 0;}
.bp-head .sdc-eyebrow { color: var(--sdc-accent-300);}
.act.sdc-is-key { background: var(--role-soft); border-color: var(--role);}
.sdc-jurisdiction { font-variant-numeric: tabular-nums;}
.sdc-jurisdiction td b { font-weight: 700; color: var(--sdc-text);}
.sdc-module-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(330px, 1fr)); gap: var(--sdc-space-5);}
.sdc-module-card {
  border: 1px solid var(--sdc-border); border-radius: var(--sdc-radius-xl);
  background: #fff; padding: var(--sdc-space-6); display: grid; gap: var(--sdc-space-3); align-content: start;
  position: relative; overflow: hidden;}
.sdc-module-card::before { content: ''; position: absolute; inset: 0 auto 0 0; width: 3px; background: var(--sdc-gradient-cta); opacity: .5;}
.sdc-module-card-top { display: flex; align-items: baseline; gap: var(--sdc-space-3); flex-wrap: wrap;}
.sdc-module-card h3 { font-size: var(--sdc-text-lg); font-weight: 700;}
.sdc-module-card code {
  font-family: var(--sdc-font-mono); font-size: 11px; color: var(--sdc-brand-700);
  background: var(--sdc-brand-50); border-radius: var(--sdc-radius-full); padding: 2px var(--sdc-space-3);}
.sdc-module-card > p { margin: 0; font-size: var(--sdc-text-sm); color: var(--sdc-text-secondary); line-height: var(--sdc-leading-relaxed);}
.sdc-module-features {
  list-style: none; margin: 0; padding: var(--sdc-space-4) 0 0; display: grid; gap: var(--sdc-space-2);
  border-top: 1px dashed var(--sdc-border-strong);}
.sdc-module-features li { font-size: var(--sdc-text-sm); color: var(--sdc-text-secondary); line-height: var(--sdc-leading-snug); padding-left: var(--sdc-space-5); position: relative;}
.sdc-module-features li::before { content: ''; position: absolute; left: 0; top: .5em; width: 6px; height: 6px; border-radius: var(--sdc-radius-full); background: var(--sdc-accent-400);}
.sdc-tags { display: flex; flex-wrap: wrap; gap: var(--sdc-space-2);}
.sdc-tag {
  font-size: 10px; font-weight: 700; letter-spacing: var(--sdc-tracking-widest); text-transform: uppercase;
  padding: 3px var(--sdc-space-3); border-radius: var(--sdc-radius-full); border: 1px solid transparent;
  white-space: nowrap;}
.sdc-tag.sdc-is-free { background: var(--sdc-accent-50); color: var(--sdc-accent-800); border-color: var(--sdc-accent-200);}
.sdc-tag.sdc-is-dev { background: var(--sdc-brand-50); color: var(--sdc-brand-700); border-color: var(--sdc-brand-200);}
.sdc-tag.sdc-is-paid { background: var(--sdc-gradient-cta); color: #fff;}
.sdc-doors { display:grid; gap:var(--sdc-space-3);}
.sdc-door {
  display:grid; grid-template-columns:auto 1fr auto; align-items:center; gap:var(--sdc-space-4);
  background:rgba(255,255,255,.07); border:1px solid rgba(255,255,255,.16);
  border-radius:var(--sdc-radius-2xl); padding:var(--sdc-space-5); color:#fff;
  backdrop-filter:blur(14px); transition:border-color var(--sdc-transition-fast);}
.sdc-door:hover { border-color:var(--sdc-accent-200); color:#fff;}
.sdc-door-number { font-family:var(--sdc-font-display); font-weight:700; color:var(--sdc-accent-200);}
.sdc-door b { display:block; font-weight:700; font-size:var(--sdc-text-base);}
.sdc-door span.sdc-door-sub { display:block; font-size:var(--sdc-text-sm); color:rgba(255,255,255,.75);
                      line-height:var(--sdc-leading-snug); margin-top:2px;}
.sdc-door-go { color:var(--sdc-accent-200); font-weight:700;}
.sdc-trust { border-bottom:1px solid var(--sdc-border); background:#fff;}
.sdc-trust-inner { display:flex; flex-wrap:wrap; gap:var(--sdc-space-2) var(--sdc-space-8);
               padding-block:var(--sdc-space-4); font-size:var(--sdc-text-sm);
               color:var(--sdc-text-secondary);}
.sdc-trust-inner span { display:inline-flex; align-items:center; gap:var(--sdc-space-2);}
.sdc-trust-inner b { color:var(--sdc-green-700);}
.sdc-plan .sdc-module-features li.sdc-is-off { color:var(--sdc-text-muted);}
.sdc-plan .sdc-module-features li.sdc-is-off::before { background:var(--sdc-neutral-300);}
.sdc-plan-cut {
  margin-top:auto; padding-top:var(--sdc-space-4);
  border-top:1px dashed var(--sdc-border-strong); font-size:var(--sdc-text-sm);
  line-height:var(--sdc-leading-snug);}
.sdc-plan-cut b { display:block; font-size:var(--sdc-text-base); margin-bottom:2px;}
.sdc-plan-cut.sdc-is-free b { color:var(--sdc-green-700);}
.sdc-plan-cut.sdc-is-cut  b { color:var(--sdc-accent-700);}
.sdc-plan-cut span { color:var(--sdc-text-secondary);}
.sdc-plan.sdc-is-featured { border:2px solid var(--sdc-accent-700);}
.sdc-pricing { position:relative;}
.sdc-pricing > input { position:absolute; opacity:0; pointer-events:none;}
.sdc-billing {
  display:inline-flex; align-items:center; gap:var(--sdc-space-1); padding:4px; flex-wrap:wrap;
  background:#fff; border:1px solid var(--sdc-border);
  border-radius:var(--sdc-radius-full); margin-bottom:var(--sdc-space-8);}
.sdc-billing label {
  padding:var(--sdc-space-2) var(--sdc-space-5); border-radius:var(--sdc-radius-full);
  font-size:var(--sdc-text-sm); font-weight:600; color:var(--sdc-text-secondary); cursor:pointer;}
.sdc-billing label:hover { color:var(--sdc-text);}
#bill-month:checked ~ .sdc-billing label[for="bill-month"],
#bill-year:checked  ~ .sdc-billing label[for="bill-year"] { background:var(--sdc-accent-700); color:#fff;}
.sdc-saving { font-size:var(--sdc-text-xs); font-weight:700; color:var(--sdc-green-700); margin-left:var(--sdc-space-2);}
.sdc-yearly { display:none;}
#bill-year:checked ~ .sdc-module-grid .sdc-monthly { display:none;}
#bill-year:checked ~ .sdc-module-grid .sdc-yearly { display:flex;}
#bill-year:checked ~ .sdc-module-grid .sdc-price-note .sdc-per-year { display:inline;}
#bill-year:checked ~ .sdc-module-grid .sdc-price-note .sdc-per-month { display:none;}
.sdc-price-note .sdc-per-year { display:none;}
.sdc-money { border:1px solid rgba(255,255,255,.18); border-radius:var(--sdc-radius-2xl); overflow:hidden;}
.sdc-money table { width:100%; border-collapse:collapse;}
.sdc-money th, .sdc-money td { padding:var(--sdc-space-5) var(--sdc-space-6); text-align:left; vertical-align:top;}
.sdc-money thead th {
  font-size:var(--sdc-text-xs); letter-spacing:var(--sdc-tracking-widest); text-transform:uppercase;
  font-weight:700; color:var(--sdc-accent-200); background:rgba(0,0,0,.18);}
.sdc-money tbody tr + tr { border-top:1px solid rgba(255,255,255,.18);}
.sdc-money td.sdc-rate { white-space:nowrap; font-family:var(--sdc-font-display); font-weight:800;
                 font-size:var(--sdc-text-2xl); color:#fff;}
.sdc-money td.sdc-rate.sdc-free { color:var(--sdc-mint);}
.sdc-money td.sdc-rate small { display:block; font-family:var(--sdc-font-body); font-weight:400;
                       font-size:var(--sdc-text-xs); color:rgba(255,255,255,.72); margin-top:2px;}
.sdc-money td.sdc-what { color:rgba(255,255,255,.88); font-size:var(--sdc-text-sm);
                 line-height:var(--sdc-leading-relaxed);}
.sdc-money td.sdc-what b { color:#fff;}
@media (max-width:760px) {
	.sdc-money thead { display:none;}
	.sdc-money tr { display:grid; gap:var(--sdc-space-1); padding:var(--sdc-space-5) var(--sdc-space-6);}
	.sdc-money td { padding:0;}
}
.sdc-money-notes { list-style:none; margin:var(--sdc-space-6) 0 0; padding:0;
               display:grid; gap:var(--sdc-space-3); color:rgba(255,255,255,.84);
               font-size:var(--sdc-text-sm);}
.sdc-money-notes li { padding-left:var(--sdc-space-6); position:relative;}
.sdc-money-notes li::before { content:''; position:absolute; left:0; top:.55em; width:7px; height:7px;
                          border-radius:var(--sdc-radius-full); background:var(--sdc-accent-200);}
.sdc-offer { border-radius:var(--sdc-radius-2xl); padding:var(--sdc-space-8); border:1px solid;}
.sdc-offer--free { background:#e8f6ee; border-color:#a9dcc1;}
.sdc-offer--plan { background:var(--sdc-accent-50); border-color:#f3cfc3;}
.sdc-offer-rate { font-family:var(--sdc-font-display); font-weight:800; line-height:1;
              font-size:clamp(2.4rem, 5vw, 3.4rem); letter-spacing:var(--sdc-tracking-tighter);}
.sdc-offer--free .sdc-offer-rate { color:var(--sdc-green-800);}
.sdc-offer--plan .sdc-offer-rate { color:var(--sdc-accent-800);}
.sdc-offer-cap { font-weight:600; margin-top:var(--sdc-space-2);}
.sdc-offer--free .sdc-offer-cap { color:var(--sdc-green-700);}
.sdc-offer--plan .sdc-offer-cap { color:var(--sdc-accent-800);}
.sdc-offer p { color:var(--sdc-neutral-700); margin-top:var(--sdc-space-4);}
.sdc-offer--free .sdc-ticks li::before { background:var(--sdc-green-700);}
.sdc-duo { display:grid; gap:clamp(var(--sdc-space-6), 3vw, var(--sdc-space-10)); align-items:start;}
@media (min-width:900px) {
	.sdc-duo { grid-template-columns:1fr 1fr;}
}
.sdc-duo--middle { align-items:center;}
.sdc-asks { list-style:none; margin:var(--sdc-space-5) 0 0; padding:0; display:grid; gap:var(--sdc-space-4);}
.sdc-asks li { display:grid; grid-template-columns:auto 1fr; gap:var(--sdc-space-4); align-items:start;}
.sdc-asks i { font-style:normal; font-family:var(--sdc-font-mono); font-size:var(--sdc-text-xs);
          font-weight:700; color:var(--sdc-accent-700); padding-top:3px;}
.sdc-figure {
  background:var(--sdc-neutral-50); border:1px solid var(--sdc-border);
  border-radius:var(--sdc-radius-2xl); padding:clamp(var(--sdc-space-5), 3vw, var(--sdc-space-8));
  margin-top:var(--sdc-space-8);}
.sdc-figure img { width:100%; height:auto; display:block;}
.sdc-figure figcaption {
  margin-top:var(--sdc-space-5); padding-top:var(--sdc-space-4);
  border-top:1px dashed var(--sdc-border-strong);
  font-size:var(--sdc-text-sm); color:var(--sdc-text-secondary); max-width:76ch;}
.sdc-figure figcaption b { color:var(--sdc-text);}
.sdc-moves { display:grid; gap:var(--sdc-space-5); grid-template-columns:repeat(auto-fit, minmax(260px, 1fr));}
.sdc-move {
  position:relative; background:#fff; border:1px solid var(--sdc-border);
  border-radius:var(--sdc-radius-2xl); padding:var(--sdc-space-8) var(--sdc-space-6) var(--sdc-space-6);
  display:flex; flex-direction:column;}
.sdc-move::before {
  content:''; position:absolute; inset:0 0 auto; height:5px;
  border-radius:var(--sdc-radius-2xl) var(--sdc-radius-2xl) 0 0;
  background:linear-gradient(90deg, var(--sdc-accent-700), var(--sdc-accent-300));}
.sdc-move-number {
  font-family:var(--sdc-font-display); font-weight:800; line-height:1;
  font-size:clamp(2.6rem, 4vw, 3.3rem); letter-spacing:var(--sdc-tracking-tighter);
  color:var(--sdc-accent-500); margin-bottom:var(--sdc-space-4);}
.sdc-move h3 { font-size:var(--sdc-text-xl); margin-bottom:var(--sdc-space-2);}
.sdc-move-sub {
  font-size:var(--sdc-text-xs); font-weight:700; text-transform:uppercase;
  letter-spacing:var(--sdc-tracking-widest); color:var(--sdc-accent-700);
  margin-bottom:var(--sdc-space-4); line-height:var(--sdc-leading-snug);}
.sdc-move p { font-size:var(--sdc-text-sm); color:var(--sdc-text-secondary);
          line-height:var(--sdc-leading-relaxed);}
.sdc-move p + p { margin-top:var(--sdc-space-3);}
.sdc-move-stops {
  margin-top:auto; padding-top:var(--sdc-space-5);
  border-top:1px dashed var(--sdc-border-strong);
  font-size:var(--sdc-text-sm); line-height:var(--sdc-leading-snug);}
.sdc-move-stops b { display:block; font-size:var(--sdc-text-xs); font-weight:700;
                text-transform:uppercase; letter-spacing:var(--sdc-tracking-widest);
                color:var(--sdc-green-700); margin-bottom:var(--sdc-space-2);}
.sdc-move-stops span { color:var(--sdc-text-secondary);}
.sdc-areas { display:grid; gap:0; border:1px solid var(--sdc-border);
         border-radius:var(--sdc-radius-2xl); overflow:hidden; background:#fff;}
.sdc-area { display:grid; grid-template-columns:1fr; gap:var(--sdc-space-2);
        padding:var(--sdc-space-5) var(--sdc-space-6);}
@media (min-width:860px) {
	.sdc-area { grid-template-columns:230px 1fr; gap:var(--sdc-space-6); align-items:start;}
}
.sdc-area + .sdc-area { border-top:1px solid var(--sdc-border);}
.sdc-area:nth-child(odd) { background:var(--sdc-neutral-50);}
.sdc-area dt { font-family:var(--sdc-font-display); font-weight:700; font-size:var(--sdc-text-lg);
           color:var(--sdc-headline-ink);}
.sdc-area dd { margin:0; font-size:var(--sdc-text-sm); color:var(--sdc-text-secondary);
           line-height:var(--sdc-leading-relaxed);}
.sdc-area dd b { color:var(--sdc-text); font-weight:600;}
.sdc-counts { display:grid; gap:var(--sdc-space-4); grid-template-columns:repeat(auto-fit, minmax(150px,1fr));
          margin-bottom:var(--sdc-space-8);}
.sdc-count { background:#fff; border:1px solid var(--sdc-border);
         border-radius:var(--sdc-radius-xl); padding:var(--sdc-space-5); text-align:center;}
.sdc-count b { display:block; font-family:var(--sdc-font-display); font-weight:800;
           font-size:clamp(1.8rem,3vw,2.4rem); color:var(--sdc-accent-700);
           letter-spacing:var(--sdc-tracking-tighter); line-height:1;}
.sdc-count span { display:block; font-size:var(--sdc-text-xs); color:var(--sdc-text-secondary);
              margin-top:var(--sdc-space-2);}
.sdc-roles { display:grid; gap:var(--sdc-space-4); grid-template-columns:repeat(auto-fit, minmax(240px,1fr));}
.sdc-role { border-left:3px solid var(--sdc-accent-300); padding-left:var(--sdc-space-4);}
.sdc-role b { display:block; font-size:var(--sdc-text-base);}
.sdc-role span { display:block; font-size:var(--sdc-text-sm); color:var(--sdc-text-secondary);
             line-height:var(--sdc-leading-snug); margin-top:2px;}
.sdc-phases { position:relative; padding-left:var(--sdc-space-8);}
.sdc-phases::before { content:''; position:absolute; left:11px; top:6px; bottom:6px; width:2px;
                  background:linear-gradient(180deg, var(--sdc-accent-700), var(--sdc-accent-200));}
.sdc-phase { position:relative; padding-bottom:var(--sdc-space-6);}
.sdc-phase:last-child { padding-bottom:0;}
.sdc-phase::before { content:''; position:absolute; left:calc(-1 * var(--sdc-space-8) + 5px); top:5px;
                 width:15px; height:15px; border-radius:var(--sdc-radius-full);
                 background:#fff; border:3px solid var(--sdc-accent-700);}
.sdc-phase b { display:block; font-family:var(--sdc-font-display); font-size:var(--sdc-text-lg); font-weight:700;}
.sdc-phase span { display:block; font-size:var(--sdc-text-sm); color:var(--sdc-text-secondary);
              line-height:var(--sdc-leading-snug); margin-top:2px;}
.sdc-system-grid {
  display:grid; gap:var(--sdc-space-5); margin-top:var(--sdc-space-10);
  grid-template-columns:repeat(3, minmax(0, 1fr));}
.sdc-system {
  background:#fff; border:1px solid var(--sdc-border);
  border-radius:var(--sdc-radius-xl); padding:var(--sdc-space-6);
  display:flex; flex-direction:column;}
.sdc-system .sdc-system-tag {
  font-family:var(--sdc-font-display); font-weight:800; font-size:.78rem;
  letter-spacing:var(--sdc-tracking-widest); text-transform:uppercase;
  color:var(--sdc-accent-700); margin-bottom:var(--sdc-space-2);}
.sdc-system h3 { margin:0 0 var(--sdc-space-3); font-size:1.08rem; letter-spacing:var(--sdc-tracking-tight);}
.sdc-system p { margin:0; color:var(--sdc-text-secondary); font-size:.95rem; line-height:1.6;}
.sdc-system ul { margin:var(--sdc-space-3) 0 0; padding-left:1.1em; color:var(--sdc-text-secondary); font-size:.92rem; line-height:1.65;}
.sdc-system li + li { margin-top:.3em;}
.sdc-plus {
  margin-top:var(--sdc-space-5); border-radius:var(--sdc-radius-2xl);
  background:var(--sdc-mint); border:1px solid #9fd6bd;
  padding:var(--sdc-space-8) var(--sdc-space-6);
  display:grid; gap:var(--sdc-space-6); grid-template-columns:minmax(0, 1.1fr) minmax(0, 1fr);
  align-items:start;}
.sdc-plus .sdc-plus-sign {
  font-family:var(--sdc-font-display); font-weight:800; line-height:1;
  font-size:clamp(2.2rem, 3.4vw, 2.9rem); color:var(--sdc-green-800);
  margin-bottom:var(--sdc-space-3);}
.sdc-plus h3 {
  margin:0 0 var(--sdc-space-3); color:var(--sdc-headline-ink);
  font-size:clamp(1.25rem, 2.2vw, 1.6rem); letter-spacing:var(--sdc-tracking-tight);}
.sdc-plus p { margin:0 0 var(--sdc-space-4); color:#1d3a30; line-height:1.65;}
.sdc-plus p:last-child { margin-bottom:0;}
.sdc-plus-steps { margin:0; padding:0; list-style:none; counter-reset:ps;}
.sdc-plus-steps li {
  counter-increment:ps; position:relative; padding-left:2.1em;
  color:#1d3a30; line-height:1.6; font-size:.95rem;}
.sdc-plus-steps li + li { margin-top:var(--sdc-space-3);}
.sdc-plus-steps li::before {
  content:counter(ps); position:absolute; left:0; top:-.05em;
  width:1.5em; height:1.5em; border-radius:var(--sdc-radius-full);
  background:var(--sdc-green-800); color:#fff;
  font-family:var(--sdc-font-display); font-weight:800; font-size:.8rem;
  display:grid; place-items:center;}
.sdc-sourced {
  margin-top:var(--sdc-space-8); padding:var(--sdc-space-5) var(--sdc-space-6);
  border-left:4px solid var(--sdc-accent-500);
  background:var(--sdc-bg-subtle); border-radius:0 var(--sdc-radius-lg) var(--sdc-radius-lg) 0;}
.sdc-sourced p { margin:0; line-height:1.7; color:var(--sdc-text);}
.sdc-sourced p + p { margin-top:var(--sdc-space-3);}
.sdc-sourced cite {
  display:block; margin-top:var(--sdc-space-3); font-style:normal;
  font-size:.86rem; color:var(--sdc-text-muted);}
@media (max-width:900px) {
	.sdc-system-grid { grid-template-columns:1fr;}
	.sdc-plus { grid-template-columns:1fr;}
}
.sdc-jurisdictions {
  display:grid; gap:var(--sdc-space-4); margin-top:var(--sdc-space-10);
  grid-template-columns:repeat(auto-fit, minmax(236px, 1fr));}
.sdc-jurisdiction {
  display:flex; flex-direction:column; background:#fff; text-decoration:none;
  border:1px solid var(--sdc-border); border-radius:var(--sdc-radius-xl);
  padding:var(--sdc-space-5); transition:border-color .15s ease, transform .15s ease;}
.sdc-jurisdiction:hover, .sdc-jurisdiction:focus-visible { border-color:var(--sdc-accent-500); transform:translateY(-2px);}
.sdc-jurisdiction .sdc-jurisdiction-key {
  font-size:.7rem; font-weight:700; letter-spacing:var(--sdc-tracking-widest);
  text-transform:uppercase; color:var(--sdc-text-muted);
  margin:0 0 var(--sdc-space-2);}
.sdc-jurisdiction b {
  font-family:var(--sdc-font-display); font-weight:700; font-size:1.05rem;
  color:var(--sdc-headline-ink); letter-spacing:var(--sdc-tracking-tight);}
.sdc-jurisdiction i {
  font-style:normal; font-size:.8rem; color:var(--sdc-accent-700);
  font-weight:600; margin-top:3px;}
.sdc-jurisdiction span {
  font-size:.88rem; color:var(--sdc-text-secondary);
  line-height:1.55; margin-top:var(--sdc-space-3);}
.sdc-jurisdiction--key { border-color:var(--sdc-accent-500); border-width:2px;}
.sdc-jurisdiction--key .sdc-jurisdiction-key { color:var(--sdc-accent-700);}
.sdc-custom {
  margin-top:var(--sdc-space-10); border-radius:var(--sdc-radius-2xl);
  background:var(--sdc-mint); border:1px solid #9fd6bd;
  padding:var(--sdc-space-8) var(--sdc-space-6);}
.sdc-custom h3 {
  margin:0 0 var(--sdc-space-3); color:var(--sdc-headline-ink);
  font-size:clamp(1.2rem, 2vw, 1.5rem); letter-spacing:var(--sdc-tracking-tight);}
.sdc-custom > p { margin:0 0 var(--sdc-space-6); color:#1d3a30; line-height:1.65; max-width:70ch;}
.sdc-custom-grid {
  display:grid; gap:var(--sdc-space-5);
  grid-template-columns:repeat(auto-fit, minmax(220px, 1fr));}
.sdc-custom-grid > div { border-left:3px solid var(--sdc-green-700); padding-left:var(--sdc-space-4);}
.sdc-custom-grid b { display:block; color:var(--sdc-green-800); font-size:.95rem; margin-bottom:4px;}
.sdc-custom-grid span { display:block; color:#1d3a30; font-size:.9rem; line-height:1.55;}
.sdc-offer-areas { columns:2; column-gap:var(--sdc-space-10); margin-top:var(--sdc-space-8);}
.sdc-offer-areas > div { break-inside:avoid; margin-bottom:var(--sdc-space-6);}
.sdc-offer-areas b { display:block; font-family:var(--sdc-font-display); font-size:1rem;
                 color:var(--sdc-headline-ink); margin-bottom:4px;}
.sdc-offer-areas span { display:block; font-size:.9rem; color:var(--sdc-text-secondary); line-height:1.55;}
@media (max-width:760px) {
	.sdc-offer-areas { columns:1;}
}
.sdc-part {
  background:var(--sdc-ivory, #faf7f0);
  border-top:1px solid var(--sdc-border);
  border-bottom:1px solid var(--sdc-border);
  padding:var(--sdc-space-10) 0;}
.sdc-part-inner {
  display:grid; gap:var(--sdc-space-6); align-items:center;
  grid-template-columns:minmax(0, auto) minmax(0, 1fr) minmax(0, auto);}
.sdc-part-number {
  font-family:var(--sdc-font-display); font-weight:800; line-height:1.25;
  font-size:clamp(2.2rem, 4vw, 3.2rem); color:var(--sdc-accent-500);
  letter-spacing:var(--sdc-tracking-tighter); white-space:nowrap;}
.sdc-part-number small {
  display:block; font-family:var(--sdc-font-body); font-weight:700;
  font-size:.68rem; letter-spacing:var(--sdc-tracking-widest);
  text-transform:uppercase; color:var(--sdc-accent-700); margin-bottom:6px;}
.sdc-part h2 {
  margin:0 0 var(--sdc-space-2); font-size:clamp(1.3rem, 2.4vw, 1.9rem);
  letter-spacing:var(--sdc-tracking-tight); color:var(--sdc-headline-ink);}
.sdc-part > .sdc-wrap > div > p { margin:0; color:var(--sdc-text-secondary); line-height:1.6; max-width:62ch;}
.sdc-part-skip { white-space:nowrap;}
@media (max-width:860px) {
	.sdc-part-inner { grid-template-columns:1fr;}
	.sdc-part-skip { justify-self:start;}
}
.sdc-compare-features { display:grid; gap:var(--sdc-space-5); grid-template-columns:repeat(auto-fit, minmax(300px, 1fr));}
.sdc-compare-feature {
  background:#fff; border:1px solid var(--sdc-border);
  border-radius:var(--sdc-radius-2xl); padding:var(--sdc-space-6);
  display:flex; flex-direction:column;}
.sdc-compare-feature-top { display:flex; align-items:center; gap:var(--sdc-space-4); margin-bottom:var(--sdc-space-4);}
.sdc-compare-feature-top .sdc-icon-tile { flex:0 0 auto; width:44px; height:44px;}
.sdc-compare-feature-top .sdc-icon-tile svg { width:21px; height:21px;}
.sdc-compare-feature h3 { margin:0; font-size:1.05rem; letter-spacing:var(--sdc-tracking-tight); color:var(--sdc-headline-ink);}
.sdc-compare-feature > p { margin:0 0 var(--sdc-space-4); color:var(--sdc-text-secondary); font-size:.93rem; line-height:1.6;}
.sdc-compare-feature ul { list-style:none; margin:0 0 var(--sdc-space-5); padding:0; display:grid; gap:var(--sdc-space-2);}
.sdc-compare-feature li { position:relative; padding-left:1.3em; font-size:.9rem; line-height:1.5;
           color:var(--sdc-text);}
.sdc-compare-feature li::before { content:''; position:absolute; left:0; top:.55em; width:6px; height:6px;
                   border-radius:var(--sdc-radius-full); background:var(--sdc-accent-400);}
.sdc-compare-feature-plans { margin-top:auto; display:flex; flex-wrap:wrap; gap:6px; align-items:center;
              border-top:1px solid var(--sdc-border); padding-top:var(--sdc-space-4);}
.sdc-compare-feature-plans > span:first-child { font-size:.72rem; letter-spacing:var(--sdc-tracking-widest);
  text-transform:uppercase; font-weight:700; color:var(--sdc-text-muted); margin-right:4px;}
.sdc-chip--off { background:var(--sdc-neutral-100); color:var(--sdc-text-muted);}
.sdc-compare { overflow-x:auto; border:1px solid var(--sdc-border);
           border-radius:var(--sdc-radius-xl); background:#fff;}
.sdc-compare table { border-collapse:collapse; width:100%; min-width:640px;
                 font-size:.9rem; table-layout:fixed;}
.sdc-compare thead th:first-child { width:40%;}
.sdc-compare thead th:not(:first-child) { width:20%;}
.sdc-compare thead th {
  position:sticky; top:0; z-index:2;
  background:var(--sdc-bg-subtle); color:var(--sdc-headline-ink);
  text-align:left; font-weight:700; padding:var(--sdc-space-4);
  border-bottom:2px solid var(--sdc-border); white-space:nowrap;}
.sdc-compare thead th small { display:block; font-weight:500; font-size:.76rem;
  color:var(--sdc-text-secondary); margin-top:3px; white-space:normal;}
.sdc-compare tbody th {
  position:sticky; left:0; z-index:1; background:#fff;
  text-align:left; font-weight:500; padding:var(--sdc-space-3) var(--sdc-space-4);
  border-bottom:1px solid var(--sdc-neutral-100); color:var(--sdc-text);
  min-width:230px;}
.sdc-compare td { padding:var(--sdc-space-3) var(--sdc-space-4); text-align:center;
              border-bottom:1px solid var(--sdc-neutral-100); vertical-align:middle;}
.sdc-compare tbody tr:nth-child(even) th,
.sdc-compare tbody tr:nth-child(even) td { background:var(--sdc-neutral-50);}
.sdc-compare tr.sdc-table-group th, .sdc-compare tr.sdc-table-group td {
  background:var(--sdc-accent-50) !important; border-bottom:1px solid var(--sdc-border);}
.sdc-compare tr.sdc-table-group th { font-family:var(--sdc-font-display); font-weight:700; font-size:.82rem;
  letter-spacing:var(--sdc-tracking-widest); text-transform:uppercase; color:var(--sdc-accent-700);}
.sdc-compare .sdc-yes, .sdc-compare .sdc-no, .sdc-compare .sdc-partly { font-weight:700;}
.sdc-compare .sdc-yes { color:#15624a;}
.sdc-compare .sdc-no { color:var(--sdc-text-muted);}
.sdc-compare .sdc-partly { color:var(--sdc-accent-700); font-weight:600; font-size:.84rem;}
.sdc-compare .sdc-cell-note { display:block; font-weight:400; font-size:.78rem;
  color:var(--sdc-text-secondary); margin-top:2px;}
.sdc-compare td.sdc-is-featured,
.sdc-compare thead th.sdc-is-featured,
.sdc-compare tbody tr:nth-child(even) td.sdc-is-featured { background:var(--sdc-accent-50);}
.sdc-compare thead th.sdc-is-featured { box-shadow:inset 0 -3px 0 var(--sdc-accent-500);}
.sdc-compare tfoot th, .sdc-compare tfoot td {
  background:var(--sdc-bg-subtle); border-top:2px solid var(--sdc-border);
  padding:var(--sdc-space-4); font-weight:700;}
.sdc-compare tfoot td b { display:block; font-family:var(--sdc-font-display);
  font-size:1.3rem; color:var(--sdc-accent-700); letter-spacing:var(--sdc-tracking-tighter);}
.sdc-compare tfoot td span { display:block; font-weight:500; font-size:.78rem;
  color:var(--sdc-text-secondary); margin-top:2px;}
.sdc-jumpgrid { display:grid; gap:var(--sdc-space-3); margin-top:var(--sdc-space-8);
            grid-template-columns:repeat(auto-fit, minmax(230px, 1fr));}
.sdc-jumpgrid a {
  display:flex; align-items:center; justify-content:space-between; gap:var(--sdc-space-3);
  background:#fff; border:1px solid var(--sdc-border);
  border-radius:var(--sdc-radius-lg); padding:var(--sdc-space-3) var(--sdc-space-4);
  text-decoration:none; color:var(--sdc-text); font-size:.92rem; font-weight:600;
  transition:border-color .15s ease;}
.sdc-jumpgrid a:hover, .sdc-jumpgrid a:focus-visible { border-color:var(--sdc-accent-500);}
.sdc-jumpgrid i {
  font-style:normal; font-size:.78rem; font-weight:800; color:var(--sdc-accent-700);
  background:var(--sdc-accent-50); border-radius:var(--sdc-radius-full); padding:2px 9px;}
.sdc-apps { display:flex; flex-wrap:wrap; gap:var(--sdc-space-3); margin-top:var(--sdc-space-8);
        justify-content:center;}
.sdc-app {
  background:#fff; border:1px solid var(--sdc-border);
  border-radius:var(--sdc-radius-full); padding:8px 16px;
  font-weight:600; font-size:.95rem; color:var(--sdc-headline-ink);}
.sdc-app::before { content:'✓'; color:var(--sdc-green-600); font-weight:800; margin-right:7px;}
.sdc-feature-group-blurb { margin:var(--sdc-space-4) 0 0; color:var(--sdc-text-secondary);
                  max-width:78ch; line-height:1.65; font-size:.95rem;}
.sdc-feature .mod-tech { margin:0 0 var(--sdc-space-3); font-family:var(--sdc-font-mono);
                 font-size:.74rem; color:var(--sdc-text-muted); overflow-wrap:anywhere;}
.sdc-feature .sdc-feature-covers { margin:var(--sdc-space-4) 0 0; padding-top:var(--sdc-space-3);
                   border-top:1px solid var(--sdc-border);
                   display:flex; flex-wrap:wrap; gap:5px;}
.sdc-feature .sdc-feature-covers b { font-weight:600; font-size:.74rem; padding:2px 8px;
                     border-radius:var(--sdc-radius-full);
                     background:var(--sdc-bg-subtle); color:var(--sdc-text-secondary);}

/* ==== END generated page components ==== */