/* Tailwind v4 site stylesheet. Single source of truth for design + custom CSS.
 *
 * At draft time, this is read inline into a <style type="text/tailwindcss"> block.
 * At publish time, the Tailwind CLI compiles this file (plus templates) into
 * dist/styles.css. Every directive works here: @theme, @layer, @utility,
 * @apply, @keyframes, plus plain CSS. Do NOT write <style> blocks in PHP
 * templates for theme CSS — put it here so it lands in the compiled bundle.
 *
 * functions.php also parses the @theme block at runtime to register the
 * palette + font sizes with Gutenberg via add_theme_support().
 *
 * Conventions:
 *   1. @theme: tokens only (--color-*, --font-*, --text-*, --radius-*). No
 *      selectors, no @apply. Tokens auto-generate matching utilities.
 *   2. Plain CSS: outside @theme, inside @layer. Prefer utility classes in
 *      templates first; only write CSS here when utilities cannot express it.
 *      @layer base { h1 { font-size: var(--text-2xl); } }
 *      @layer components { .card { padding: --spacing(6); } }
 *   3. New reusable utilities: prefer @utility over @apply.
 *      @utility content-auto { content-visibility: auto; }
 *   4. Custom web fonts: load via <link> in template-parts/head.php, then
 *      reference here via --font-*.
 *
 * Token naming (Tailwind v4):
 *   --color-{slug}        → bg-{slug}, text-{slug}, border-{slug}
 *   --color-{slug}-{NN}   → numeric shades (skipped in the Gutenberg palette)
 *   --font-{slug}         → font-{slug}
 *   --text-{slug}         → text-{slug}
 *   --radius-{slug}       → rounded-{slug}
 */

@theme {
	--color-primary: #2563eb;
	--color-primary-50:  #eff6ff;
	--color-primary-100: #dbeafe;
	--color-primary-500: #3b82f6;
	--color-primary-600: #2563eb;
	--color-primary-700: #1d4ed8;
	--color-primary-900: #1e3a8a;

	--color-secondary: #475569;
	--color-secondary-50:  #f8fafc;
	--color-secondary-100: #f1f5f9;
	--color-secondary-200: #e2e8f0;
	--color-secondary-300: #cbd5e1;
	--color-secondary-500: #64748b;
	--color-secondary-600: #475569;
	--color-secondary-700: #334155;
	--color-secondary-900: #0f172a;

	--color-neutral: #171717;
	--color-background: #ffffff;

	--font-sans:  system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
	--font-serif: Georgia, "Times New Roman", serif;
	--font-mono:  ui-monospace, "SF Mono", Menlo, monospace;

	--text-sm:   0.875rem;
	--text-base: 1rem;
	--text-lg:   1.125rem;
	--text-xl:   1.25rem;
	--text-2xl:  1.5rem;
	--text-3xl:  1.875rem;
	--text-4xl:  2.25rem;
	--text-5xl:  3rem;
}

/* Element-level defaults. Reach for utility classes in templates first; put
 * a rule here only when the same styling needs to apply across every instance
 * of an element (e.g. body font features). Keep this layer small. */
@layer base {
	/* body { font-feature-settings: "ss01", "ss02"; } */
}

/* Reusable component classes. Use for compound patterns that recur and need
 * a name (e.g. .card, .hero-heading, .divider). Reference tokens via var();
 * @apply works but is finicky — prefer var() + utility classes in templates. */
@layer components {
	/* .hero-heading em { font-style: italic; color: var(--color-primary); } */
}

/* Approved offers and horizontal wordmark, October 2026. */
.horizontal-wordmark{display:block;font-family:'Silk Serif',Georgia,serif;font-weight:700;font-synthesis:none;text-align:left;font-size:23px;line-height:.95;letter-spacing:-.025em;white-space:nowrap;flex-shrink:0}.nav{justify-content:space-between;gap:25px;height:86px}.nav-links{gap:clamp(16px,2.2vw,32px)}.lba-web-scope{font-size:15px;line-height:1.5;margin:22px 0 8px;padding:18px 0;border-block:1px solid var(--line)}.ba-package-value{margin:16px 0}.ba-package-value summary{cursor:pointer;font-size:13px;padding:15px 0}.ba-package-value p{font-size:13px;line-height:1.6}.ba-payment-stage{padding:14px 0;border-top:1px solid var(--line)}.ba-payment-stage h4{font:500 13px/1.6 Helvetica,sans-serif;margin:0 0 8px}.plan .small{margin-top:auto}.plan .fine-print{margin-bottom:16px}.lba-starter-entry{margin-top:70px;border-block:1px solid var(--ink);padding:35px 0;display:grid;grid-template-columns:1.5fr 1fr;gap:40px}.lba-starter-entry h3{margin:20px 0}.lba-starter-entry p{max-width:570px}.lba-starter-entry strong{font:300 34px 'Silk Serif',Georgia,serif}.lba-starter-entry>div:last-child{justify-self:end}.starter-hero h1{font-size:clamp(62px,8vw,120px);margin-top:36px}.starter-intro{display:flex;justify-content:space-between;gap:55px;align-items:end;margin:45px 0}.starter-intro .lede{margin:0;max-width:620px}.starter-price{font:300 clamp(40px,4.7vw,65px) 'Silk Serif',Georgia,serif;white-space:nowrap;margin-bottom:15px}.starter-price span{font-size:.65em}.starter-intro>div>p{font-size:13px}.starter-actions{display:flex;align-items:center;gap:30px;flex-wrap:wrap;margin-top:30px}.starter-scope{background:#fff;border-block:1px solid var(--line)}.starter-list{list-style:none;padding:0;margin:30px 0}.starter-list li{padding:12px 0;border-bottom:1px solid var(--line)}.starter-page .faq-list{margin-top:40px}.ba-cart-open{position:fixed;right:24px;bottom:22px;z-index:60;background:var(--paper);border:1px solid var(--ink);padding:13px 20px;font-size:12px;box-shadow:0 4px 20px #0001}.wpvibe-preview-active .ba-cart-open{bottom:90px}.ba-cart-open span{margin-left:12px}#ba-cart{position:fixed;margin:auto;width:min(610px,calc(100% - 28px));max-height:calc(100dvh - 48px);overflow-y:auto;padding:38px;border:1px solid var(--ink);background:#fff;color:var(--ink)}#ba-cart::backdrop{background:#17171588}#ba-cart h2{font:300 58px/1 'Silk Serif',Georgia,serif;margin:20px 0 28px}#ba-cart h3{font-size:34px;margin:25px 0 15px}#ba-cart p{font-size:14px;line-height:1.6;margin:16px 0}#ba-cart ul{font-size:13px;line-height:1.8;padding-left:18px;margin:20px 0}#ba-cart label{font-size:12px;display:block;margin:18px 0 10px}#ba-cart select{width:100%;padding:13px;border:1px solid var(--line);background:#fff;font:inherit}#ba-cart summary{font-size:13px;cursor:pointer;padding:15px 0}.ba-cart-close{display:flex;justify-content:flex-end}.ba-cart-close button{background:none;border:0;padding:8px;font-size:12px}.ba-cart-row{display:flex;justify-content:space-between;gap:18px;border-top:1px solid var(--line);padding:16px 0;font-size:13px}.ba-cart-row strong{font-weight:500}.ba-cart-checkout{display:block;width:100%;margin-top:15px;text-align:center}#ba-cart-brief,#ba-cart-fit{margin-top:15px;font-size:12px}#ba-cart-remove{display:block;border:0;background:none;font-size:12px;padding:8px 0;text-decoration:underline;margin-top:15px}#ba-cart [hidden]{display:none!important}
@media(max-width:1150px){.horizontal-wordmark{font-size:20px}.nav-links{font-size:11px;gap:18px}.nav.wrap{padding-inline:30px}}
@media(min-width:761px) and (max-width:980px){.nav-links{display:none;position:absolute;top:86px;left:0;right:0;background:var(--paper);padding:20px 30px;border-bottom:1px solid var(--line);flex-direction:column;gap:5px}.nav-links.open{display:flex}.menu-toggle{display:block}}
@media(max-width:760px){.horizontal-wordmark{font-size:20px}.nav,.site-header .nav{height:80px;gap:18px}.nav.wrap{padding-inline:24px}.nav-links{top:80px}.lba-starter-entry{grid-template-columns:1fr;gap:28px}.lba-starter-entry>div:last-child{justify-self:start}.starter-intro{display:grid;gap:30px;margin:32px 0}.starter-intro .lede{font-size:18px}.starter-actions{align-items:flex-start;gap:18px}.starter-price{font-size:50px}.starter-hero h1{font-size:clamp(57px,12vw,80px)}.starter-scope h2{font-size:45px}#ba-cart{padding:24px}.ba-cart-open{right:15px;bottom:15px}#ba-cart h2{font-size:46px}.ba-cart-row{flex-wrap:wrap}}
@media(max-width:360px){.horizontal-wordmark{font-size:18px}.nav.wrap{padding-inline:18px}.starter-scope h2{font-size:39px}}