/* ===========================================================
   Delight Trail — vanilla CSS port of Lovable design.
   Utility-first subset matching the exact classes the
   Lovable bundle ships, plus a few component helpers.
   =========================================================== */

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; padding: 0; border: 0 solid transparent; }
html { -webkit-text-size-adjust: 100%; line-height: 1.5; tab-size: 4; }
body { line-height: inherit; min-height: 100vh; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
img, picture, video, canvas, svg { display: block; max-width: 100%; }
img { height: auto; }
button, input, select, textarea { font: inherit; color: inherit; background: transparent; }
button { cursor: pointer; }
a { color: inherit; text-decoration: none; }
ul, ol { list-style: none; }
[hidden] { display: none !important; }

/* ---------- Tokens (Lovable palette) ---------- */
:root {
  --radius: .875rem;

  --background: #ffffff;
  --foreground: #2b3a40;
  --ink: #2b3a40;
  --card: #ffffff;
  --card-foreground: #2b3a40;
  --popover: #ffffff;
  --popover-foreground: #2b3a40;
  --primary: #2b3a40;
  --primary-foreground: #ffffff;
  --secondary: #f3f5f6;
  --secondary-foreground: #2b3a40;
  --muted: #eef1f2;
  --muted-foreground: #7e8a8f;
  --accent: #eef1f2;
  --accent-foreground: #2b3a40;
  --destructive: #d24545;
  --destructive-foreground: #ffffff;
  --border: #e3e7e9;
  --input: #e8ecee;
  --ring: #2b3a40;
  --cta: #f0c040;
  --cta-foreground: #2b3a40;
  --coral: #e58a6e;

  --font-display: "Fraunces", "Cormorant Garamond", Georgia, serif;
  --font-sans: "Inter", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}
@supports (color: oklch(27% .025 200)) {
  :root {
    --foreground: oklch(27% .025 200);
    --ink: oklch(27% .025 200);
    --card-foreground: oklch(27% .025 200);
    --popover-foreground: oklch(27% .025 200);
    --primary: oklch(27% .025 200);
    --secondary-foreground: oklch(27% .025 200);
    --muted-foreground: oklch(50% .015 200);
    --accent-foreground: oklch(27% .025 200);
    --secondary: oklch(97% .005 200);
    --muted: oklch(96% .005 200);
    --accent: oklch(95% .01 200);
    --border: oklch(92% .005 200);
    --input: oklch(94% .005 200);
    --ring: oklch(27% .025 200);
    --destructive: oklch(60% .22 25);
    --cta: oklch(86% .18 95);
    --coral: oklch(74% .14 30);
  }
}

html { scroll-behavior: smooth; }
body {
  font-family: var(--font-sans);
  font-size: 16px;
  color: var(--foreground);
  background: var(--background);
}

/* ---------- Custom utilities (from Lovable) ---------- */
.container-px { padding-left: 1.25rem; padding-right: 1.25rem; }
@media (min-width: 640px) { .container-px { padding-left: 2rem; padding-right: 2rem; } }
@media (min-width: 1024px) { .container-px { padding-left: 3rem; padding-right: 3rem; } }

.glass-dark {
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  background: rgba(255,255,255,.14);
  border: 1px solid rgba(255,255,255,.25);
}
.hero-overlay {
  background: linear-gradient(90deg,
    color-mix(in oklab, var(--ink) 70%, transparent),
    color-mix(in oklab, var(--ink) 35%, transparent),
    color-mix(in oklab, var(--ink) 10%, transparent));
}
.shadow-soft { box-shadow: 0 10px 40px -12px color-mix(in oklab, var(--ink) 18%, transparent); }
.shadow-float { box-shadow: 0 30px 80px -30px color-mix(in oklab, var(--ink) 35%, transparent); }
.fade-up { animation: .7s ease-out both fadeUp; }
.no-scrollbar { scrollbar-width: none; }
.no-scrollbar::-webkit-scrollbar { display: none; }
@keyframes fadeUp { 0% { opacity: 0; transform: translateY(16px); } 100% { opacity: 1; transform: none; } }
@keyframes spin { to { transform: rotate(360deg); } }

/* ---------- Layout primitives ---------- */
.relative{position:relative}.absolute{position:absolute}.fixed{position:fixed}.sticky{position:sticky}.static{position:static}
.inset-0{inset:0}.inset-x-0{left:0;right:0}
.top-0{top:0}.top-3{top:.75rem}.top-16{top:4rem}.top-20{top:5rem}.top-28{top:7rem}.top-36{top:9rem}
.bottom-0{bottom:0}.bottom-4{bottom:1rem}.bottom-5{bottom:1.25rem}
.left-3{left:.75rem}.left-4{left:1rem}.right-3{right:.75rem}.right-5{right:1.25rem}
.-bottom-0\.5{bottom:-.125rem}.-mb-px{margin-bottom:-1px}
@media (min-width:768px){.md\:bottom-7{bottom:1.75rem}.md\:right-7{right:1.75rem}.md\:top-20{top:5rem}.md\:top-28{top:7rem}.md\:top-36{top:9rem}}

.z-10{z-index:10}.z-20{z-index:20}.z-30{z-index:30}.z-40{z-index:40}.z-50{z-index:50}

.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}
@media (min-width:640px){.sm\:grid{display:grid}}
@media (min-width:768px){.md\:flex{display:flex}.md\:block{display:block}.md\:grid{display:grid}.md\:inline-flex{display:inline-flex}.md\:hidden{display:none}}
@media (min-width:1024px){.lg\:flex{display:flex}.lg\:block{display:block}.lg\:hidden{display:none}}

.flex-row{flex-direction:row}.flex-col{flex-direction:column}.flex-wrap{flex-wrap:wrap}
.flex-1{flex:1 1 0%}.shrink-0{flex-shrink:0}
@media (min-width:768px){.md\:flex-row{flex-direction:row}}

.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}

.gap-1{gap:.25rem}.gap-1\.5{gap:.375rem}.gap-2{gap:.5rem}.gap-2\.5{gap:.625rem}.gap-3{gap:.75rem}
.gap-4{gap:1rem}.gap-5{gap:1.25rem}.gap-6{gap:1.5rem}.gap-8{gap:2rem}.gap-10{gap:2.5rem}
.gap-x-6{column-gap:1.5rem}.gap-y-2{row-gap:.5rem}
@media (min-width:768px){.md\:gap-0{gap:0}.md\:gap-6{gap:1.5rem}}

.space-y-2 > * + *{margin-top:.5rem}.space-y-2\.5 > * + *{margin-top:.625rem}.space-y-3 > * + *{margin-top:.75rem}.space-y-4 > * + *{margin-top:1rem}

.divide-y > * + *{border-top-width:1px;border-color:var(--border)}
.divide-x > * + *{border-left-width:1px;border-color:var(--border)}
@media (min-width:768px){.md\:divide-x > * + *{border-left-width:1px;border-color:var(--border)}.md\:divide-y-0 > * + *{border-top-width:0}}

/* Grid templates */
.grid-cols-1{grid-template-columns:repeat(1,minmax(0,1fr))}
.grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}
.grid-cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}
.grid-cols-4{grid-template-columns:repeat(4,minmax(0,1fr))}
.grid-cols-5{grid-template-columns:repeat(5,minmax(0,1fr))}
.grid-rows-2{grid-template-rows:repeat(2,minmax(0,1fr))}
.col-span-2{grid-column:span 2 / span 2}
@media (min-width:640px){
  .sm\:grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}
  .sm\:grid-cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media (min-width:768px){
  .md\:grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}
  .md\:grid-cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}
  .md\:grid-cols-4{grid-template-columns:repeat(4,minmax(0,1fr))}
  .md\:grid-cols-5{grid-template-columns:repeat(5,minmax(0,1fr))}
  .md\:col-span-2{grid-column:span 2 / span 2}
  .md\:grid-cols-\[1\.4fr_1fr_1fr_auto\]{grid-template-columns:1.4fr 1fr 1fr auto}
}
@media (min-width:1024px){
  .lg\:grid-cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}
  .lg\:grid-cols-4{grid-template-columns:repeat(4,minmax(0,1fr))}
}

/* ---------- Sizing ---------- */
.w-full{width:100%}.w-fit{width:fit-content}.w-auto{width:auto}
.w-3{width:.75rem}.w-3\.5{width:.875rem}.w-4{width:1rem}.w-5{width:1.25rem}.w-6{width:1.5rem}.w-7{width:1.75rem}.w-8{width:2rem}.w-9{width:2.25rem}.w-10{width:2.5rem}.w-12{width:3rem}.w-14{width:3.5rem}.w-16{width:4rem}.w-20{width:5rem}.w-24{width:6rem}.w-28{width:7rem}.w-32{width:8rem}.w-44{width:11rem}
.h-3{height:.75rem}.h-3\.5{height:.875rem}.h-4{height:1rem}.h-5{height:1.25rem}.h-6{height:1.5rem}.h-7{height:1.75rem}.h-8{height:2rem}.h-9{height:2.25rem}.h-10{height:2.5rem}.h-12{height:3rem}.h-14{height:3.5rem}.h-16{height:4rem}.h-20{height:5rem}.h-24{height:6rem}.h-28{height:7rem}.h-32{height:8rem}.h-40{height:10rem}.h-44{height:11rem}.h-px{height:1px}.h-fit{height:fit-content}.h-full{height:100%}.h-auto{height:auto}
@media (min-width:768px){
  .md\:h-20{height:5rem}.md\:h-auto{height:auto}.md\:w-28{width:7rem}.md\:w-44{width:11rem}.md\:h-28{height:7rem}
}
@media (min-width:640px){.sm\:w-44{width:11rem}.sm\:h-auto{height:auto}}

.min-w-0{min-width:0}
.max-w-md{max-width:28rem}.max-w-sm{max-width:24rem}.max-w-xl{max-width:36rem}.max-w-2xl{max-width:42rem}.max-w-3xl{max-width:48rem}.max-w-6xl{max-width:72rem}.max-w-7xl{max-width:80rem}
.min-h-screen{min-height:100vh}
.min-h-\[88vh\]{min-height:88vh}
.min-h-\[420px\]{min-height:420px}
.min-h-\[480px\]{min-height:480px}
.min-h-\[320px\]{min-height:320px}
.min-h-\[60vh\]{min-height:60vh}
.min-h-\[70vh\]{min-height:70vh}
@media (min-width:768px){.md\:min-h-\[92vh\]{min-height:92vh}}

/* Aspect ratios */
.aspect-square{aspect-ratio:1/1}
.aspect-\[4\/3\]{aspect-ratio:4/3}
.aspect-\[16\/10\]{aspect-ratio:16/10}
.aspect-\[16\/11\]{aspect-ratio:16/11}
.aspect-\[5\/4\]{aspect-ratio:5/4}
.aspect-\[21\/9\]{aspect-ratio:21/9}
@media (min-width:768px){.md\:aspect-auto{aspect-ratio:auto}}

/* ---------- Spacing (margin/padding) ---------- */
.m-0{margin:0}.mx-auto{margin-left:auto;margin-right:auto}.mx-5{margin-left:1.25rem;margin-right:1.25rem}.-mx-5{margin-left:-1.25rem;margin-right:-1.25rem}
.mt-0{margin-top:0}.mt-1{margin-top:.25rem}.mt-2{margin-top:.5rem}.mt-3{margin-top:.75rem}.mt-4{margin-top:1rem}.mt-5{margin-top:1.25rem}.mt-6{margin-top:1.5rem}.mt-7{margin-top:1.75rem}.mt-8{margin-top:2rem}.mt-10{margin-top:2.5rem}.mt-12{margin-top:3rem}.mt-14{margin-top:3.5rem}.mt-16{margin-top:4rem}.mt-20{margin-top:5rem}.mt-24{margin-top:6rem}
.-mt-32{margin-top:-8rem}.-mt-40{margin-top:-10rem}
.mb-1{margin-bottom:.25rem}.mb-2{margin-bottom:.5rem}.mb-3{margin-bottom:.75rem}.mb-4{margin-bottom:1rem}.mb-5{margin-bottom:1.25rem}.mb-6{margin-bottom:1.5rem}.mb-8{margin-bottom:2rem}.mb-14{margin-bottom:3.5rem}
.ml-14{margin-left:3.5rem}
@media (min-width:768px){
  .md\:mt-1{margin-top:.25rem}.md\:mt-2{margin-top:.5rem}.md\:mt-24{margin-top:6rem}.md\:mt-28{margin-top:7rem}.md\:mt-32{margin-top:8rem}
  .md\:-mt-32{margin-top:-8rem}.md\:-mt-40{margin-top:-10rem}
  .md\:pt-36{padding-top:9rem}.md\:pt-40{padding-top:10rem}
}

.p-0{padding:0}.p-1{padding:.25rem}.p-2{padding:.5rem}.p-3{padding:.75rem}.p-4{padding:1rem}.p-5{padding:1.25rem}.p-6{padding:1.5rem}.p-8{padding:2rem}.p-10{padding:2.5rem}.p-12{padding:3rem}.p-16{padding:4rem}
.px-1{padding-left:.25rem;padding-right:.25rem}.px-2{padding-left:.5rem;padding-right:.5rem}.px-2\.5{padding-left:.625rem;padding-right:.625rem}.px-3{padding-left:.75rem;padding-right:.75rem}.px-4{padding-left:1rem;padding-right:1rem}.px-5{padding-left:1.25rem;padding-right:1.25rem}.px-6{padding-left:1.5rem;padding-right:1.5rem}
.py-0\.5{padding-top:.125rem;padding-bottom:.125rem}.py-1{padding-top:.25rem;padding-bottom:.25rem}.py-1\.5{padding-top:.375rem;padding-bottom:.375rem}.py-2{padding-top:.5rem;padding-bottom:.5rem}.py-2\.5{padding-top:.625rem;padding-bottom:.625rem}.py-3{padding-top:.75rem;padding-bottom:.75rem}.py-3\.5{padding-top:.875rem;padding-bottom:.875rem}.py-4{padding-top:1rem;padding-bottom:1rem}.py-5{padding-top:1.25rem;padding-bottom:1.25rem}.py-6{padding-top:1.5rem;padding-bottom:1.5rem}.py-8{padding-top:2rem;padding-bottom:2rem}.py-10{padding-top:2.5rem;padding-bottom:2.5rem}.py-12{padding-top:3rem;padding-bottom:3rem}.py-16{padding-top:4rem;padding-bottom:4rem}.py-20{padding-top:5rem;padding-bottom:5rem}
.pt-1{padding-top:.25rem}.pt-2{padding-top:.5rem}.pt-3{padding-top:.75rem}.pt-4{padding-top:1rem}.pt-8{padding-top:2rem}.pt-10{padding-top:2.5rem}.pt-12{padding-top:3rem}.pt-16{padding-top:4rem}.pt-28{padding-top:7rem}.pt-32{padding-top:8rem}.pt-36{padding-top:9rem}.pt-40{padding-top:10rem}
.pb-2{padding-bottom:.5rem}.pb-12{padding-bottom:3rem}.pb-20{padding-bottom:5rem}.pb-24{padding-bottom:6rem}.pb-44{padding-bottom:11rem}.pb-56{padding-bottom:14rem}
.pl-2{padding-left:.5rem}.pl-4{padding-left:1rem}.pr-4{padding-right:1rem}.pr-5{padding-right:1.25rem}
@media (min-width:768px){
  .md\:p-6{padding:1.5rem}.md\:p-8{padding:2rem}.md\:p-10{padding:2.5rem}.md\:p-12{padding:3rem}.md\:p-16{padding:4rem}
  .md\:px-3{padding-left:.75rem;padding-right:.75rem}
  .md\:py-3{padding-top:.75rem;padding-bottom:.75rem}.md\:py-20{padding-top:5rem;padding-bottom:5rem}
  .md\:pb-56{padding-bottom:14rem}.md\:pt-36{padding-top:9rem}.md\:pt-40{padding-top:10rem}
}

/* ---------- Typography ---------- */
.font-display{font-family:var(--font-display);letter-spacing:-.02em}
.font-sans{font-family:var(--font-sans)}
.font-medium{font-weight:500}.font-semibold{font-weight:600}.font-bold{font-weight:700}
.italic{font-style:italic}

.text-\[11px\]{font-size:11px;line-height:1.4}
.text-xs{font-size:.75rem;line-height:1rem}
.text-sm{font-size:.875rem;line-height:1.25rem}
.text-base{font-size:1rem;line-height:1.5rem}
.text-lg{font-size:1.125rem;line-height:1.75rem}
.text-xl{font-size:1.25rem;line-height:1.75rem}
.text-\[22px\]{font-size:22px;line-height:1.2}
.text-2xl{font-size:1.5rem;line-height:2rem}
.text-3xl{font-size:1.875rem;line-height:2.25rem}
.text-4xl{font-size:2.25rem;line-height:2.5rem}
.text-5xl{font-size:3rem;line-height:1.05}
.text-6xl{font-size:3.75rem;line-height:1.05}
.text-7xl{font-size:4.5rem;line-height:1}
.text-\[88px\]{font-size:88px;line-height:1}
@media (min-width:768px){
  .md\:text-xl{font-size:1.25rem;line-height:1.75rem}
  .md\:text-2xl{font-size:1.5rem;line-height:2rem}
  .md\:text-3xl{font-size:1.875rem;line-height:2.25rem}
  .md\:text-4xl{font-size:2.25rem;line-height:2.5rem}
  .md\:text-5xl{font-size:3rem;line-height:1.05}
  .md\:text-6xl{font-size:3.75rem;line-height:1.05}
  .md\:text-7xl{font-size:4.5rem;line-height:1}
  .md\:text-\[22px\]{font-size:22px;line-height:1.2}
}
@media (min-width:1024px){
  .lg\:text-\[88px\]{font-size:88px;line-height:1}
}

.tracking-tight{letter-spacing:-.025em}
.tracking-wider{letter-spacing:.05em}
.tracking-widest{letter-spacing:.1em}
.tracking-\[0\.5em\]{letter-spacing:.5em}

.leading-none{line-height:1}.leading-\[1\.02\]{line-height:1.02}.leading-tight{line-height:1.1}.leading-snug{line-height:1.3}.leading-normal{line-height:1.5}.leading-relaxed{line-height:1.65}

.uppercase{text-transform:uppercase}
.text-left{text-align:left}.text-center{text-align:center}.text-right{text-align:right}
.truncate{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.line-clamp-2{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.whitespace-nowrap{white-space:nowrap}
.underline{text-decoration:underline}.underline-offset-4{text-underline-offset:4px}

/* ---------- Colors ---------- */
.text-ink{color:var(--ink)}
.text-ink\/70{color:color-mix(in oklab,var(--ink) 70%,transparent)}
.text-ink\/65{color:color-mix(in oklab,var(--ink) 65%,transparent)}
.text-ink\/80{color:color-mix(in oklab,var(--ink) 80%,transparent)}
.text-foreground{color:var(--foreground)}
.text-muted-foreground{color:var(--muted-foreground)}
.text-white{color:#ffffff}
.text-white\/60{color:rgba(255,255,255,.6)}
.text-white\/70{color:rgba(255,255,255,.7)}
.text-white\/80{color:rgba(255,255,255,.8)}
.text-white\/85{color:rgba(255,255,255,.85)}
.text-white\/90{color:rgba(255,255,255,.9)}
.text-cta{color:var(--cta)}
.text-cta-foreground{color:var(--cta-foreground)}
.text-destructive{color:var(--destructive)}

.bg-background{background-color:var(--background)}
.bg-white{background-color:#ffffff}
.bg-white\/95{background-color:rgba(255,255,255,.95)}
.bg-white\/15{background-color:rgba(255,255,255,.15)}
.bg-white\/10{background-color:rgba(255,255,255,.1)}
.bg-white\/20{background-color:rgba(255,255,255,.2)}
.bg-ink{background-color:var(--ink)}
.bg-ink\/90{background-color:color-mix(in oklab,var(--ink) 90%,transparent)}
.bg-muted{background-color:var(--muted)}
.bg-muted\/40{background-color:color-mix(in oklab,var(--muted) 40%,transparent)}
.bg-muted\/50{background-color:color-mix(in oklab,var(--muted) 50%,transparent)}
.bg-cta{background-color:var(--cta)}
.bg-cta\/30{background-color:color-mix(in oklab,var(--cta) 30%,transparent)}
.bg-destructive\/10{background-color:color-mix(in oklab,var(--destructive) 10%,transparent)}
.bg-transparent{background-color:transparent}
.fill-current{fill:currentColor}
.fill-cta{fill:var(--cta)}

/* Gradients */
.bg-gradient-to-t{background-image:linear-gradient(to top,var(--tw-gradient-from,transparent),var(--tw-gradient-via,transparent),var(--tw-gradient-to,transparent))}
.bg-gradient-to-b{background-image:linear-gradient(to bottom,var(--tw-gradient-from,transparent),var(--tw-gradient-via,transparent),var(--tw-gradient-to,transparent))}
.from-ink\/85{--tw-gradient-from:color-mix(in oklab,var(--ink) 85%,transparent)}
.from-ink\/60{--tw-gradient-from:color-mix(in oklab,var(--ink) 60%,transparent)}
.via-ink\/40{--tw-gradient-via:color-mix(in oklab,var(--ink) 40%,transparent)}
.to-transparent{--tw-gradient-to:transparent}
.from-transparent{--tw-gradient-from:transparent}
.to-background{--tw-gradient-to:var(--background)}

/* ---------- Borders / Radius ---------- */
.border{border-width:1px;border-color:var(--border);border-style:solid}
.border-t{border-top-width:1px;border-color:var(--border);border-style:solid}
.border-b{border-bottom-width:1px;border-color:var(--border);border-style:solid}
.border-2{border-width:2px;border-color:var(--border);border-style:solid}
.border-b-2{border-bottom-width:2px;border-style:solid}
.border-transparent{border-color:transparent}
.border-border{border-color:var(--border)}
.border-border\/60{border-color:color-mix(in oklab,var(--border) 60%,transparent)}
.border-ink{border-color:var(--ink)}
.border-input{border-color:var(--input)}
.border-cta{border-color:var(--cta)}
.border-white{border-color:#ffffff}
.border-white\/10{border-color:rgba(255,255,255,.1)}
.border-white\/15{border-color:rgba(255,255,255,.15)}
.border-white\/30{border-color:rgba(255,255,255,.3)}

.rounded-md{border-radius:.375rem}
.rounded-lg{border-radius:.5rem}
.rounded-xl{border-radius:.75rem}
.rounded-2xl{border-radius:1rem}
.rounded-3xl{border-radius:1.5rem}
.rounded-full{border-radius:9999px}
@media (min-width:768px){.md\:rounded-none{border-radius:0}}

.ring-1{box-shadow:0 0 0 1px var(--border)}
.ring-border{--ring-color:var(--border)}

/* ---------- Effects ---------- */
.overflow-hidden{overflow:hidden}.overflow-x-auto{overflow-x:auto}
.object-cover{object-fit:cover}
.opacity-30{opacity:.3}.opacity-60{opacity:.6}.opacity-95{opacity:.95}
.cursor-text{cursor:text}.cursor-pointer{cursor:pointer}
.select-none{user-select:none}

.backdrop-blur{-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}

.transition-all{transition:all .2s cubic-bezier(.4,0,.2,1)}
.transition-colors{transition:color .15s,background-color .15s,border-color .15s}
.transition-transform{transition:transform .25s cubic-bezier(.4,0,.2,1)}
.duration-300{transition-duration:.3s}
.duration-500{transition-duration:.5s}
.duration-700{transition-duration:.7s}

.scale-105{transform:scale(1.05)}.scale-110{transform:scale(1.1)}
.rotate-180{transform:rotate(180deg)}

/* ---------- Hover / focus ---------- */
.hover\:underline:hover{text-decoration:underline}
.hover\:opacity-95:hover{opacity:.95}
.hover\:scale-105:hover{transform:scale(1.05)}
.hover\:scale-110:hover{transform:scale(1.1)}
.hover\:bg-ink\/90:hover{background-color:color-mix(in oklab,var(--ink) 90%,transparent)}
.hover\:bg-white\/20:hover{background-color:rgba(255,255,255,.2)}
.hover\:text-ink:hover{color:var(--ink)}
.hover\:text-ink\/70:hover{color:color-mix(in oklab,var(--ink) 70%,transparent)}
.hover\:text-white:hover{color:#ffffff}
.hover\:text-white\/80:hover{color:rgba(255,255,255,.8)}
.hover\:border-ink:hover{border-color:var(--ink)}
.hover\:shadow-soft:hover{box-shadow:0 10px 40px -12px color-mix(in oklab,var(--ink) 18%,transparent)}

.group:hover .group-hover\:scale-105{transform:scale(1.05)}
.group:hover .group-hover\:scale-110{transform:scale(1.1)}
.group:hover .group-hover\:underline{text-decoration:underline}
.group:hover .group-hover\:ring-ink{box-shadow:0 0 0 1px var(--ink)}

.focus\:outline-none:focus{outline:2px solid transparent;outline-offset:2px}
.focus\:ring-2:focus{box-shadow:0 0 0 2px color-mix(in oklab,var(--ink) 30%,transparent)}
.focus-within\:bg-muted\/40:focus-within{background-color:color-mix(in oklab,var(--muted) 40%,transparent)}

.placeholder\:text-white\/50::placeholder{color:rgba(255,255,255,.5)}
.placeholder\:text-ink\/40::placeholder{color:color-mix(in oklab,var(--ink) 40%,transparent)}

.disabled\:opacity-30:disabled{opacity:.3}

/* ---------- Misc helpers ---------- */
.shadow-md{box-shadow:0 4px 6px -1px rgba(0,0,0,.1),0 2px 4px -2px rgba(0,0,0,.1)}
.shadow-lg{box-shadow:0 10px 15px -3px rgba(0,0,0,.1),0 4px 6px -4px rgba(0,0,0,.1)}

/* Inline icon */
.icon{width:1em;height:1em;flex-shrink:0;display:inline-block;vertical-align:-.125em}

/* OTP input style helper (accessibility — replaces letter-spacing custom) */
input.otp-input{font-size:1.6rem;letter-spacing:.5em;text-align:center;font-family:ui-monospace,SFMono-Regular,Menlo,monospace}

/* Status pill */
.pill{display:inline-block;padding:.125rem .625rem;border-radius:9999px;font-size:.7rem;font-weight:600;text-transform:uppercase;letter-spacing:.08em}
.pill-pending{background:#fef3c7;color:#92400e}
.pill-confirmed{background:#dcfce7;color:#166534}
.pill-cancelled{background:#fee2e2;color:#991b1b}
.pill-completed{background:#e0e7ff;color:#3730a3}

/* Alert blocks (Django messages) */
.alert{padding:.75rem 1rem;border-radius:.5rem;font-size:.9rem;border:1px solid transparent}
.alert + .alert{margin-top:.5rem}
.alert-success{background:#f0fdf4;color:#15803d;border-color:#bbf7d0}
.alert-error,.alert-danger{background:#fef2f2;color:var(--destructive);border-color:#fecaca}
.alert-info{background:#eff6ff;color:#1e40af;border-color:#bfdbfe}
.alert-warning{background:#fefce8;color:#a16207;border-color:#fef08a}

/* Form errors */
.field-error{font-size:.75rem;color:var(--destructive);margin-top:.25rem}

/* Field reset for native widgets */
input[type="text"],input[type="email"],input[type="password"],input[type="tel"],input[type="number"],input[type="date"],input[type="search"],select,textarea{
  width:100%;background:color-mix(in oklab, var(--muted) 50%, transparent);
  border-radius:.75rem;padding:.625rem 1rem;color:var(--ink);
  border:0;
}
input[type="text"]:focus,input[type="email"]:focus,input[type="password"]:focus,input[type="tel"]:focus,input[type="number"]:focus,input[type="date"]:focus,input[type="search"]:focus,select:focus,textarea:focus{
  outline:none;box-shadow:0 0 0 2px color-mix(in oklab,var(--ink) 30%,transparent);
}

/* ---------- Specific component helpers ---------- */
/* Dest scroll snap */
.snap-x { scroll-snap-type: x mandatory; }
.snap-start { scroll-snap-align: start; }

/* Footer link col */
.footer-col-link{color:rgba(255,255,255,.7);font-size:.875rem;display:block;padding:.125rem 0;transition:color .15s}
.footer-col-link:hover{color:#ffffff}

/* For dynamic borders / dividers in white-bg sections */
.border-divide > * + *{border-top:1px solid var(--border)}

/* ============================================================
   Backfill: utility classes referenced by templates that the
   first pass missed. Added here so we don't have to edit dozens
   of templates.
   ============================================================ */

/* line-height arbitrary values used in big serif headlines */
.leading-\[1\.02\]{line-height:1.02}
.leading-\[1\.05\]{line-height:1.05}

/* misc spacing */
.gap-0\.5{gap:.125rem}
.mt-0\.5{margin-top:.125rem}
.pb-5{padding-bottom:1.25rem}
.pb-16{padding-bottom:4rem}
.pt-24{padding-top:6rem}
.pr-1{padding-right:.25rem}

/* scroll/overflow on the planner catalog */
.overflow-y-auto{overflow-y:auto}
.max-h-\[600px\]{max-height:600px}

/* sizing & layout */
.max-w-4xl{max-width:56rem}
@media(min-width:1024px){.lg\:col-span-2{grid-column:span 2 / span 2}}
.md\:divide-border > * + *{border-color:var(--border)}
@media(min-width:768px){
  .md\:p-4{padding:1rem}
  .md\:pt-28{padding-top:7rem}
  .md\:sticky{position:sticky}
  .md\:text-left{text-align:left}
  .md\:text-sm{font-size:.875rem;line-height:1.25rem}
}

/* opacity */
.opacity-70{opacity:.7}

/* generic transition (no-arg form Tailwind ships) */
.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(.4,0,.2,1);transition-duration:.15s}

/* ink text variants used in icons / quote glyph */
.text-ink\/20{color:color-mix(in oklab,var(--ink) 20%,transparent)}

/* vertical rhythm helpers */
.space-y-1 > * + *{margin-top:.25rem}
.space-y-6 > * + *{margin-top:1.5rem}
.space-y-8 > * + *{margin-top:2rem}

/* hover on drawer close + similar */
.hover\:bg-muted:hover{background-color:var(--muted)}


/* ===========================================================
   Component states (navbar transparent vs solid)
   =========================================================== */

/* Default state: navbar is transparent (over hero on home page).
   Brand mark = white-on-glass; text = white. */
header[data-navbar] .brand-mark{background:rgba(255,255,255,.15);color:#ffffff;border:1px solid rgba(255,255,255,.3)}
header[data-navbar] .brand-name{color:#ffffff}
header[data-navbar] .nav-link{color:rgba(255,255,255,.85)}
header[data-navbar] .nav-link:hover{color:#ffffff}
header[data-navbar] .nav-link.is-active{color:#ffffff}
header[data-navbar] .nav-link .nav-underline{background:#ffffff;bottom:-2px;height:2px}
header[data-navbar] .nav-toggle-btn{color:#ffffff}

/* Solid state: scrolled, or any non-home page */
header[data-navbar].navbar-solid{background:rgba(255,255,255,.95);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);box-shadow:0 1px 0 0 rgba(18,45,50,.06)}
header[data-navbar].navbar-solid .brand-mark{background:var(--ink);color:#ffffff;border:0}
header[data-navbar].navbar-solid .brand-name{color:var(--ink)}
header[data-navbar].navbar-solid .nav-link{color:color-mix(in oklab,var(--ink) 65%,transparent)}
header[data-navbar].navbar-solid .nav-link:hover{color:var(--ink)}
header[data-navbar].navbar-solid .nav-link.is-active{color:var(--ink)}
header[data-navbar].navbar-solid .nav-link .nav-underline{background:var(--ink);bottom:-2px;height:2px}
header[data-navbar].navbar-solid .nav-toggle-btn{color:var(--ink)}

/* Reusable nav-link hover for non-themed contexts */
.nav-link.is-active{font-weight:600}