/*
 * Click-Capybara — Static CSS (replaces Tailwind CDN)
 * Generated from class audit of: index.html, services.html, free-script.html, privacy.html
 * Drop this file in your project root and remove the CDN <script> + tailwind.config block.
 * ─────────────────────────────────────────────────────────────────────────────
 */

/* ─── 1. RESET & BASE ──────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; border: 0 solid; }
html { line-height: 1.5; -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body { margin: 0; font-family: 'Inter', sans-serif; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; background: #EFECE3; }
img, svg, video { display: block; max-width: 100%; }
button, input, select, textarea { font-family: inherit; font-size: 100%; }
/* Reset only bare buttons — not ones with explicit classes like .btn-brand */
button:not([class]) { background: none; border: none; padding: 0; cursor: pointer; }
/* Lang switcher and mobile menu buttons */
#lang-en, #lang-de, #mobile-lang-en, #mobile-lang-de, #mobile-menu-button {
  background: none; border: none; padding: 0; cursor: pointer;
}
a { color: inherit; text-decoration: inherit; }
h1,h2,h3,h4,h5,h6 { margin: 0; font-size: inherit; font-weight: inherit; }
p { margin: 0; }
ul, ol { list-style: none; margin: 0; padding: 0; }
blockquote { margin: 0; }
pre, code { font-family: 'JetBrains Mono', monospace; }

/* ─── 2. CSS CUSTOM PROPERTIES ─────────────────────────────────────────────── */
:root {
  /* Brand */
  --brand:       #fcba02;
  --brand-light: #FFF6D6;
  --brand-dark:  #D4A101;
  /* Ink */
  --ink-900: #0E0E10;
  --ink-800: #17171B;
  --ink-700: #222227;
  --ink-500: #6B6B73;
  /* Surface */
  --cream: #F6F3EC;
  --bg:    #EFECE3;
}

/* ─── 3. LAYOUT UTILITIES ──────────────────────────────────────────────────── */
.container { width: 100%; margin-left: auto; margin-right: auto; }
@media (min-width: 640px)  { .container { max-width: 640px; } }
@media (min-width: 768px)  { .container { max-width: 768px; } }
@media (min-width: 1024px) { .container { max-width: 1024px; } }
@media (min-width: 1280px) { .container { max-width: 1280px; } }
@media (min-width: 1536px) { .container { max-width: 1536px; } }

/* Display */
.block         { display: block; }
.inline-block  { display: inline-block; }
.inline        { display: inline; }
.flex          { display: flex; }
.inline-flex   { display: inline-flex; }
.grid          { display: grid; }
.hidden        { display: none; }

/* Flex */
.flex-col      { flex-direction: column; }
.flex-row      { flex-direction: row; }
.flex-wrap     { flex-wrap: wrap; }
.items-start   { align-items: flex-start; }
.items-center  { align-items: center; }
.items-end     { align-items: flex-end; }
.justify-start   { justify-content: flex-start; }
.justify-center  { justify-content: center; }
.justify-end     { justify-content: flex-end; }
.justify-between { justify-content: space-between; }
.flex-shrink-0 { flex-shrink: 0; }
.flex-1        { flex: 1 1 0%; }
.self-start    { align-self: flex-start; }

/* Gap */
.gap-1  { gap: 4px; }
.gap-2  { gap: 8px; }
.gap-3  { gap: 12px; }
.gap-4  { gap: 16px; }
.gap-6  { gap: 24px; }
.gap-8  { gap: 32px; }
.gap-10 { gap: 40px; }
.gap-16 { gap: 64px; }

/* Grid columns */
.col-span-1  { grid-column: span 1 / span 1; }
.col-span-2  { grid-column: span 2 / span 2; }
.col-span-3  { grid-column: span 3 / span 3; }
.col-span-4  { grid-column: span 4 / span 4; }
.col-span-5  { grid-column: span 5 / span 5; }
.col-span-6  { grid-column: span 6 / span 6; }
.col-span-7  { grid-column: span 7 / span 7; }
.col-span-8  { grid-column: span 8 / span 8; }
.col-span-9  { grid-column: span 9 / span 9; }
.col-span-10 { grid-column: span 10 / span 10; }
.col-span-11 { grid-column: span 11 / span 11; }
.col-span-12 { grid-column: span 12 / span 12; }

.row-span-1 { grid-row: span 1 / span 1; }
.row-span-2 { grid-row: span 2 / span 2; }
.row-span-3 { grid-row: span 3 / span 3; }

/* Responsive grid columns — sm (≥640px) */
@media (min-width: 640px) {
  .sm\:col-span-6  { grid-column: span 6 / span 6; }
  .sm\:flex-row    { flex-direction: row; }
  .sm\:text-\[48px\] { font-size: 48px; line-height: 1; }
}

/* Responsive grid columns — md (≥768px) */
@media (min-width: 768px) {
  .md\:col-span-2  { grid-column: span 2 / span 2; }
  .md\:col-span-3  { grid-column: span 3 / span 3; }
  .md\:col-span-4  { grid-column: span 4 / span 4; }
  .md\:col-span-5  { grid-column: span 5 / span 5; }
  .md\:col-span-6  { grid-column: span 6 / span 6; }
  .md\:col-span-7  { grid-column: span 7 / span 7; }
  .md\:col-span-8  { grid-column: span 8 / span 8; }
  .md\:col-span-9  { grid-column: span 9 / span 9; }
  .md\:col-span-10 { grid-column: span 10 / span 10; }
  .md\:col-span-12 { grid-column: span 12 / span 12; }
  .md\:row-span-2  { grid-row: span 2 / span 2; }
}

/* ─── 4. SPACING ────────────────────────────────────────────────────────────── */
/* Padding */
.p-0    { padding: 0; }
.p-1    { padding: 4px; }
.p-2    { padding: 8px; }
.p-3    { padding: 12px; }
.p-4    { padding: 16px; }
.p-5    { padding: 20px; }
.p-6    { padding: 24px; }
.p-8    { padding: 32px; }
.p-10   { padding: 40px; }
.px-2   { padding-left: 8px;  padding-right: 8px; }
.px-3   { padding-left: 12px; padding-right: 12px; }
.px-4   { padding-left: 16px; padding-right: 16px; }
.px-5   { padding-left: 20px; padding-right: 20px; }
.px-6   { padding-left: 24px; padding-right: 24px; }
.px-8   { padding-left: 32px; padding-right: 32px; }
.py-1   { padding-top: 4px;  padding-bottom: 4px; }
.py-1\.5 { padding-top: 6px; padding-bottom: 6px; }
.py-2   { padding-top: 8px;  padding-bottom: 8px; }
.py-3   { padding-top: 12px; padding-bottom: 12px; }
.py-3\.5 { padding-top: 14px; padding-bottom: 14px; }
.py-4   { padding-top: 16px; padding-bottom: 16px; }
.py-5   { padding-top: 20px; padding-bottom: 20px; }
.py-6   { padding-top: 24px; padding-bottom: 24px; }
.py-8   { padding-top: 32px; padding-bottom: 32px; }
.py-10  { padding-top: 40px; padding-bottom: 40px; }
.py-12  { padding-top: 48px; padding-bottom: 48px; }
.py-16  { padding-top: 64px; padding-bottom: 64px; }
.pt-2   { padding-top: 8px; }
.pt-4   { padding-top: 16px; }
.pb-2   { padding-bottom: 8px; }
.pb-4   { padding-bottom: 16px; }
.pr-3   { padding-right: 12px; }
.pl-3   { padding-left: 12px; }

/* Margin */
.m-0    { margin: 0; }
.mx-auto { margin-left: auto; margin-right: auto; }
.mt-0   { margin-top: 0; }
.mt-1   { margin-top: 4px; }
.mt-1\.5 { margin-top: 6px; }
.mt-2   { margin-top: 8px; }
.mt-3   { margin-top: 12px; }
.mt-4   { margin-top: 16px; }
.mt-5   { margin-top: 20px; }
.mt-6   { margin-top: 24px; }
.mt-8   { margin-top: 32px; }
.mb-0   { margin-bottom: 0; }
.mb-1   { margin-bottom: 4px; }
.mb-1\.5 { margin-bottom: 6px; }
.mb-2   { margin-bottom: 8px; }
.mb-3   { margin-bottom: 12px; }
.mb-4   { margin-bottom: 16px; }
.mb-5   { margin-bottom: 20px; }
.mb-6   { margin-bottom: 24px; }
.mb-7   { margin-bottom: 28px; }
.mb-8   { margin-bottom: 32px; }
.ml-2   { margin-left: 8px; }
.ml-6   { margin-left: 24px; }
.mr-2   { margin-right: 8px; }
.-mt-1  { margin-top: -4px; }

/* Space-y helpers */
.space-y-1  > * + * { margin-top: 4px; }
.space-y-2  > * + * { margin-top: 8px; }
.space-y-3  > * + * { margin-top: 12px; }
.space-y-4  > * + * { margin-top: 16px; }
.space-y-6  > * + * { margin-top: 24px; }
.space-y-8  > * + * { margin-top: 32px; }
.space-x-2  > * + * { margin-left: 8px; }
.space-x-3  > * + * { margin-left: 12px; }
.space-x-7  > * + * { margin-left: 28px; }

/* Responsive spacing */
@media (min-width: 768px) {
  .md\:px-6   { padding-left: 24px; padding-right: 24px; }
  .md\:py-8   { padding-top: 32px; padding-bottom: 32px; }
  .md\:p-8    { padding: 32px; }
  .md\:p-5    { padding: 20px; }
  .md\:p-10   { padding: 40px; }
  .md\:mt-2   { margin-top: 8px; }
  .md\:mt-3   { margin-top: 12px; }
  .md\:mb-4   { margin-bottom: 16px; }
  .md\:mb-5   { margin-bottom: 20px; }
  .md\:mb-6   { margin-bottom: 24px; }
  .md\:mt-4   { margin-top: 16px; }
  .md\:mt-5   { margin-top: 20px; }
  .md\:mt-6   { margin-top: 24px; }
  .md\:space-y-4 > * + * { margin-top: 16px; }
  .md\:space-y-6 > * + * { margin-top: 24px; }
  .md\:space-y-8 > * + * { margin-top: 32px; }
  .md\:gap-6  { gap: 24px; }
}
@media (min-width: 768px) {
  .md\:py-6   { padding-top: 24px; padding-bottom: 24px; }
  .md\:space-y-4 > * + * { margin-top: 16px; }
}

/* ─── 5. SIZING ─────────────────────────────────────────────────────────────── */
.w-4   { width: 16px; }
.w-6   { width: 24px; }
.w-7   { width: 28px; }
.w-8   { width: 32px; }
.w-10  { width: 40px; }
.w-12  { width: 48px; }
.w-14  { width: 56px; }
.w-16  { width: 64px; }
.w-24  { width: 96px; }
.w-5   { width: 20px; }
.w-9   { width: 36px; }
.w-full { width: 100%; }
.w-auto { width: auto; }

.h-4   { height: 16px; }
.h-5   { height: 20px; }
.h-9   { height: 36px; }
.h-6   { height: 24px; }
.h-7   { height: 28px; }
.h-8   { height: 32px; }
.h-10  { height: 40px; }
.h-12  { height: 48px; }
.h-14  { height: 56px; }
.h-16  { height: 64px; }
.h-24  { height: 96px; }
.h-full { height: 100%; }
.h-auto { height: auto; }
.min-h-0 { min-height: 0; }

/* min-h responsive */
.min-h-\[70px\]  { min-height: 70px; }
.min-h-\[80px\]  { min-height: 80px; }
.min-h-\[90px\]  { min-height: 90px; }
.min-h-\[100px\] { min-height: 100px; }
.min-h-\[110px\] { min-height: 110px; }
.min-h-\[120px\] { min-height: 120px; }
.min-h-\[140px\] { min-height: 140px; }
.min-h-\[160px\] { min-height: 160px; }
.min-h-\[180px\] { min-height: 180px; }
.min-h-\[200px\] { min-height: 200px; }
.min-h-\[220px\] { min-height: 220px; }
.min-h-\[240px\] { min-height: 240px; }
.min-h-\[260px\] { min-height: 260px; }
.min-h-\[300px\] { min-height: 300px; }
.min-h-\[320px\] { min-height: 320px; }
.min-h-\[340px\] { min-height: 340px; }
.min-h-\[380px\] { min-height: 380px; }
.min-h-\[400px\] { min-height: 400px; }
.min-h-\[420px\] { min-height: 420px; }
.min-h-\[460px\] { min-height: 460px; }
.min-h-\[480px\] { min-height: 480px; }
.min-h-\[500px\] { min-height: 500px; }
.min-h-\[520px\] { min-height: 520px; }
.min-h-\[560px\] { min-height: 560px; }
.min-h-\[600px\] { min-height: 600px; }

@media (min-width: 768px) {
  .md\:w-14   { width: 56px; }
  .md\:h-14   { height: 56px; }
  .md\:min-h-auto     { min-height: auto; }
  .md\:min-h-\[80px\]  { min-height: 80px; }
  .md\:min-h-\[90px\]  { min-height: 90px; }
  .md\:min-h-\[100px\] { min-height: 100px; }
  .md\:min-h-\[110px\] { min-height: 110px; }
  .md\:min-h-\[120px\] { min-height: 120px; }
  .md\:min-h-\[140px\] { min-height: 140px; }
  .md\:min-h-\[160px\] { min-height: 160px; }
  .md\:min-h-\[200px\] { min-height: 200px; }
  .md\:min-h-\[220px\] { min-height: 220px; }
  .md\:min-h-\[240px\] { min-height: 240px; }
  .md\:min-h-\[260px\] { min-height: 260px; }
  .md\:min-h-\[300px\] { min-height: 300px; }
  .md\:min-h-\[320px\] { min-height: 320px; }
  .md\:min-h-\[340px\] { min-height: 340px; }
  .md\:min-h-\[380px\] { min-height: 380px; }
  .md\:min-h-\[400px\] { min-height: 400px; }
  .md\:min-h-\[420px\] { min-height: 420px; }
  .md\:min-h-\[460px\] { min-height: 460px; }
  .md\:min-h-\[480px\] { min-height: 480px; }
  .md\:min-h-\[500px\] { min-height: 500px; }
  .md\:min-h-\[520px\] { min-height: 520px; }
  .md\:min-h-\[560px\] { min-height: 560px; }
  .md\:min-h-\[600px\] { min-height: 600px; }
}

.max-w-xs  { max-width: 320px; }
.max-w-sm  { max-width: 384px; }
.max-w-md  { max-width: 448px; }
.max-w-lg  { max-width: 512px; }
.max-w-xl  { max-width: 576px; }
.max-w-2xl { max-width: 672px; }
.max-w-3xl { max-width: 768px; }
.max-w-4xl { max-width: 896px; }
.max-w-prose { max-width: 65ch; }
.max-w-full  { max-width: 100%; }
.max-w-\[100\%\] { max-width: 100%; }

/* ─── 6. POSITION & OVERFLOW ────────────────────────────────────────────────── */
.relative { position: relative; }
.absolute { position: absolute; }
.fixed    { position: fixed; }
.sticky   { position: sticky; }
.static   { position: static; }

.top-0    { top: 0; }
.right-0  { right: 0; }
.bottom-0 { bottom: 0; }
.left-0   { left: 0; }
.inset-0  { top: 0; right: 0; bottom: 0; left: 0; }
.-right-4 { right: -16px; }
.-top-8   { top: -32px; }
.-right-8 { right: -32px; }
.-top-16  { top: -64px; }

.z-10     { z-index: 10; }
.z-20     { z-index: 20; }
.z-50     { z-index: 50; }

.overflow-hidden { overflow: hidden; }
.overflow-auto   { overflow: auto; }
.overflow-x-auto { overflow-x: auto; }

/* ─── 7. TYPOGRAPHY ─────────────────────────────────────────────────────────── */
/* Font size */
.text-xs   { font-size: 12px;   line-height: 16px; }
.text-sm   { font-size: 14px;   line-height: 20px; }
.text-base { font-size: 16px;   line-height: 24px; }
.text-lg   { font-size: 18px;   line-height: 28px; }
.text-xl   { font-size: 20px;   line-height: 28px; }
.text-2xl  { font-size: 24px;   line-height: 32px; }
.text-3xl  { font-size: 30px;   line-height: 36px; }
.text-4xl  { font-size: 36px;   line-height: 40px; }
.text-5xl  { font-size: 48px;   line-height: 1; }
.text-6xl  { font-size: 60px;   line-height: 1; }
.text-7xl  { font-size: 72px;   line-height: 1; }
.text-8xl  { font-size: 96px;   line-height: 1; }
.text-9xl  { font-size: 128px;  line-height: 1; }
.text-\[10px\]  { font-size: 10px; }
.text-\[11px\]  { font-size: 11px; }
.text-\[12px\]  { font-size: 12px; }
.text-\[13px\]  { font-size: 13px; }
.text-\[14px\]  { font-size: 14px; }

@media (min-width: 768px) {
  .md\:text-sm   { font-size: 14px;  line-height: 20px; }
  .md\:text-base { font-size: 16px;  line-height: 24px; }
  .md\:text-lg   { font-size: 18px;  line-height: 28px; }
  .md\:text-xl   { font-size: 20px;  line-height: 28px; }
  .md\:text-2xl  { font-size: 24px;  line-height: 32px; }
  .md\:text-3xl  { font-size: 30px;  line-height: 36px; }
  .md\:text-4xl  { font-size: 36px;  line-height: 40px; }
  .md\:text-5xl  { font-size: 48px;  line-height: 1; }
  .md\:text-6xl  { font-size: 60px;  line-height: 1; }
}
@media (min-width: 1024px) {
  .lg\:text-4xl  { font-size: 36px;  line-height: 40px; }
  .lg\:text-5xl  { font-size: 48px;  line-height: 1; }
  .lg\:text-6xl  { font-size: 60px;  line-height: 1; }
  .lg\:text-7xl  { font-size: 72px;  line-height: 1; }
}

/* Font weight */
.font-normal    { font-weight: 400; }
.font-medium    { font-weight: 500; }
.font-semibold  { font-weight: 600; }
.font-bold      { font-weight: 700; }
.font-extrabold { font-weight: 800; }
.font-black     { font-weight: 900; }

/* Font family */
.font-sans { font-family: 'Inter', sans-serif; }
.font-mono { font-family: 'JetBrains Mono', monospace; }

/* Line height */
.leading-none    { line-height: 1; }
.leading-tight   { line-height: 1.25; }
.leading-snug    { line-height: 1.375; }
.leading-normal  { line-height: 1.5; }
.leading-relaxed { line-height: 1.625; }
.leading-loose   { line-height: 2; }

/* Letter spacing */
.tracking-tight  { letter-spacing: -0.025em; }
.tracking-normal { letter-spacing: 0; }
.tracking-wide   { letter-spacing: 0.025em; }
.tracking-wider  { letter-spacing: 0.05em; }
.tracking-widest { letter-spacing: 0.1em; }
.tracking-tighter { letter-spacing: -0.05em; }

/* Text alignment */
.text-left   { text-align: left; }
.text-center { text-align: center; }
.text-right  { text-align: right; }

/* Text transform */
.uppercase   { text-transform: uppercase; }
.lowercase   { text-transform: lowercase; }
.capitalize  { text-transform: capitalize; }

/* Text decoration */
.underline      { text-decoration: underline; }
.no-underline   { text-decoration: none; }
.hover\:underline:hover { text-decoration: underline; }

/* Antialiasing */
.antialiased { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }

/* ─── 8. COLORS — TEXT ──────────────────────────────────────────────────────── */
/* Brand */
.text-brand        { color: #fcba02; }
.text-brand-dark   { color: #D4A101; }
.text-brand-light  { color: #FFF6D6; }
/* Ink */
.text-ink-900 { color: #0E0E10; }
.text-ink-800 { color: #17171B; }
.text-ink-700 { color: #222227; }
.text-ink-500 { color: #6B6B73; }
/* Opacity variants */
.text-ink-900\/10  { color: rgba(14,14,16,0.10); }
.text-ink-900\/30  { color: rgba(14,14,16,0.30); }
.text-ink-900\/70  { color: rgba(14,14,16,0.70); }
.text-ink-900\/85  { color: rgba(14,14,16,0.85); }
/* Whites */
.text-white   { color: #ffffff; }
.text-gray-300 { color: #d1d5db; }
.text-gray-400 { color: #9ca3af; }
.text-gray-500 { color: #6b7280; }
.text-gray-600 { color: #4b5563; }
.text-gray-700 { color: #374151; }
/* Misc */
.text-green-400  { color: #4ade80; }
.text-red-400    { color: #f87171; }
.text-yellow-400 { color: #facc15; }

/* Hover text colors */
.hover\:text-ink-900:hover { color: #0E0E10; }
.hover\:text-brand:hover   { color: #fcba02; }
.hover\:text-white:hover   { color: #ffffff; }

/* ─── 9. COLORS — BACKGROUND ───────────────────────────────────────────────── */
.bg-brand         { background-color: #fcba02; }
.bg-brand-light   { background-color: #FFF6D6; }
.bg-ink-900       { background-color: #0E0E10; }
.bg-ink-800       { background-color: #17171B; }
.bg-cream         { background-color: #F6F3EC; }
.bg-white         { background-color: #ffffff; }
.bg-white\/90     { background-color: rgba(255,255,255,0.90); }
.bg-white\/80     { background-color: rgba(255,255,255,0.80); }
.bg-transparent   { background-color: transparent; }
.bg-black\/5      { background-color: rgba(0,0,0,0.05); }
/* Backdrop-filter */
.backdrop-blur-xl { backdrop-filter: blur(24px); -webkit-backdrop-filter: blur(24px); }

/* ─── 10. BORDERS ───────────────────────────────────────────────────────────── */
.border           { border-width: 1px; border-style: solid; }
.border-0         { border-width: 0; }
.border-2         { border-width: 2px; border-style: solid; }
.border-t         { border-top-width: 1px; border-top-style: solid; }
.border-b         { border-bottom-width: 1px; border-bottom-style: solid; }
.border-l         { border-left-width: 1px; border-left-style: solid; }
.border-r         { border-right-width: 1px; border-right-style: solid; }

.border-black\/5   { border-color: rgba(0,0,0,0.05); }
.border-black\/8   { border-color: rgba(0,0,0,0.08); }
.border-white\/10  { border-color: rgba(255,255,255,0.10); }
.border-white\/20  { border-color: rgba(255,255,255,0.20); }
.border-ink-900\/15 { border-color: rgba(14,14,16,0.15); }
.border-ink-900\/30 { border-color: rgba(14,14,16,0.30); }
.border-brand      { border-color: #fcba02; }
.border-gray-200   { border-color: #e5e7eb; }
.border-gray-300   { border-color: #d1d5db; }
.border-gray-700   { border-color: #374151; }
.hover\:border-ink-900:hover { border-color: #0E0E10; }
.hover\:shadow-lg:hover { box-shadow: 0 10px 15px -3px rgba(0,0,0,0.1), 0 4px 6px -4px rgba(0,0,0,0.1); }
.hover\:shadow-md:hover { box-shadow: 0 4px 6px -1px rgba(0,0,0,0.1), 0 2px 4px -2px rgba(0,0,0,0.1); }

/* Rounded */
.rounded     { border-radius: 4px; }
.rounded-md  { border-radius: 6px; }
.rounded-lg  { border-radius: 8px; }
.rounded-xl  { border-radius: 12px; }
.rounded-2xl { border-radius: 16px; }
.rounded-3xl { border-radius: 24px; }
.rounded-full { border-radius: 9999px; }

/* ─── 11. SHADOWS ───────────────────────────────────────────────────────────── */
.shadow-sm   { box-shadow: 0 1px 2px 0 rgba(0,0,0,0.05); }
.shadow      { box-shadow: 0 1px 3px 0 rgba(0,0,0,0.1), 0 1px 2px -1px rgba(0,0,0,0.1); }
.shadow-md   { box-shadow: 0 4px 6px -1px rgba(0,0,0,0.1), 0 2px 4px -2px rgba(0,0,0,0.1); }
.shadow-lg   { box-shadow: 0 10px 15px -3px rgba(0,0,0,0.1), 0 4px 6px -4px rgba(0,0,0,0.1); }
.shadow-xl   { box-shadow: 0 20px 25px -5px rgba(0,0,0,0.1), 0 8px 10px -6px rgba(0,0,0,0.1); }
.shadow-brand\/30 { box-shadow: 0 4px 6px -1px rgba(252,186,2,0.30); }

/* ─── 12. OPACITY ───────────────────────────────────────────────────────────── */
.opacity-0   { opacity: 0; }
.opacity-30  { opacity: 0.30; }
.opacity-40  { opacity: 0.40; }
.opacity-50  { opacity: 0.50; }
.opacity-60  { opacity: 0.60; }
.opacity-70  { opacity: 0.70; }
.opacity-80  { opacity: 0.80; }
.opacity-90  { opacity: 0.90; }
.opacity-100 { opacity: 1; }

/* ─── 13. TRANSITIONS & TRANSFORMS ─────────────────────────────────────────── */
.transition            { transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter; transition-timing-function: cubic-bezier(0.4,0,0.2,1); transition-duration: 150ms; }
.transition-all        { transition: all 150ms cubic-bezier(0.4,0,0.2,1); }
.transition-opacity    { transition: opacity 150ms cubic-bezier(0.4,0,0.2,1); }
.transition-transform  { transition: transform 150ms cubic-bezier(0.4,0,0.2,1); }

.duration-200  { transition-duration: 200ms; }
.duration-300  { transition-duration: 300ms; }

.hover\:-translate-y-0\.5:hover { transform: translateY(-2px); }
.hover\:-translate-y-1:hover    { transform: translateY(-4px); }

.hover\:scale-105:hover { transform: scale(1.05); }

/* ─── 14. CURSOR ────────────────────────────────────────────────────────────── */
.cursor-pointer  { cursor: pointer; }
.cursor-default  { cursor: default; }
.cursor-not-allowed { cursor: not-allowed; }

/* ─── 15. POINTER EVENTS ────────────────────────────────────────────────────── */
.pointer-events-none { pointer-events: none; }
.pointer-events-auto { pointer-events: auto; }

/* ─── 16. SELECT ────────────────────────────────────────────────────────────── */
.select-none { user-select: none; -webkit-user-select: none; }
.select-all  { user-select: all; }

/* ─── 17. OBJECT FIT ────────────────────────────────────────────────────────── */
.object-contain { object-fit: contain; }
.object-cover   { object-fit: cover; }
.object-center  { object-position: center; }

/* ─── 18. LIST STYLE ────────────────────────────────────────────────────────── */
.list-none    { list-style-type: none; }
.list-disc    { list-style-type: disc; }
.list-decimal { list-style-type: decimal; }

/* ─── 19. VERTICAL ALIGN ────────────────────────────────────────────────────── */
.align-middle { vertical-align: middle; }
.align-top    { vertical-align: top; }

/* ─── 20. WHITESPACE & WRAP ─────────────────────────────────────────────────── */
.whitespace-nowrap   { white-space: nowrap; }
.whitespace-pre-wrap { white-space: pre-wrap; }
.break-words         { overflow-wrap: break-word; word-wrap: break-word; }
.truncate            { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ─── 21. ACCESSIBILITY ─────────────────────────────────────────────────────── */
.sr-only {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0,0,0,0); white-space: nowrap; border-width: 0;
}

/* ─── 22. RESPONSIVE DISPLAY ─────────────────────────────────────────────────── */
@media (min-width: 768px) {
  .md\:block  { display: block; }
  .md\:flex   { display: flex; }
  .md\:grid   { display: grid; }
  .md\:hidden { display: none; }
  .md\:inline-flex { display: inline-flex; }
}
@media (max-width: 767px) {
  .md\:hidden-mobile { /* handled by md:hidden above */ }
}

/* ─── 23. RESPONSIVE FLEX DIRECTION ─────────────────────────────────────────── */
@media (min-width: 768px) {
  .md\:flex-row      { flex-direction: row; }
  .md\:flex-col      { flex-direction: column; }
  .md\:items-center  { align-items: center; }
  .md\:items-start   { align-items: flex-start; }
  .md\:justify-between { justify-content: space-between; }
  .md\:flex-shrink-0 { flex-shrink: 0; }
  .md\:gap-6         { gap: 24px; }
  .md\:ml-4          { margin-left: 16px; }
  .md\:mt-0          { margin-top: 0; }
  .md\:mb-2          { margin-bottom: 8px; }
  .md\:pb-0          { padding-bottom: 0; }
}

/* ─── 24. RESPONSIVE SPACING — SPACE-Y ──────────────────────────────────────── */
@media (min-width: 768px) {
  .md\:space-y-4 > * + * { margin-top: 16px; }
  .md\:space-y-6 > * + * { margin-top: 24px; }
  .md\:space-y-8 > * + * { margin-top: 32px; }
}

/* ─── 25. SCROLL SMOOTH + SCROLL MARGIN ─────────────────────────────────────── */
.scroll-smooth  { scroll-behavior: smooth; }
.scroll-mt-24   { scroll-margin-top: 96px; }

/* ─── 26. COMPONENT STYLES (shared across pages) ────────────────────────────── */

/* ── Bento grid ─────────────────────────────── */
.bento {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: 14px;
}
@media (min-width: 768px) { .bento { gap: 16px; } }

/* ── Tile base ──────────────────────────────── */
.tile {
  border-radius: 22px;
  padding: 22px;
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 18px;
  min-height: 0;
}
@media (min-width: 768px) {
  .tile { padding: 32px; border-radius: 28px; gap: 24px; }
}

/* Tile colour variants */
.tile-light      { background: #FFFFFF; color: #0E0E10; }
.tile-cream      { background: #F6F3EC; color: #0E0E10; border: 1px solid rgba(14,14,16,0.06); }
.tile-dark       { background: #0E0E10; color: #FFFFFF; }
.tile-ink        { background: #17171B; color: #FFFFFF; }
.tile-brand      { background: #fcba02; color: #0E0E10; }
.tile-brand-soft { background: #FFF6D6; color: #0E0E10; border: 1px solid rgba(252,186,2,0.35); }
.tile-outline    { background: #FFFFFF; color: #0E0E10; border: 1px solid rgba(14,14,16,0.08); }

/* Tile hover lift */
.tile-hover { transition: transform .35s cubic-bezier(.2,.7,.2,1), box-shadow .35s; }
.tile-hover:hover { transform: translateY(-3px); box-shadow: 0 14px 40px -18px rgba(14,14,16,0.25); }

/* ── Eyebrow label ──────────────────────────── */
.eyebrow {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

/* ── Display headline ───────────────────────── */
.display {
  font-weight: 800;
  line-height: 0.98;
  letter-spacing: -0.025em;
}

/* ── Highlight span ─────────────────────────── */
.hl { color: #fcba02; }

/* ── Grid pattern overlays ──────────────────── */
.grid-pattern {
  background-image:
    linear-gradient(rgba(14,14,16,0.06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(14,14,16,0.06) 1px, transparent 1px);
  background-size: 36px 36px;
  background-position: -1px -1px;
}
.grid-pattern-dark {
  background-image:
    linear-gradient(rgba(255,255,255,0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.05) 1px, transparent 1px);
  background-size: 36px 36px;
}

/* ── Nav link underline ─────────────────────── */
.nav-link { position: relative; transition: color 0.3s ease; }
.nav-link::after {
  content: ''; position: absolute; width: 0; height: 2px;
  bottom: -4px; left: 50%; transform: translateX(-50%);
  background-color: #fcba02; transition: width 0.3s ease;
}
.nav-link:hover::after,
.nav-link.active::after { width: 100%; }

/* ── Chip / badge ───────────────────────────── */
.chip {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 11px; font-weight: 700; letter-spacing: 0.14em;
  text-transform: uppercase;
  padding: 6px 10px; border-radius: 9999px;
}
.chip-on-dark  { background: rgba(252,186,2,0.14); color: #fcba02; border: 1px solid rgba(252,186,2,0.3); }
.chip-on-light { background: #0E0E10; color: #fcba02; }
.chip-soft     { background: rgba(14,14,16,0.06); color: #0E0E10; border: 1px solid rgba(14,14,16,0.08); }

/* ── Big numeral watermark ──────────────────── */
.numeral {
  font-weight: 800; font-size: 44px;
  line-height: 1; letter-spacing: -0.04em;
}
@media (min-width: 768px) { .numeral { font-size: 88px; } }

.numeral-xl {
  font-weight: 900; font-size: 120px;
  line-height: 0.9; letter-spacing: -0.06em;
}
@media (min-width: 768px) { .numeral-xl { font-size: 220px; } }

/* ── Fade-in animation ──────────────────────── */
.fade-in { opacity: 0; transform: translateY(18px); transition: opacity .55s ease, transform .55s ease; }
.fade-in.visible { opacity: 1; transform: translateY(0); }

/* ── Logo fallback ──────────────────────────── */
.logo-fallback {
  background: #0E0E10; color: #fcba02; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  font-weight: 900; letter-spacing: -0.05em;
}

/* ── Star CSS shape ─────────────────────────── */
.star {
  display: inline-block;
  width: 18px; height: 18px;
  background: #fcba02;
  clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%);
}

/* ── Stripe placeholder ─────────────────────── */
.stripe-placeholder {
  background: repeating-linear-gradient(
    -55deg,
    rgba(14,14,16,0.04),
    rgba(14,14,16,0.04) 10px,
    transparent 10px,
    transparent 20px
  );
}

/* ── Step number badge (free-script.html) ───── */
.step-num {
  display: inline-flex; align-items: center; justify-content: center;
  width: 32px; height: 32px; flex-shrink: 0;
  background: #0E0E10; color: #fcba02;
  border-radius: 9999px; font-size: 13px; font-weight: 800;
}

/* ── Deliverable rows (services.html) ───────── */
.deliverable {
  display: flex; align-items: flex-start; gap: 12px;
  padding: 11px 0; font-size: 13px;
  border-bottom: 1px dashed rgba(14,14,16,0.1);
}
.deliverable:last-child { border-bottom: none; }
.deliverable-arrow { color: #fcba02; font-weight: 800; flex-shrink: 0; margin-top: 1px; line-height: 1.2; }
.tile-dark .deliverable   { border-bottom-color: rgba(255,255,255,0.1); color: #d1d5db; }
.tile-brand .deliverable  { border-bottom-color: rgba(14,14,16,0.15); color: #1F1F23; }
.tile-brand .deliverable-arrow { color: #0E0E10; }

/* ── For-pill (services.html) ───────────────── */
.for-pill {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 12px; font-weight: 600;
  padding: 6px 12px; border-radius: 9999px;
  background: rgba(252,186,2,0.15);
  border: 1px solid rgba(252,186,2,0.4);
  color: #92710a;
}
.tile-dark .for-pill { background: rgba(252,186,2,0.1); border-color: rgba(252,186,2,0.3); color: #fcba02; }
.tile-brand .for-pill { background: rgba(14,14,16,0.1); border-color: rgba(14,14,16,0.2); color: #0E0E10; }

/* ── Buttons ────────────────────────────────── */
.btn-brand {
  display: inline-flex; align-items: center; gap: 8px;
  background: #fcba02; color: #0E0E10;
  font-weight: 700; padding: 12px 24px;
  border-radius: 12px; border: none; cursor: pointer;
  transition: transform .25s cubic-bezier(.2,.7,.2,1), box-shadow .25s;
  text-decoration: none;
}
.btn-brand:hover { transform: translateY(-2px); box-shadow: 0 8px 24px -8px rgba(252,186,2,0.5); }

.btn-outline {
  display: inline-flex; align-items: center; gap: 8px;
  background: transparent; color: #0E0E10;
  font-weight: 700; padding: 12px 24px;
  border-radius: 12px; border: 2px solid rgba(14,14,16,0.15); cursor: pointer;
  transition: border-color .2s, background .2s;
  text-decoration: none;
}
.btn-outline:hover { border-color: #fcba02; background: rgba(252,186,2,0.04); }

/* ── Form elements ──────────────────────────── */
.form-label { display: block; font-size: 13px; font-weight: 600; color: #0E0E10; margin-bottom: 6px; }
.form-input, .form-select, .form-textarea {
  width: 100%; background: #F6F3EC; border: 1.5px solid rgba(14,14,16,0.1);
  border-radius: 10px; padding: 10px 14px;
  font-size: 14px; color: #0E0E10; outline: none;
  transition: border-color .2s;
  font-family: 'Inter', sans-serif;
}
.form-input:focus, .form-select:focus, .form-textarea:focus {
  border-color: #fcba02; background: #fff;
}
.form-textarea { resize: vertical; min-height: 90px; }
.form-select   { appearance: none; -webkit-appearance: none; cursor: pointer; }

/* ── Code block (free-script.html) ─────────── */
.code-block {
  background: #0d1117; border-radius: 12px;
  padding: 20px; overflow-x: auto;
  font-family: 'JetBrains Mono', monospace;
  font-size: 12px; line-height: 1.7; color: #e6edf3;
}
.code-kw  { color: #ff7b72; }
.code-str { color: #a5d6ff; }
.code-cmt { color: #8b949e; font-style: italic; }
.code-fn  { color: #d2a8ff; }
.code-num { color: #79c0ff; }

/* ── Privacy page prose ─────────────────────── */
.privacy-content h1 { font-size: 2.25rem; font-weight: 900; color: #111827; margin-bottom: 0.5rem; line-height: 1.2; }
.privacy-content h2 { font-size: 1.125rem; font-weight: 700; color: #111827; margin-top: 2.5rem; margin-bottom: 0.75rem; padding-left: 0.875rem; border-left: 3px solid #fcba02; }
.privacy-content h3 { font-size: 0.9375rem; font-weight: 600; color: #374151; margin-top: 1.5rem; margin-bottom: 0.5rem; }
.privacy-content p  { font-size: 0.9375rem; color: #6b7280; line-height: 1.75; margin-bottom: 0.875rem; }
.privacy-content ul { margin: 0.75rem 0 1rem; padding-left: 0; list-style: none; }

/* ── Calc widget (free-script.html) ─────────── */
.calc-wrap         { background: #0d1117; border-radius: 18px; padding: 22px; }
.calc-title        { font-size: 15px; font-weight: 800; color: #fff; margin: 0 0 16px; letter-spacing: -0.02em; }
.calc-slider-row   { display: flex; align-items: center; gap: 10px; margin: 0 0 10px; }
.calc-slider-lbl   { font-size: 12px; color: #8b949e; min-width: 120px; }
.calc-slider       { flex: 1; accent-color: #fcba02; cursor: pointer; border: 2px solid #0E0E10; }
.calc-slider-val   { font-size: 13px; font-weight: 700; min-width: 48px; text-align: right; color: #fcba02; }
.calc-metrics      { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 10px; margin: 12px 0 18px; }
.calc-metric       { background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.06); border-radius: 14px; padding: 14px; }
.calc-metric-lbl   { font-size: 11px; color: #8b949e; margin: 0 0 4px; letter-spacing: 0.05em; text-transform: uppercase; }
.calc-metric-val   { font-size: 22px; font-weight: 800; margin: 0; line-height: 1.2; color: #fff; letter-spacing: -0.02em; }
.calc-metric-sub   { font-size: 10px; color: #6e7681; margin: 3px 0 0; }
.calc-ok   { color: #3fb950 !important; }
.calc-warn { color: #d29922 !important; }
.calc-err  { color: #e8824a !important; }
.calc-runs-box        { background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.06); border-radius: 14px; padding: 14px 16px; font-size: 13px; color: #b9bdc4; line-height: 1.65; margin-bottom: 18px; }
.calc-runs-box strong { color: #fff; font-weight: 700; }
.calc-metrics-cost    { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 10px; margin: 12px 0 18px; }
.calc-legend-row      { display: flex; gap: 16px; flex-wrap: wrap; font-size: 11px; color: #b9bdc4; margin-bottom: 10px; }
.calc-legend-row span { display: flex; align-items: center; gap: 6px; }
.calc-ldot        { width: 10px; height: 10px; border-radius: 3px; flex-shrink: 0; }
.calc-ldot-active { width: 10px; height: 10px; border-radius: 3px; flex-shrink: 0; background: #fcba02; outline: 2px solid rgba(255,255,255,0.55); outline-offset: 1px; }

@media (max-width: 640px) {
  .calc-slider-row   { flex-wrap: wrap; gap: 6px; }
  .calc-slider-lbl   { min-width: 0; width: 100%; font-size: 12px; }
  .calc-slider-val   { min-width: 36px; }
  .calc-metrics      { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .calc-metrics-cost { grid-template-columns: repeat(2, minmax(0,1fr)); }
}

/* ─── 27. UTILITY OVERRIDES ─────────────────────────────────────────────────── */
.\!p-0 { padding: 0 !important; }

/* ─── 28. PRINT ─────────────────────────────────────────────────────────────── */
@media print {
  .no-print { display: none; }
}

/* ─── 29. PRIVACY PAGE ADDITIONS ────────────────────────────────────────────── */

/* Background colors */
.bg-gray-50   { background-color: #f9fafb; }
.bg-gray-100  { background-color: #f3f4f6; }
.bg-gray-900  { background-color: #111827; }
.bg-gray-950  { background-color: #030712; }
.bg-white     { background-color: #ffffff; }
.hover\:bg-gray-50:hover { background-color: #f9fafb; }

/* Text colors */
.text-gray-900 { color: #111827; }
.text-gray-800 { color: #1f2937; }
.text-gray-700 { color: #374151; }
.text-gray-600 { color: #4b5563; }
.text-gray-500 { color: #6b7280; }
.text-gray-400 { color: #9ca3af; }
.text-gray-300 { color: #d1d5db; }

/* Hover text */
.hover\:text-gray-700:hover { color: #374151; }
.hover\:text-gray-900:hover { color: #111827; }
.hover\:text-white:hover    { color: #ffffff; }
.hover\:text-brand:hover    { color: #fcba02; }

/* Border colors */
.border-gray-50  { border-color: #f9fafb; }
.border-gray-100 { border-color: #f3f4f6; }
.border-gray-200 { border-color: #e5e7eb; }

/* Body background override for privacy page */
.bg-white.text-gray-800 { background-color: #ffffff; }

/* Font sizes used in privacy page */
.text-3xl { font-size: 30px; line-height: 36px; }

/* Padding used in privacy page */
.py-14  { padding-top: 56px;  padding-bottom: 56px; }
.py-16  { padding-top: 64px;  padding-bottom: 64px; }
.py-8   { padding-top: 32px;  padding-bottom: 32px; }
.px-6   { padding-left: 24px; padding-right: 24px; }
.p-5    { padding: 20px; }
.pt-6   { padding-top: 24px; }
.mt-10  { margin-top: 40px; }
.mb-8   { margin-bottom: 32px; }
.mb-4   { margin-bottom: 16px; }
.mb-3   { margin-bottom: 12px; }
.mb-1   { margin-bottom: 4px; }
.mt-3   { margin-top: 12px; }
.mt-2   { margin-top: 8px; }
.ml-8   { margin-left: 32px; }

/* Max-width used in privacy page */
.max-w-3xl { max-width: 768px; }

/* Gap */
.gap-2  { gap: 8px; }
.gap-4  { gap: 16px; }
.gap-6  { gap: 24px; }

/* Space-x */
.space-x-4 > * + * { margin-left: 16px; }
.space-x-7 > * + * { margin-left: 28px; }

/* Tracking */
.tracking-widest { letter-spacing: 0.1em; }

/* Shadow used on nav */
.shadow-lg  { box-shadow: 0 10px 15px -3px rgba(0,0,0,0.1), 0 4px 6px -4px rgba(0,0,0,0.1); }
.hover\:shadow-md:hover { box-shadow: 0 4px 6px -1px rgba(0,0,0,0.1), 0 2px 4px -2px rgba(0,0,0,0.1); }

/* Rounded used in privacy page */
.rounded-xl { border-radius: 12px; }
.rounded-lg { border-radius: 8px; }

/* Backdrop blur on nav */
.backdrop-blur-lg { backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); }

/* Opacity */
.opacity-40 { opacity: 0.40; }

/* Text size responsive */
@media (min-width: 768px) {
  .md\:text-4xl { font-size: 36px; line-height: 40px; }
}

/* Section block divider */
.section-block { padding: 1.5rem 0; border-bottom: 1px solid #f3f4f6; }
.section-block:last-child { border-bottom: none; }

/* Header scrolled shadow */
.header-scrolled { box-shadow: 0 1px 20px rgba(0,0,0,0.08); }

/* Transition shadow */
.transition-shadow { transition: box-shadow 0.2s ease; }