.elementor-95018 .elementor-element.elementor-element-1f886c4{--display:flex;--min-height:670px;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--justify-content:flex-end;--border-radius:0px 0px 40px 40px;--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:0px;--padding-bottom:45px;--padding-left:0px;--padding-right:0px;}.elementor-95018 .elementor-element.elementor-element-1f886c4:not(.elementor-motion-effects-element-type-background), .elementor-95018 .elementor-element.elementor-element-1f886c4 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-position:center center;background-repeat:no-repeat;background-size:cover;}.elementor-95018 .elementor-element.elementor-element-d96cd75{--display:flex;--flex-direction:row;--container-widget-width:initial;--container-widget-height:100%;--container-widget-flex-grow:1;--container-widget-align-self:stretch;--flex-wrap-mobile:wrap;--gap:13px 20px;--row-gap:13px;--column-gap:20px;--flex-wrap:wrap;}.elementor-widget-heading .elementor-heading-title{font-family:var( --e-global-typography-primary-font-family ), Sans-serif;font-size:var( --e-global-typography-primary-font-size );font-weight:var( --e-global-typography-primary-font-weight );line-height:var( --e-global-typography-primary-line-height );color:var( --e-global-color-primary );}.elementor-95018 .elementor-element.elementor-element-e1bbc83{margin:0% 0% calc(var(--kit-widget-spacing, 0px) + 0%) 0%;padding:0px 0px 0px 0px;}.elementor-95018 .elementor-element.elementor-element-e1bbc83.elementor-element{--flex-grow:0;--flex-shrink:0;}.elementor-95018 .elementor-element.elementor-element-e1bbc83 .elementor-heading-title{font-size:60px;font-weight:700;text-transform:uppercase;line-height:60px;letter-spacing:0px;text-shadow:0px 0px 20px rgba(0, 0, 0, 0.98);color:#FFFFFF;}.elementor-95018 .elementor-element.elementor-element-9bb2285{width:100%;max-width:100%;margin:0% 0% calc(var(--kit-widget-spacing, 0px) + 0%) 0%;padding:0px 0px 0px 0px;}.elementor-95018 .elementor-element.elementor-element-9bb2285.elementor-element{--flex-grow:0;--flex-shrink:0;}.elementor-95018 .elementor-element.elementor-element-9bb2285 .elementor-heading-title{font-size:24px;font-weight:400;line-height:24px;letter-spacing:0px;text-shadow:0px 0px 20px rgba(0, 0, 0, 0.98);color:#FFFFFF;}.elementor-95018 .elementor-element.elementor-element-73b7a47{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--gap:20px 0px;--row-gap:20px;--column-gap:0px;--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-widget-breadcrumbs{font-family:var( --e-global-typography-secondary-font-family ), Sans-serif;font-size:var( --e-global-typography-secondary-font-size );font-weight:var( --e-global-typography-secondary-font-weight );line-height:var( --e-global-typography-secondary-line-height );}.elementor-95018 .elementor-element.elementor-element-2236d66{margin:20px 0px calc(var(--kit-widget-spacing, 0px) + 53px) 0px;font-family:"Rubik", Sans-serif;font-size:18px;font-weight:400;text-decoration:none;line-height:28px;color:var( --e-global-color-primary );}.elementor-95018 .elementor-element.elementor-element-2236d66 a{color:var( --e-global-color-primary );}.elementor-95018 .elementor-element.elementor-element-58ca58a{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;}.elementor-95018 .elementor-element.elementor-element-8d7ccd2{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;}.elementor-95018 .elementor-element.elementor-element-7e69807{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--margin-top:0px;--margin-bottom:200px;--margin-left:0px;--margin-right:0px;}.elementor-widget-text-editor{font-family:var( --e-global-typography-text-font-family ), Sans-serif;font-size:var( --e-global-typography-text-font-size );font-weight:var( --e-global-typography-text-font-weight );line-height:var( --e-global-typography-text-line-height );color:var( --e-global-color-text );}.elementor-widget-text-editor.elementor-drop-cap-view-stacked .elementor-drop-cap{background-color:var( --e-global-color-primary );}.elementor-widget-text-editor.elementor-drop-cap-view-framed .elementor-drop-cap, .elementor-widget-text-editor.elementor-drop-cap-view-default .elementor-drop-cap{color:var( --e-global-color-primary );border-color:var( --e-global-color-primary );}.elementor-95018 .elementor-element.elementor-element-ed07769{color:var( --e-global-color-primary );}body.elementor-page-95018:not(.elementor-motion-effects-element-type-background), body.elementor-page-95018 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:var( --e-global-color-accent );}@media(max-width:1024px){.elementor-95018 .elementor-element.elementor-element-1f886c4{--min-height:620px;--border-radius:0px 0px 30px 30px;--margin-top:0px;--margin-bottom:20px;--margin-left:0px;--margin-right:0px;--padding-top:0px;--padding-bottom:45px;--padding-left:10px;--padding-right:0px;}.elementor-95018 .elementor-element.elementor-element-d96cd75{--gap:13px 10px;--row-gap:13px;--column-gap:10px;}.elementor-widget-heading .elementor-heading-title{font-size:var( --e-global-typography-primary-font-size );line-height:var( --e-global-typography-primary-line-height );}.elementor-95018 .elementor-element.elementor-element-e1bbc83{width:var( --container-widget-width, 90% );max-width:90%;--container-widget-width:90%;--container-widget-flex-grow:0;}.elementor-95018 .elementor-element.elementor-element-e1bbc83 .elementor-heading-title{font-size:36px;line-height:36px;}.elementor-95018 .elementor-element.elementor-element-9bb2285{width:var( --container-widget-width, 70% );max-width:70%;--container-widget-width:70%;--container-widget-flex-grow:0;}.elementor-95018 .elementor-element.elementor-element-9bb2285 .elementor-heading-title{font-size:18px;line-height:18px;}.elementor-95018 .elementor-element.elementor-element-73b7a47{--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--gap:10px 0px;--row-gap:10px;--column-gap:0px;--margin-top:0px;--margin-bottom:20px;--margin-left:0px;--margin-right:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-widget-breadcrumbs{font-size:var( --e-global-typography-secondary-font-size );line-height:var( --e-global-typography-secondary-line-height );}.elementor-95018 .elementor-element.elementor-element-2236d66{margin:10px 0px calc(var(--kit-widget-spacing, 0px) + 30px) 0px;font-size:16px;line-height:24px;}.elementor-95018 .elementor-element.elementor-element-7e69807{--margin-top:0px;--margin-bottom:100px;--margin-left:0px;--margin-right:0px;}.elementor-widget-text-editor{font-size:var( --e-global-typography-text-font-size );line-height:var( --e-global-typography-text-line-height );}}@media(min-width:768px){.elementor-95018 .elementor-element.elementor-element-1f886c4{--width:100%;}.elementor-95018 .elementor-element.elementor-element-d96cd75{--content-width:1125px;}.elementor-95018 .elementor-element.elementor-element-73b7a47{--content-width:1125px;}.elementor-95018 .elementor-element.elementor-element-58ca58a{--content-width:1125px;}.elementor-95018 .elementor-element.elementor-element-8d7ccd2{--content-width:1125px;}.elementor-95018 .elementor-element.elementor-element-7e69807{--content-width:1125px;}}@media(max-width:1024px) and (min-width:768px){.elementor-95018 .elementor-element.elementor-element-1f886c4{--width:100%;}.elementor-95018 .elementor-element.elementor-element-d96cd75{--content-width:100%;}.elementor-95018 .elementor-element.elementor-element-73b7a47{--content-width:95%;}}@media(max-width:767px){.elementor-95018 .elementor-element.elementor-element-1f886c4{--width:100%;--min-height:490px;--margin-top:0px;--margin-bottom:20px;--margin-left:0px;--margin-right:0px;--padding-top:0px;--padding-bottom:50px;--padding-left:0px;--padding-right:0px;}.elementor-95018 .elementor-element.elementor-element-d96cd75{--content-width:95%;--gap:10px 0px;--row-gap:10px;--column-gap:0px;}.elementor-widget-heading .elementor-heading-title{font-size:var( --e-global-typography-primary-font-size );line-height:var( --e-global-typography-primary-line-height );}.elementor-95018 .elementor-element.elementor-element-e1bbc83{--container-widget-width:100%;--container-widget-flex-grow:0;width:var( --container-widget-width, 100% );max-width:100%;}.elementor-95018 .elementor-element.elementor-element-e1bbc83 .elementor-heading-title{font-size:36px;}.elementor-95018 .elementor-element.elementor-element-9bb2285{--container-widget-width:100%;--container-widget-flex-grow:0;width:var( --container-widget-width, 100% );max-width:100%;}.elementor-95018 .elementor-element.elementor-element-9bb2285 .elementor-heading-title{font-size:18px;}.elementor-95018 .elementor-element.elementor-element-73b7a47{--content-width:90%;--gap:10px 0px;--row-gap:10px;--column-gap:0px;--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-widget-breadcrumbs{font-size:var( --e-global-typography-secondary-font-size );line-height:var( --e-global-typography-secondary-line-height );}.elementor-95018 .elementor-element.elementor-element-2236d66{margin:0px 0px calc(var(--kit-widget-spacing, 0px) + 30px) 0px;font-size:16px;}.elementor-widget-text-editor{font-size:var( --e-global-typography-text-font-size );line-height:var( --e-global-typography-text-line-height );}}/* Start custom CSS for html, class: .elementor-element-8b0d014 */<style>
/*
 * SephardicU Tehillim — Builder + Reader styles.
 *
 * Design tokens below are SephardicU's OWN confirmed values (screenshot +
 * direct confirmation), not invented for this feature. Everything is
 * still exposed as an overridable CSS custom property
 * (--su-tehillim-accent etc.) so the site owner can adjust from a theme
 * stylesheet without editing this file, but the DEFAULTS now match the
 * live site rather than a generic placeholder palette:
 *   bg #FECD8B, text #001317, Rubik, 20px radius, all-caps headings,
 *   pill buttons, Times New Roman Hebrew (min 20px).
 *
 * Scoped entirely under .su-tehillim-* classes so nothing here leaks
 * into the rest of SephardicU.com.
 */

.su-tehillim-builder,
.su-tehillim-chapter,
.su-tehillim-index,
.su-tehillim-browse,
.su-tehillim-finder {
	--su-gold: var(--su-tehillim-accent, #fecd8b);
	/* Darker/richer gold specifically for option/selection controls (Fix 2).
	   Derived from the site's pale #FECD8B, darkened enough that white text
	   on it clears WCAG AA contrast (~6.2:1) at any button text size --
	   the pale #FECD8B itself does not have enough contrast with white to
	   use safely for text-bearing buttons. */
	--su-tehillim-button-gold: var(--su-tehillim-button-gold-override, #7a5c12);
	--su-dark: var(--su-tehillim-dark, #001317);
	--su-text: var(--su-tehillim-text, #001317);
	--su-text-on-dark: var(--su-tehillim-text-on-dark, #fff6e6);
	--su-surface: var(--su-tehillim-surface, #ffffff);
	--su-border: var(--su-tehillim-border, rgba(0, 19, 23, 0.15));
	--su-radius: var(--su-tehillim-border-radius, 20px);
	--su-radius-pill: 999px;
	--su-font: var(--su-tehillim-font, "Rubik", -apple-system, BlinkMacSystemFont, sans-serif);
	--su-hebrew-font: var(--su-tehillim-hebrew-font, "Times New Roman", Times, serif);
	--su-hebrew-min-size: 20px;
	/* Fix 1: SephardicU's own confirmed container system -- one value,
	   used consistently, not a Tehillim-specific width. */
	--su-container-max: 1125px;
	--su-container-width: 95%;
	/* Fix 3: ~80px fixed header + breathing room. Applied ONCE at each
	   outer container below, never compounded on nested children. */
	--su-header-clearance: 100px;

	/* Derived tonal tints of the SAME brand gold (#FECD8B) -- NOT a new
	   palette. Computed as a linear blend toward white (white*(1-t) +
	   gold*t), used the way a fuller color scale gives a design more
	   depth on a white background: subtle card backgrounds, badge
	   fills, hover states. No new brand color is introduced anywhere
	   in this file -- every one of these is a lighter version of the
	   one gold already in use.
	     --su-gold-wash  : t=0.10 -- barely-there card background
	     --su-gold-tint  : t=0.22 -- badge/footer fills, subtle borders */
	--su-gold-wash: var(--su-tehillim-gold-wash, #fffaf3);
	--su-gold-tint: var(--su-tehillim-gold-tint, #fdecd3);
	/* Warm off-white/ivory for the Builder's own app-envelope background
	   (Section 4) -- distinct from --su-surface (pure white, used for
	   cards/panels sitting ON this ivory) and from the page's own pale
	   gold background. A restrained neutral, not another named color. */
	--su-ivory: var(--su-tehillim-ivory, #fbf8f3);

	font-family: var(--su-font);
	color: var(--su-text);
}

.su-tehillim-builder h1,
.su-tehillim-builder h2,
.su-tehillim-builder h3,
.su-tehillim-chapter h1,
.su-tehillim-chapter h2,
.su-tehillim-chapter h3,
.su-tehillim-index h1,
.su-tehillim-index h2,
.su-tehillim-browse h1,
.su-tehillim-browse h2,
.su-tehillim-browse h3 {
	font-family: var(--su-font);
	text-transform: uppercase;
	letter-spacing: 0.02em;
	font-weight: 700;
}

/* Shared pill-button look for primary ACTIONS (Generate, Share, alternate
   readings, Copy/Print/font-size) -- these already had explicit,
   sufficient-contrast colors (dark text on pale gold) and are unaffected
   by Fix 2, which targets SELECTION controls specifically (see below). */
.su-tehillim-btn,
.su-tehillim-builder__generate,
.su-tehillim-alternate-btn,
.su-tehillim-name-suggestion button,
.su-tehillim-share,
.su-tehillim-chapter__controls button:not([data-show]) {
	font-family: var(--su-font);
	text-transform: uppercase;
	letter-spacing: 0.02em;
	font-weight: 700;
	font-size: 0.85rem;
	color: var(--su-dark);
	background: var(--su-gold);
	border: none;
	border-radius: var(--su-radius-pill);
	padding: 0.65rem 1.4rem;
	cursor: pointer;
	transition: transform 120ms ease, box-shadow 120ms ease;
}

.su-tehillim-btn:hover,
.su-tehillim-builder__generate:hover:not(:disabled),
.su-tehillim-alternate-btn:hover,
.su-tehillim-share:hover,
.su-tehillim-chapter__controls button:not([data-show]):hover {
	box-shadow: 0 3px 10px rgba(0, 19, 23, 0.18);
}

.su-tehillim-btn:focus-visible,
.su-tehillim-builder__generate:focus-visible,
.su-tehillim-alternate-btn:focus-visible,
.su-tehillim-share:focus-visible,
.su-tehillim-chapter__controls button:not([data-show]):focus-visible {
	outline: 3px solid #000;
	outline-offset: 2px;
}

.su-tehillim-btn--secondary {
	background: transparent;
	color: var(--su-dark);
	border: 2px solid var(--su-dark);
}

/* -------------------------------------------------------------------
   Fix 2: option/selection controls (purpose cards, variant cards, the
   Hebrew/English/Both reading-mode toggle). These are the elements that
   had the white-background/white-text bug -- their background was set
   explicitly but their TEXT color was only ever inherited, so any
   higher-priority same-element rule elsewhere on the site (a common
   theme/page-builder pattern like `button { color: #fff; }`) could -- and
   apparently did -- override the inherited dark text while leaving the
   pale background in place. Every rule below now sets color explicitly,
   which is both the fix or the bug's cause and the correct approach on
   its own merits.
   ------------------------------------------------------------------- */

.su-tehillim-variant-card,
.su-tehillim-chapter__controls button[data-show] {
	color: #ffffff;
	background: var(--su-tehillim-button-gold);
	border: 2px solid transparent;
	font-family: var(--su-font);
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.02em;
	cursor: pointer;
	transition: background 120ms ease, color 120ms ease;
}

/* Shape is unchanged from before this fix -- Fix 2 is colors only. */
.su-tehillim-variant-card {
	border-radius: var(--su-radius);
}

.su-tehillim-chapter__controls button[data-show] {
	border-radius: var(--su-radius-pill);
}

.su-tehillim-variant-card:hover,
.su-tehillim-chapter__controls button[data-show]:hover {
	background: var(--su-dark);
	color: var(--su-gold);
}

.su-tehillim-variant-card[aria-checked="true"],
.su-tehillim-chapter__controls button[data-show][aria-pressed="true"] {
	background: var(--su-dark);
	color: var(--su-gold);
}

.su-tehillim-variant-card:focus-visible,
.su-tehillim-chapter__controls button[data-show]:focus-visible {
	outline: 3px solid #000;
	outline-offset: 2px;
	box-shadow: 0 0 0 5px #fff;
}

/* Purpose cards (spec Sections 8-11): white/very-slightly-warm surface,
   thin warm-neutral border, restrained radius, EXPLICITLY SET dark text
   (not inherited -- this is what actually fixed the original white-on-
   white bug; the fix survives regardless of which visual treatment sits
   on top of it). Selected state uses a gold border + gold-tinted wash,
   NOT a solid dark or gold fill -- per explicit instruction that the
   selected state should read as "a refined editorial selection," not
   an activated button. */
.su-tehillim-purpose-card {
	position: relative;
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 0.75rem;
	color: var(--su-text) !important;
	background: var(--su-surface) !important;
	border: 1.5px solid var(--su-border) !important;
	border-radius: 16px;
	padding: 1.5rem;
	font-family: var(--su-font);
	text-align: start;
	cursor: pointer;
	transition: border-color 220ms ease, background 220ms ease, transform 220ms ease, box-shadow 220ms ease, opacity 220ms ease;
}

.su-tehillim-purpose-card:hover {
	border-color: var(--su-tehillim-button-gold) !important;
	transform: translateY(-2px);
	box-shadow: 0 8px 20px rgba(0, 19, 23, 0.07);
}

.su-tehillim-purpose-card:hover .su-tehillim-purpose-card__icon-wrap {
	background: var(--su-gold-tint);
}

.su-tehillim-purpose-card[aria-checked="true"] {
	border-color: var(--su-tehillim-button-gold) !important;
	border-width: 2px !important;
	background: var(--su-gold-wash) !important;
	box-shadow: 0 4px 14px rgba(0, 19, 23, 0.05);
}

.su-tehillim-purpose-card[aria-checked="true"] .su-tehillim-purpose-card__icon-wrap {
	background: var(--su-gold-tint);
}

.su-tehillim-purpose-card[aria-checked="true"] .su-tehillim-purpose-card__label {
	color: var(--su-tehillim-button-gold) !important;
}

/* When one card is selected, the rest recede slightly -- spec Section
   13.2. Progressive enhancement via :has(); browsers without support
   simply keep all cards at full opacity, which is still a fully usable
   (if marginally less refined) result. */
.su-tehillim-builder__purposes:has(.su-tehillim-purpose-card[aria-checked="true"]) .su-tehillim-purpose-card:not([aria-checked="true"]) {
	opacity: 0.6;
}

.su-tehillim-purpose-card:focus-visible {
	outline: 3px solid #000;
	outline-offset: 2px;
	opacity: 1;
}

/* Small gold checkmark, top-right corner, shown only once selected --
   an explicit "this is the path you chose" marker beyond color alone
   (accessibility Section 25: never rely on color alone for state). */
.su-tehillim-purpose-card__checkmark {
	position: absolute;
	top: 0.9rem;
	right: 0.9rem;
	width: 20px;
	height: 20px;
	border-radius: 50%;
	background: var(--su-tehillim-button-gold);
	color: #fff;
	display: flex;
	align-items: center;
	justify-content: center;
	opacity: 0;
	transform: scale(0.7);
	transition: opacity 200ms ease, transform 200ms ease;
}

.su-tehillim-purpose-card[aria-checked="true"] .su-tehillim-purpose-card__checkmark {
	opacity: 1;
	transform: scale(1);
}

/* Icon: small, understated, circular, gold-tinted container -- spec
   Section 8. Never a colorful category badge. */
.su-tehillim-purpose-card__icon-wrap {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 2.5rem;
	height: 2.5rem;
	border-radius: 50%;
	background: var(--su-gold-wash);
	margin-bottom: 0.85rem;
	transition: background 220ms ease;
}

.su-tehillim-purpose-card__icon {
	font-size: 1.15rem;
	line-height: 1;
}
/* -------------------------------------------------------------------
   Builder

   ARCHITECTURE NOTE: this redesign moves the Builder from a persistent
   side-by-side layout (narrow left controls column + sticky right
   result column) to a single-column, full-width vertical flow: purpose
   grid, then the two-panel personalization step, then the result --
   all stacked, all at full container width. Two things drove this:
   (1) a real 2-column purpose-card grid needs more width per card than
   a ~280-400px column allows, and (2) the spec explicitly asks for the
   reading to "appear naturally below the Builder controls" and "become
   the visual focal point," which a permanently-visible side panel
   works against. The DOM order (left content, then right/result) is
   UNCHANGED -- only the grid-column count changed, which is why this
   is a CSS-only change with no JS/PHP logic touched. The `position:
   sticky` behavior on the result panel is removed as a direct
   consequence: it only made sense when the result sat beside
   scrolling content, not below it.
   ------------------------------------------------------------------- */

.su-tehillim-builder {
	display: block;
	width: var(--su-container-width);
	max-width: var(--su-container-max);
	margin-left: auto;
	margin-right: auto;
	padding-top: var(--su-header-clearance);
}

.su-tehillim-builder__left {
	/* The warm ivory "app envelope" (spec Section 4): a background
	   distinct from both pure white (card/panel surfaces) and the
	   page's own pale gold, so the feature visually establishes
	   itself without becoming a heavy boxed "dashboard." */
	background: var(--su-ivory);
	border: 1px solid var(--su-border);
	border-radius: 22px;
	padding: clamp(1.75rem, 3vw, 3rem);
}

.su-tehillim-builder__right {
	margin-top: 2rem;
}

.su-tehillim-builder__app-header {
	margin-bottom: 1.25rem;
}

.su-tehillim-builder__app-title {
	font-family: var(--su-font);
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.03em;
	font-size: 0.85rem;
	color: var(--su-tehillim-button-gold);
	margin: 0 0 0.2rem;
}

.su-tehillim-builder__app-tagline {
	font-size: 0.95rem;
	opacity: 0.75;
	margin: 0;
}

.su-tehillim-builder__heading {
	font-size: 1.4rem;
	margin-bottom: 1.1rem;
}

/* Step-progress indicator: reflects real state (see builder.js
   setProgressStep()) -- never advances ahead of what's actually
   happened in the flow. */
.su-tehillim-builder__progress {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	padding-bottom: 0.85rem;
	margin-bottom: 1.1rem;
	border-bottom: 2px solid var(--su-border);
}

.su-tehillim-builder__progress-label {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	font-size: 0.8rem;
	font-weight: 600;
}

.su-tehillim-builder__progress-badge {
	flex-shrink: 0;
	width: 1.4rem;
	height: 1.4rem;
	border-radius: 50%;
	background: var(--su-dark);
	color: var(--su-gold);
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 0.72rem;
	font-weight: 700;
}

.su-tehillim-builder__progress-dots {
	display: flex;
	align-items: center;
	gap: 0.35rem;
}

.su-tehillim-builder__progress-dot {
	height: 0.4rem;
	width: 0.4rem;
	border-radius: 50%;
	background: var(--su-border);
	transition: width 200ms ease, background 200ms ease;
}

.su-tehillim-builder__progress-dot.is-active {
	width: 1.4rem;
	background: var(--su-dark);
}

.su-tehillim-builder__purposes {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 22px;
}

@media (max-width: 700px) {
	.su-tehillim-builder__purposes {
		grid-template-columns: 1fr;
	}
}

.su-tehillim-purpose-card__body {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 0.2rem;
	min-width: 0; /* allow the intro line to wrap/truncate instead of forcing card width */
}

.su-tehillim-purpose-card__label {
	font-size: 1.05rem;
	font-weight: 700;
	text-transform: none;
	letter-spacing: normal;
	transition: color 220ms ease;
}

.su-tehillim-purpose-card__intro {
	font-size: 0.85rem;
	font-weight: 400;
	text-transform: none;
	letter-spacing: normal;
	opacity: 0.72;
	line-height: 1.5;
}

.su-tehillim-purpose-card__arrow {
	flex-shrink: 0;
	opacity: 0;
	transform: translateX(-4px);
	transition: opacity 150ms ease, transform 150ms ease;
}

.su-tehillim-purpose-card:hover .su-tehillim-purpose-card__arrow,
.su-tehillim-purpose-card:focus-visible .su-tehillim-purpose-card__arrow,
.su-tehillim-purpose-card[aria-checked="true"] .su-tehillim-purpose-card__arrow {
	opacity: 1;
	transform: translateX(0);
}

.su-tehillim-builder__library-lead {
	margin-top: 1.5rem;
	font-size: 0.85rem;
	opacity: 0.7;
	text-align: center;
}

.su-tehillim-builder__library-link {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0.2rem;
	margin-top: 0.5rem;
	padding: 0.75rem;
	text-align: center;
	text-decoration: none;
	color: var(--su-text);
	border: 2px dashed var(--su-border);
	border-radius: var(--su-radius);
	font-family: var(--su-font);
	font-size: 0.9rem;
}

.su-tehillim-builder__library-link:hover {
	border-color: var(--su-dark);
	border-style: solid;
}

.su-tehillim-builder__library-link__label {
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.02em;
}

.su-tehillim-builder__library-link__intro {
	font-size: 0.8rem;
	opacity: 0.75;
	font-weight: 400;
	text-transform: none;
}

/* Two-panel personalization (Section 7 of the refinement spec): name/
   mother's name on the left, reading length on the right, side by side
   on desktop, stacking on mobile. Both children keep the exact same
   IDs/classes/hidden-attribute behavior as before -- only their shared
   wrapper and layout changed, so builder.js's existing .elementor-95018 .elementor-element.elementor-element-8b0d014s and
   the automatic-update flow are completely untouched. */
.su-tehillim-builder__step2 {
	margin-top: 2rem;
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 1.75rem;
}

@media (max-width: 860px) {
	.su-tehillim-builder__step2 {
		grid-template-columns: 1fr;
		gap: 1.5rem;
	}
}

/* Before a purpose is chosen, both panels are [hidden] and the wrapper
   would otherwise still show its own top border/padding as an empty
   gap. This collapses the wrapper entirely whenever it has no visible
   child. Progressive enhancement: browsers without :has() support (a
   small, shrinking minority) simply see the wrapper's border a little
   earlier than necessary -- a cosmetic difference only, the automatic-
   update functionality itself is unaffected either way. */
.su-tehillim-builder__step2:not(:has(> :not([hidden]))) {
	display: none;
}

/* When only one panel is actually visible (e.g. a purpose with a single
   published reading plan, so the length choice never appears), let
   that panel span the full width rather than sitting at half-width next
   to blank space. */
.su-tehillim-builder__step2:has(> .su-tehillim-builder__time-step[hidden]) .su-tehillim-builder__personalization:not([hidden]),
.su-tehillim-builder__step2:has(> .su-tehillim-builder__personalization[hidden]) .su-tehillim-builder__time-step:not([hidden]) {
	grid-column: 1 / -1;
}

.su-tehillim-builder__time-step,
.su-tehillim-builder__personalization {
	margin-top: 0;
	background: var(--su-surface);
	border: 1px solid var(--su-border);
	border-radius: 18px;
	padding: 1.5rem;
}

.su-tehillim-builder__who {
	font-size: 1rem;
	margin: 0 0 0.5rem;
}

.su-tehillim-builder__variants {
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
}

.su-tehillim-variant-card {
	display: block;
	width: 100%;
	padding: 0.75rem 1.1rem;
	text-align: start;
	font-family: var(--su-font);
}

.su-tehillim-builder__optional-note {
	font-size: 0.85rem;
	opacity: 0.75;
	margin-bottom: 0.85rem;
}

.su-tehillim-builder label {
	display: block;
	font-family: var(--su-font);
	font-weight: 600;
	font-size: 0.85rem;
	text-transform: uppercase;
	letter-spacing: 0.01em;
	margin-bottom: 0.3rem;
}

.su-tehillim-builder input[type="text"] {
	width: 100%;
	padding: 0.7rem 0.9rem;
	border: 2px solid var(--su-border);
	border-radius: var(--su-radius);
	margin-bottom: 0.85rem;
	font-family: var(--su-font);
	font-size: 1rem;
	background: var(--su-surface);
	color: var(--su-text);
}

.su-tehillim-builder input[type="text"]:focus-visible {
	outline: 2px solid var(--su-dark);
	outline-offset: 1px;
	border-color: var(--su-dark);
}

.su-tehillim-name-suggestion {
	display: flex;
	align-items: center;
	gap: 0.6rem;
	font-size: 1.15rem;
	margin: -0.5rem 0 0.85rem;
}

.su-tehillim-name-suggestion__text {
	font-family: var(--su-hebrew-font);
	font-size: max(1.15rem, var(--su-hebrew-min-size));
	direction: rtl;
}

.su-tehillim-name-suggestion button {
	padding: 0.3rem 0.85rem;
	font-size: 0.7rem;
}

.su-tehillim-gender-field {
	display: flex;
	align-items: center;
	gap: 0.85rem;
	margin-bottom: 0.85rem;
	font-size: 0.9rem;
	text-transform: none;
}

.su-tehillim-gender-field label {
	display: inline-flex;
	align-items: center;
	gap: 0.3rem;
	text-transform: none;
	font-weight: 400;
}

.su-tehillim-builder__generate {
	/* The automatic-update flow (purpose/variant click, debounced name
	   entry) replaced this button's role entirely -- hidden here rather
	   than removed from the markup, since this pass is scoped to
	   builder.js/builder.css only, no PHP changes. */
	display: none !important;
}

.su-tehillim-builder__right {
	background: var(--su-surface);
	border-radius: var(--su-radius);
	padding: 2rem;
}

/* NOTE: this panel previously used `position: sticky` to stay visible
   alongside the controls in a side-by-side layout. That layout no
   longer exists (see the architecture note on .su-tehillim-builder
   above) -- the result now sits full-width BELOW the controls, so
   sticking it made no sense and has been removed. */

.su-tehillim-builder__placeholder {
	opacity: 0.6;
}

.su-tehillim-seder-list {
	list-style: none;
	margin: 1.1rem 0;
	padding: 0;
	counter-reset: su-seder;
}

.su-tehillim-seder-list li {
	position: relative;
	padding: 0.8rem 0 0.8rem 2.4rem;
	border-bottom: 1px solid var(--su-border);
	counter-increment: su-seder;
}

.su-tehillim-seder-list li::before {
	content: counter(su-seder);
	position: absolute;
	left: 0;
	top: 0.7rem;
	width: 1.6rem;
	height: 1.6rem;
	display: flex;
	align-items: center;
	justify-content: center;
	background: var(--su-gold);
	color: var(--su-dark);
	font-weight: 700;
	font-size: 0.8rem;
	border-radius: 50%;
}

.su-tehillim-seder-list a {
	color: var(--su-text);
	text-decoration: none;
	font-weight: 600;
}

.su-tehillim-seder-list a:hover {
	text-decoration: underline;
}

.su-tehillim-tradition-note {
	margin-top: 1.75rem;
	padding: 1.25rem 1.5rem;
	background: var(--su-dark);
	color: var(--su-text-on-dark);
	border-radius: var(--su-radius);
	font-size: 0.88rem;
}

.su-tehillim-tradition-note p {
	opacity: 0.9;
}

.su-tehillim-tradition-note summary {
	cursor: pointer;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.02em;
	color: var(--su-gold);
}

.su-tehillim-alternates {
	margin-top: 1.75rem;
	padding-top: 1.25rem;
	border-top: 2px solid var(--su-border);
}

.su-tehillim-alternates__label {
	font-size: 0.85rem;
	opacity: 0.75;
	margin-bottom: 0.6rem;
}

.su-tehillim-alternate-btn {
	margin-inline-end: 0.5rem;
	margin-bottom: 0.5rem;
	padding: 0.5rem 1rem;
	font-size: 0.75rem;
	background: transparent;
	border: 2px solid var(--su-dark);
	color: var(--su-dark);
}

.su-tehillim-alternate-btn:hover {
	background: var(--su-gold);
}

/* -------------------------------------------------------------------
   Chapter reader
   ------------------------------------------------------------------- */

.su-tehillim-chapter {
	width: var(--su-container-width);
	max-width: var(--su-container-max);
	margin-left: auto;
	margin-right: auto;
	padding-top: var(--su-header-clearance);
	scroll-margin-top: var(--su-header-clearance);
}

.su-tehillim-breadcrumb {
	font-family: var(--su-font);
	font-size: 0.8rem;
	text-transform: uppercase;
	letter-spacing: 0.03em;
	opacity: 0.7;
	margin-bottom: 1rem;
}

.su-tehillim-breadcrumb a {
	color: var(--su-text);
	text-decoration: none;
}

.su-tehillim-breadcrumb a:hover {
	text-decoration: underline;
}

.su-tehillim-breadcrumb .su-tehillim-breadcrumb__sep {
	margin: 0 0.4rem;
	opacity: 0.5;
}

.su-tehillim-chapter__title-block {
	margin-bottom: 1.5rem;
}

.su-tehillim-chapter__title-block h1 {
	font-size: 2rem;
	margin: 0 0 0.25rem;
}

.su-tehillim-chapter__hebrew-title {
	font-family: var(--su-hebrew-font);
	font-size: max(1.4rem, var(--su-hebrew-min-size));
	direction: rtl;
	opacity: 0.85;
}

.su-tehillim-chapter__nav {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 0.85rem;
	margin-bottom: 1.5rem;
	padding-bottom: 1.25rem;
	border-bottom: 2px solid var(--su-border);
}

.su-tehillim-chapter__controls {
	display: flex;
	flex-wrap: wrap;
	gap: 0.4rem;
}

.su-tehillim-chapter__controls button {
	padding: 0.5rem 0.9rem;
	font-size: 0.72rem;
}

.su-tehillim-chapter__text {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 2.5rem;
}

.su-tehillim-chapter[data-show="hebrew"] .su-tehillim-chapter__english,
.su-tehillim-chapter[data-show="english"] .su-tehillim-chapter__hebrew {
	display: none;
}

.su-tehillim-chapter[data-show="hebrew"] .su-tehillim-chapter__text,
.su-tehillim-chapter[data-show="english"] .su-tehillim-chapter__text {
	grid-template-columns: 1fr;
}

@media (max-width: 760px) {
	.su-tehillim-chapter__text {
		grid-template-columns: 1fr;
		gap: 2rem;
	}
}

.su-tehillim-chapter__hebrew {
	font-family: var(--su-hebrew-font);
	font-size: max(1.4rem, var(--su-hebrew-min-size));
	line-height: 2.1;
}

.su-tehillim-chapter__english {
	font-family: var(--su-font);
	font-size: 1.05rem;
	line-height: 1.85;
}

.su-tehillim-chapter__title {
	font-weight: 700;
	text-transform: uppercase;
	margin-bottom: 0.5rem;
	opacity: 0.8;
}

.su-tehillim-verse {
	margin: 0 0 0.6rem;
}

.su-tehillim-verse__num {
	opacity: 0.5;
	font-size: 0.75em;
	font-family: var(--su-font);
	margin-inline-end: 0.4em;
	vertical-align: super;
}

.su-tehillim-chapter__intro {
	background: var(--su-surface);
	border-radius: var(--su-radius);
	padding: 1.25rem 1.5rem;
	margin-bottom: 1.5rem;
	font-size: 0.95rem;
}

.su-tehillim-chapter__source {
	margin-top: 2rem;
	font-size: 0.78rem;
	opacity: 0.6;
}

.su-tehillim-related-purposes {
	margin-top: 2rem;
	padding-top: 1.5rem;
	border-top: 2px solid var(--su-border);
}

.su-tehillim-related-purposes h2 {
	font-size: 1rem;
	margin-bottom: 0.6rem;
}

.su-tehillim-related-purposes ul {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
}

.su-tehillim-related-purposes a {
	display: inline-block;
	padding: 0.4rem 0.9rem;
	background: var(--su-gold);
	color: var(--su-dark);
	text-decoration: none;
	border-radius: var(--su-radius-pill);
	font-size: 0.78rem;
	font-weight: 700;
	text-transform: uppercase;
}

.su-tehillim-chapter__footer-nav {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 1.75rem;
	margin-top: 2rem;
	padding-top: 1.5rem;
	border-top: 2px solid var(--su-border);
	text-align: center;
}

.su-tehillim-chapter__footer-nav a {
	text-decoration: none;
	color: var(--su-text);
	font-weight: 600;
	font-size: 0.9rem;
}

.su-tehillim-chapter__footer-nav a:hover {
	text-decoration: underline;
}

.su-tehillim-chapter__footer-nav .su-tehillim-chapter__footer-center {
	display: flex;
	gap: 1.75rem;
	flex-wrap: wrap;
	justify-content: center;
}

@media (max-width: 600px) {
	.su-tehillim-chapter__footer-nav,
	.su-tehillim-chapter__footer-nav .su-tehillim-chapter__footer-center {
		gap: 1.1rem;
	}
}

.su-tehillim-error {
	background: var(--su-surface);
	border-radius: var(--su-radius);
	padding: 1.25rem 1.5rem;
}

/* -------------------------------------------------------------------
   Browse All 150 (range-grouped index)
   ------------------------------------------------------------------- */

.su-tehillim-browse {
	width: var(--su-container-width);
	max-width: var(--su-container-max);
	margin-left: auto;
	margin-right: auto;
	padding-top: var(--su-header-clearance);
	scroll-margin-top: var(--su-header-clearance);
}

.su-tehillim-browse__ranges {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	margin-bottom: 1.75rem;
}

.su-tehillim-browse__range-tab {
	padding: 0.55rem 1.1rem;
	font-family: var(--su-font);
	font-weight: 700;
	font-size: 0.8rem;
	text-transform: uppercase;
	letter-spacing: 0.02em;
	background: var(--su-surface);
	border: 2px solid transparent;
	border-radius: var(--su-radius-pill);
	cursor: pointer;
}

.su-tehillim-browse__range-tab[aria-selected="true"] {
	background: var(--su-gold);
	border-color: var(--su-dark);
}

.su-tehillim-browse__group {
	display: none;
}

.su-tehillim-browse__group.is-active {
	display: block;
}

.su-tehillim-index {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
	gap: 0.75rem;
}

.su-tehillim-index__item {
	display: flex;
	flex-direction: column;
	gap: 0.15rem;
	padding: 0.85rem 0.9rem;
	background: var(--su-surface);
	border: 2px solid transparent;
	border-radius: var(--su-radius);
	text-decoration: none;
	color: var(--su-text);
	font-weight: 700;
}

.su-tehillim-index__item:hover,
.su-tehillim-index__item:focus-visible {
	border-color: var(--su-gold);
	outline: none;
}

.su-tehillim-index__number {
	font-size: 0.95rem;
}

.su-tehillim-index__title {
	font-size: 0.72rem;
	font-weight: 400;
	opacity: 0.65;
	text-transform: none;
}

@media (max-width: 480px) {
	.su-tehillim-index {
		grid-template-columns: repeat(auto-fill, minmax(105px, 1fr));
	}
}

/* -------------------------------------------------------------------
   Purpose menu (landing-page preview grid, separate from the Builder's
   own internal purpose cards -- see [sephardicu_tehillim_purpose_menu])
   ------------------------------------------------------------------- */

.su-tehillim-purpose-menu {
	--su-gold: var(--su-tehillim-accent, #fecd8b);
	--su-dark: var(--su-tehillim-dark, #001317);
	--su-tehillim-button-gold: var(--su-tehillim-button-gold-override, #7a5c12);
	--su-border: var(--su-tehillim-border, rgba(0, 19, 23, 0.15));
	--su-radius: var(--su-tehillim-border-radius, 20px);
	--su-font: var(--su-tehillim-font, "Rubik", -apple-system, BlinkMacSystemFont, sans-serif);
	--su-container-max: 1125px;
	--su-container-width: 95%;

	width: var(--su-container-width);
	max-width: var(--su-container-max);
	margin-left: auto;
	margin-right: auto;
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
	gap: 1.25rem;
}

@media (max-width: 700px) {
	.su-tehillim-purpose-menu {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (max-width: 460px) {
	.su-tehillim-purpose-menu {
		grid-template-columns: 1fr;
	}
}

.su-tehillim-purpose-menu__card {
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
	padding: 1.5rem;
	border-radius: var(--su-radius);
	font-family: var(--su-font);
	text-decoration: none;
	background: var(--su-tehillim-button-gold);
	color: #ffffff;
	transition: background 120ms ease, color 120ms ease;
}

.su-tehillim-purpose-menu__card:hover,
.su-tehillim-purpose-menu__card:focus-visible {
	background: var(--su-dark);
	color: var(--su-gold);
	outline: none;
}

.su-tehillim-purpose-menu__card:focus-visible {
	outline: 3px solid #000;
	outline-offset: 2px;
}

.su-tehillim-purpose-menu__title {
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.02em;
	font-size: 1.05rem;
}

.su-tehillim-purpose-menu__copy {
	font-size: 0.85rem;
	opacity: 0.9;
	font-weight: 400;
	text-transform: none;
	letter-spacing: normal;
}

.su-tehillim-purpose-menu__card--pending {
	background: transparent;
	border: 2px dashed var(--su-border);
	color: var(--su-dark);
	cursor: default;
}

.su-tehillim-purpose-menu__card--pending .su-tehillim-purpose-menu__copy {
	opacity: 0.7;
}

.su-tehillim-purpose-menu__badge {
	align-self: flex-start;
	font-size: 0.68rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.03em;
	padding: 0.2rem 0.6rem;
	border-radius: 999px;
	background: var(--su-border);
	color: var(--su-dark);
}

/* -------------------------------------------------------------------
   Finder module ([sephardicu_tehillim_finder]) -- the compact, tabbed
   "Find a Reading / Browse All 150" module. One shortcode, one
   stylesheet (this one), one script (finder.js) -- see the shortcode's
   own docblock in class-su-shortcodes.php for why this replaced an
   Elementor-assembled version of the same idea.
   ------------------------------------------------------------------- */

.su-tehillim-finder {
	width: var(--su-container-width);
	max-width: var(--su-container-max);
	margin-left: auto;
	margin-right: auto;
	padding-top: 1.5rem;
	padding-bottom: 1.5rem;
}

.su-tehillim-finder__tabs {
	background: var(--su-surface);
	border-radius: var(--su-radius);
	padding: 0.5rem;
}

.su-tehillim-finder__nav {
	display: flex;
	flex-wrap: wrap;
}

.su-tehillim-finder__tab {
	flex: 1 1 220px;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0.15rem;
	padding: 0.9rem 1rem;
	border-radius: calc(var(--su-radius) - 6px);
	cursor: pointer;
	color: var(--su-text);
	background: transparent;
	border: none;
	font-family: var(--su-font);
	transition: background 120ms ease, color 120ms ease;
}

.su-tehillim-finder__tab-title {
	font-weight: 700;
	font-size: 0.95rem;
	text-transform: uppercase;
	letter-spacing: 0.02em;
}

.su-tehillim-finder__tab-sub {
	font-size: 0.78rem;
	opacity: 0.65;
}

.su-tehillim-finder__tab.is-active {
	background: var(--su-dark);
	color: var(--su-gold);
}

.su-tehillim-finder__tab.is-active .su-tehillim-finder__tab-sub {
	opacity: 0.85;
}

.su-tehillim-finder__tab:hover:not(.is-active) {
	background: rgba(0, 19, 23, 0.06);
}

.su-tehillim-finder__tab:focus-visible {
	outline: 3px solid #000;
	outline-offset: 2px;
}

.su-tehillim-finder__panel {
	flex-basis: 100%;
	display: none;
	padding: 1.75rem 1rem 0.5rem;
}

.su-tehillim-finder__panel.is-active {
	display: block;
}

.su-tehillim-finder__steps {
	list-style: none;
	margin: 0 0 1.5rem;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 1.5rem;
}

.su-tehillim-finder__steps li {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	font-size: 0.85rem;
	color: var(--su-text);
	opacity: 0.85;
}

.su-tehillim-finder__step-num {
	flex-shrink: 0;
	width: 1.5rem;
	height: 1.5rem;
	border-radius: 50%;
	background: var(--su-gold);
	color: var(--su-dark);
	display: flex;
	align-items: center;
	justify-content: center;
	font-weight: 700;
	font-size: 0.75rem;
}

.su-tehillim-finder__panel-lead {
	text-align: center;
	max-width: 60ch;
	margin-left: auto;
	margin-right: auto;
}

/* The Builder and Index normally set their own container width and
   top header-clearance padding (see their own rules elsewhere in this
   file) for when they're used standalone. Nested inside the finder,
   that container/clearance is already provided by .su-tehillim-finder
   itself -- without this override, both would apply and the inner
   width would compute as 95% of an already-1125px-capped parent
   (~1069px), and the header clearance would effectively double up. */
.su-tehillim-finder .su-tehillim-builder,
.su-tehillim-finder .su-tehillim-index,
.su-tehillim-finder .su-tehillim-browse {
	width: 100%;
	max-width: none;
	margin-left: 0;
	margin-right: 0;
	padding-top: 0;
	scroll-margin-top: var(--su-header-clearance);
}

@media (max-width: 560px) {
	.su-tehillim-finder__tab {
		flex-basis: 100%;
	}
}

@media (prefers-reduced-motion: reduce) {
	.su-tehillim-btn,
	.su-tehillim-purpose-card,
	.su-tehillim-variant-card,
	.su-tehillim-purpose-menu__card,
	.su-tehillim-finder__tab,
	.su-tehillim-builder__generate,
	.su-tehillim-alternate-btn {
		transition: none;
	}
}
</style>/* End custom CSS */
/* Start custom CSS for shortcode, class: .elementor-element-f2aabcb *//* --- Screen 3 Sequence Pills & Pagination --- */
.reading-sequence-container {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 16px;
}

/* Page Label */
.page-indicator-label {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: #6b6a65;
  margin-right: 8px;
  text-transform: uppercase;
}

/* Inactive Chapter Pills */
.sequence-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 38px;
  height: 38px;
  padding: 0 8px;
  background-color: #d8b878;
  color: #ffffff !important;
  font-weight: 700;
  font-size: 14px;
  border-radius: 6px;
  text-decoration: none;
  transition: all 0.2s ease !important;
}

/* Active Chapter Pill (Highlights Page 1 / First item) */
.sequence-pill.active,
.sequence-pill:first-child {
  background-color: #2c382e !important; /* Dark contrast for active state */
  color: #ffffff !important;
  box-shadow: 0 2px 4px rgba(0,0,0,0.15);
}

/* Hover State - Removes Black Background */
.sequence-pill:hover {
  background-color: #c9a765 !important;
  color: #ffffff !important;
  transform: translateY(-1px);
}

/* Read Next Right Alignment */
.read-next-link {
  display: flex;
  justify-content: flex-end;
  margin-top: 12px;
  font-weight: 800;
  letter-spacing: 0.08em;
  font-size: 13px;
  color: #1a1a1a;
  text-decoration: none;
}

/* Reset Reading Button Styling */
.reset-reading-btn {
  display: inline-flex;
  align-items: center;
  margin-top: 28px;
  padding: 10px 18px;
  background-color: #d8b878;
  color: #ffffff !important;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.06em;
  border-radius: 4px;
  text-transform: uppercase;
  text-decoration: none;
  transition: opacity 0.2s ease;
}

.reset-reading-btn:hover {
  background-color: #c9a765 !important;
  color: #ffffff !important;
}/* End custom CSS */