/* ============================================================
   Components — buttons, cards, sections, nav, footer,
   language switcher, cookie consent, page hero, FAQ
   ============================================================ */

/* ------------------------------------------------------------
   Text + dividers
   ------------------------------------------------------------ */

.eyebrow {
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: 0.75rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--color-accent);
}

.eyebrow--light  { color: oklch(1 0 0 / 0.85); }
.eyebrow--amber  { color: var(--color-amber-timber); }
.eyebrow--forest { color: var(--color-forest-deep); }

.amber-divider {
  display: block;
  width: 56px;
  height: 1px;
  background: var(--color-accent);
  margin: 1rem 0 1.25rem;
}

.amber-divider--centered { margin-inline: auto; }
.amber-divider--forest   { background: var(--color-forest-deep); }

.pre-line { white-space: pre-line; }

/* ------------------------------------------------------------
   Buttons
   ------------------------------------------------------------ */

.btn-amber {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  background: var(--color-accent);
  color: oklch(1 0 0);
  padding: 0.85rem 1.6rem;
  font-weight: 600;
  font-size: 0.9rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  border-radius: var(--radius-md);
  -webkit-transition: background 200ms ease, -webkit-transform 200ms ease;
  transition: background 200ms ease, -webkit-transform 200ms ease;
  transition: background 200ms ease, transform 200ms ease;
  transition: background 200ms ease, transform 200ms ease, -webkit-transform 200ms ease;
}

.btn-amber:hover { background: oklch(0.62 0.13 70); }

.btn-ghost-dark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  background: transparent;
  color: oklch(1 0 0);
  border: 1px solid oklch(1 0 0 / 0.5);
  padding: 0.85rem 1.6rem;
  font-weight: 600;
  font-size: 0.9rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  border-radius: var(--radius-md);
  -webkit-transition: background 200ms ease, border-color 200ms ease;
  transition: background 200ms ease, border-color 200ms ease;
}

.btn-ghost-dark:hover { background: oklch(1 0 0 / 0.08); border-color: oklch(1 0 0); }

.btn-outline-forest {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  background: transparent;
  color: var(--color-primary);
  border: 1px solid var(--color-primary);
  padding: 0.85rem 1.6rem;
  font-weight: 600;
  font-size: 0.9rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  border-radius: var(--radius-md);
  -webkit-transition: background 200ms ease, color 200ms ease;
  transition: background 200ms ease, color 200ms ease;
}

.btn-outline-forest:hover { background: var(--color-primary); color: oklch(1 0 0); }

/* Arrow nudge inside any button/link marked as a group */
.btn-amber .icon-arrow,
.link-cta .icon-arrow {
  -webkit-transition: -webkit-transform 200ms ease;
  transition: -webkit-transform 200ms ease;
  transition: transform 200ms ease;
  transition: transform 200ms ease, -webkit-transform 200ms ease;
}

.btn-amber:hover .icon-arrow,
.link-cta:hover .icon-arrow {
  -webkit-transform: translateX(4px);
          transform: translateX(4px);
}

/* Compact UI buttons (cookie consent — ported from the shadcn Button) */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  height: 2.25rem;
  padding: 0 0.75rem;
  font-size: 0.875rem;
  font-weight: 500;
  white-space: nowrap;
  border-radius: calc(var(--radius) + 2px);
  background: var(--color-primary);
  color: var(--color-primary-foreground);
  -webkit-transition: background-color 150ms ease, color 150ms ease, border-color 150ms ease;
  transition: background-color 150ms ease, color 150ms ease, border-color 150ms ease;
}

.btn:hover { background: color-mix(in oklab, var(--color-primary) 90%, transparent); }

.btn--outline {
  background: var(--color-background);
  color: var(--color-foreground);
  border: 1px solid var(--color-input);
}

.btn--outline:hover {
  background: var(--color-accent);
  color: var(--color-accent-foreground);
  border-color: var(--color-accent);
}

/* Icon sizing helpers */
.icon-16 { width: 1rem; height: 1rem; }
.icon-20 { width: 1.25rem; height: 1.25rem; }
.icon-24 { width: 1.5rem; height: 1.5rem; }
.icon-28 { width: 1.75rem; height: 1.75rem; }

/* Uppercase text CTA with trailing arrow (dark sections) */
.link-cta {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  color: var(--color-amber-timber);
  font-weight: 600;
  font-size: 0.875rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.link-cta:hover { text-decoration: underline; }

.link-underline {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  color: var(--color-amber-timber);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: 0.78rem;
}

.link-underline::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -4px;
  height: 1px;
  background: currentColor;
  -webkit-transform: scaleX(1);
          transform: scaleX(1);
  -webkit-transform-origin: right;
          transform-origin: right;
  -webkit-transition: -webkit-transform 500ms var(--ease-gth);
  transition: -webkit-transform 500ms var(--ease-gth);
  transition: transform 500ms var(--ease-gth);
  transition: transform 500ms var(--ease-gth), -webkit-transform 500ms var(--ease-gth);
}

.link-underline:hover::after { -webkit-transform: scaleX(0); transform: scaleX(0); -webkit-transform-origin: left; transform-origin: left; }
.link-underline svg { -webkit-transition: -webkit-transform 300ms ease; transition: -webkit-transform 300ms ease; transition: transform 300ms ease; transition: transform 300ms ease, -webkit-transform 300ms ease; }
.link-underline:hover svg { -webkit-transform: translateX(4px); transform: translateX(4px); }

/* ------------------------------------------------------------
   Cards + image frames
   ------------------------------------------------------------ */

.card-warm {
  background: oklch(1 0 0);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  -webkit-box-shadow: var(--shadow-warm);
          box-shadow: var(--shadow-warm);
  position: relative;
  overflow: hidden;
  -webkit-transition: border-color 280ms ease, -webkit-transform 380ms var(--ease-gth), -webkit-box-shadow 380ms ease;
  transition: border-color 280ms ease, -webkit-transform 380ms var(--ease-gth), -webkit-box-shadow 380ms ease;
  transition: transform 380ms var(--ease-gth), box-shadow 380ms ease, border-color 280ms ease;
  transition: transform 380ms var(--ease-gth), box-shadow 380ms ease, border-color 280ms ease, -webkit-transform 380ms var(--ease-gth), -webkit-box-shadow 380ms ease;
}

.card-warm:hover {
  -webkit-transform: translateY(-4px);
          transform: translateY(-4px);
  border-color: color-mix(in oklab, var(--color-amber-timber) 45%, var(--color-border));
  -webkit-box-shadow: 0 2px 4px oklch(0.34 0.06 153 / 0.06), 0 22px 50px -18px oklch(0.34 0.06 153 / 0.28);
          box-shadow: 0 2px 4px oklch(0.34 0.06 153 / 0.06), 0 22px 50px -18px oklch(0.34 0.06 153 / 0.28);
}

.card-warm::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 2px;
  background: -webkit-gradient(linear, left top, right top, from(var(--color-amber-timber)), to(transparent));
  background: linear-gradient(90deg, var(--color-amber-timber), transparent);
  -webkit-transform: scaleX(0);
          transform: scaleX(0);
  -webkit-transform-origin: left;
          transform-origin: left;
  -webkit-transition: -webkit-transform 500ms var(--ease-gth);
  transition: -webkit-transform 500ms var(--ease-gth);
  transition: transform 500ms var(--ease-gth);
  transition: transform 500ms var(--ease-gth), -webkit-transform 500ms var(--ease-gth);
}

.card-warm:hover::after { -webkit-transform: scaleX(1); transform: scaleX(1); }

.img-frame {
  position: relative;
  overflow: hidden;
  border-radius: var(--radius-sm);
}

.img-frame::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  border: 1px solid oklch(1 0 0 / 0.15);
  mix-blend-mode: overlay;
}

.img-frame img { -webkit-transition: -webkit-transform 1200ms var(--ease-gth); transition: -webkit-transform 1200ms var(--ease-gth); transition: transform 1200ms var(--ease-gth); transition: transform 1200ms var(--ease-gth), -webkit-transform 1200ms var(--ease-gth); }
.img-frame:hover img { -webkit-transform: scale(1.04); transform: scale(1.04); }

/* Image that zooms when its parent card/link is hovered */
.zoom-media {
  overflow: hidden;
  border-radius: var(--radius-sm);
}

.zoom-media img {
  width: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  -webkit-transition: -webkit-transform 700ms ease;
  transition: -webkit-transform 700ms ease;
  transition: transform 700ms ease;
  transition: transform 700ms ease, -webkit-transform 700ms ease;
}

a:hover > .zoom-media img,
a:hover .zoom-media img {
  -webkit-transform: scale(1.05);
          transform: scale(1.05);
}

/* ------------------------------------------------------------
   Section shells
   ------------------------------------------------------------ */

.section-dark {
  background: var(--color-forest-deep);
  color: oklch(0.96 0.01 80);
  position: relative;
  overflow: hidden;
}

.section-dark h1,
.section-dark h2,
.section-dark h3 { color: oklch(0.98 0.005 80); }

.section-dark::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    repeating-linear-gradient(90deg, oklch(1 0 0 / 0.02) 0 1px, transparent 1px 6px),
    repeating-linear-gradient(180deg, oklch(1 0 0 / 0.015) 0 1px, transparent 1px 11px);
  pointer-events: none;
}

.section-forest {
  background: var(--color-forest);
  color: oklch(0.96 0.01 80);
}

.section-forest h1,
.section-forest h2,
.section-forest h3 { color: oklch(0.98 0.005 80); }

.section-amber {
  background: var(--color-amber-timber);
  color: oklch(0.2 0 0);
}

/* Vertical rhythm applied per page section */
.section { padding-block: 6rem; }

.section--white { background: oklch(1 0 0); }
.section--cream { background: var(--color-cream); }

.section--compact  { padding-block: 5rem; }
.section--closing  { padding-block: 5rem; }

@media (min-width: 768px) {
  .section          { padding-block: 8rem; }
  .section--compact { padding-block: 7rem; }
  .section--closing { padding-block: 5rem; }
}

/* Eyebrow + title + divider block that opens most sections */
.section-header h2 { margin-top: 0.75rem; }

/* Two-column layouts */
.split-grid {
  display: -ms-grid;
  display: grid;
  gap: 4rem;
}

@media (min-width: 1024px) {
  .split-grid          { -ms-grid-columns: 1fr 1.2fr; grid-template-columns: 1fr 1.2fr; }
  .split-grid--even    { -ms-grid-columns: 1fr 1fr; grid-template-columns: 1fr 1fr; }
}

/* Card grids */
.card-grid {
  display: -ms-grid;
  display: grid;
  gap: 1.5rem;
  margin-top: 3rem;
}

@media (min-width: 768px) {
  .card-grid--2 { -ms-grid-columns: (1fr)[2]; grid-template-columns: repeat(2, 1fr); }
  .card-grid--3 { -ms-grid-columns: (1fr)[3]; grid-template-columns: repeat(3, 1fr); }
  .card-grid--4 { -ms-grid-columns: (1fr)[2]; grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 1024px) {
  .card-grid--4 { -ms-grid-columns: (1fr)[4]; grid-template-columns: repeat(4, 1fr); }
}

/* Icon cards used on home, buyers, sellers, how-it-works */
.feature-card { padding: 1.75rem; height: 100%; }
.feature-card--roomy { padding: 2rem; }

.feature-card .icon {
  width: 1.75rem;
  height: 1.75rem;
  color: var(--color-amber-timber);
}

.feature-card h3 {
  margin-top: 1.25rem;
  font-family: var(--font-serif);
}

.feature-card p {
  margin-top: 0.75rem;
  color: var(--color-muted-foreground);
  line-height: 1.625;
}

/* Body copy blocks */
.prose-gth p { color: var(--color-foreground); font-size: 1.05rem; }
.prose-gth p + p { margin-top: 1rem; }

.prose-gth--tight p {
  white-space: pre-line;
  line-height: 1.6;
  margin-block: 0.75rem;
}

.prose-gth a { color: var(--color-amber-timber); text-decoration: underline; }

.prose-subheading {
  margin-top: 1.75rem;
  margin-bottom: 0.25rem;
  font-family: var(--font-serif);
  font-size: 1.375rem;
  color: var(--color-foreground);
}

.prose-subheading:first-child { margin-top: 0; }

.prose-gth .bullet-list {
  margin-top: 0.5rem;
  margin-bottom: 1rem;
  display: -ms-grid;
  display: grid;
  gap: 0.5rem 1.5rem;
}

@media (min-width: 640px) {
  .prose-gth .bullet-list { -ms-grid-columns: (1fr)[2]; grid-template-columns: repeat(2, 1fr); }
}

.prose-gth .bullet-list li {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  color: var(--color-foreground);
}

.prose-gth .bullet-list li::before {
  content: "";
  margin-top: 0.5rem;
  display: block;
  width: 0.375rem;
  height: 0.375rem;
  flex-shrink: 0;
  border-radius: 9999px;
  background: var(--color-amber-timber);
}

/* Disc lists inside legal/article copy */
.disc-list {
  list-style: disc;
  padding-left: 1.5rem;
  display: -ms-grid;
  display: grid;
  gap: 0.5rem;
}

/* Decorative overlays */
.grain-overlay {
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0.18;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0 0 0 0.6 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
}

.blueprint-grid {
  background-image:
    linear-gradient(to right, oklch(0.68 0.13 70 / 0.07) 1px, transparent 1px),
    linear-gradient(to bottom, oklch(0.68 0.13 70 / 0.07) 1px, transparent 1px);
  background-size: 64px 64px;
  mask-image: radial-gradient(ellipse at 30% 50%, black 30%, transparent 80%);
  -webkit-mask-image: radial-gradient(ellipse at 30% 50%, black 30%, transparent 80%);
}

/* Stat block hover/reveal */
.stat-block {
  position: relative;
  padding: 1.75rem 1.5rem 1.75rem;
  -webkit-transition: -webkit-transform 500ms var(--ease-gth);
  transition: -webkit-transform 500ms var(--ease-gth);
  transition: transform 500ms var(--ease-gth);
  transition: transform 500ms var(--ease-gth), -webkit-transform 500ms var(--ease-gth);
}

.stat-block::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 0;
  height: 2px;
  background: var(--color-forest-deep);
  -webkit-transition: width 1.4s var(--ease-gth) 0.2s;
  transition: width 1.4s var(--ease-gth) 0.2s;
}

.stat-block.in::before { width: 100%; }
.stat-block:hover { -webkit-transform: translateY(-4px); transform: translateY(-4px); }

/* ------------------------------------------------------------
   Site header / navigation
   ------------------------------------------------------------ */

.site-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
  padding: 0;
  -webkit-transition: padding 500ms var(--ease-gth);
  transition: padding 500ms var(--ease-gth);
}

.site-header__shell {
  margin-inline: auto;
  max-width: none;
  overflow: hidden;
  border-radius: 0;
  border-bottom: 1px solid transparent;
  -webkit-transition:
    max-width 500ms var(--ease-gth),
    background-color 500ms var(--ease-gth),
    border-color 500ms var(--ease-gth),
    border-radius 500ms var(--ease-gth),
    -webkit-box-shadow 500ms var(--ease-gth);
  transition:
    max-width 500ms var(--ease-gth),
    background-color 500ms var(--ease-gth),
    border-color 500ms var(--ease-gth),
    border-radius 500ms var(--ease-gth),
    -webkit-box-shadow 500ms var(--ease-gth);
  transition:
    max-width 500ms var(--ease-gth),
    background-color 500ms var(--ease-gth),
    box-shadow 500ms var(--ease-gth),
    border-color 500ms var(--ease-gth),
    border-radius 500ms var(--ease-gth);
  transition:
    max-width 500ms var(--ease-gth),
    background-color 500ms var(--ease-gth),
    box-shadow 500ms var(--ease-gth),
    border-color 500ms var(--ease-gth),
    border-radius 500ms var(--ease-gth),
    -webkit-box-shadow 500ms var(--ease-gth);
}

/* Solid variant (non-hero pages) shows the deep-forest bar at the top */
.site-header--solid .site-header__shell {
  background: color-mix(in oklab, var(--color-forest-deep) 95%, transparent);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

.site-header--transparent .site-header__shell {
  background: transparent;
}

/* Scrolled: the bar condenses into a floating card */
.site-header.is-scrolled {
  padding: 0.75rem 0.75rem 0;
}

.site-header.is-scrolled .site-header__shell {
  max-width: 72rem;
  background: var(--color-card);
  -webkit-box-shadow: var(--shadow-warm);
          box-shadow: var(--shadow-warm);
  border: 1px solid var(--color-border);
  border-radius: 9999px;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

.site-header.is-scrolled.is-open .site-header__shell {
  border-radius: 1.5rem;
}

@media (min-width: 768px) {
  .site-header.is-scrolled { padding: 1rem 1.5rem 0; }
}

.site-header__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  height: 5rem;
  padding-inline: 1rem;
  max-width: 1200px;
  margin-inline: auto;
  width: 100%;
  -webkit-transition: height 500ms var(--ease-gth), padding 500ms var(--ease-gth);
  transition: height 500ms var(--ease-gth), padding 500ms var(--ease-gth);
}

@media (min-width: 768px) {
  .site-header__bar { height: 7rem; padding-inline: 2.5rem; }
}

.site-header.is-scrolled .site-header__bar {
  height: 3.5rem;
  padding-inline: 0.75rem;
  max-width: none;
}

@media (min-width: 768px) {
  .site-header.is-scrolled .site-header__bar {
    height: 4rem;
    padding-inline: 1.5rem;
  }
}

/* Brand */
.brand {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  min-width: 0;
  flex: 1;
}

@media (min-width: 768px)  { .brand { gap: 1rem; } }
@media (min-width: 1024px) { .brand { flex: none; } }

.brand__logo {
  width: 4rem;
  height: 4rem;
  -o-object-fit: contain;
     object-fit: contain;
  flex-shrink: 0;
  -webkit-filter: brightness(0) invert(1);
          filter: brightness(0) invert(1);
  -webkit-transition: width 500ms var(--ease-gth), height 500ms var(--ease-gth), -webkit-filter 500ms var(--ease-gth);
  transition: width 500ms var(--ease-gth), height 500ms var(--ease-gth), -webkit-filter 500ms var(--ease-gth);
  transition: width 500ms var(--ease-gth), height 500ms var(--ease-gth), filter 500ms var(--ease-gth);
  transition: width 500ms var(--ease-gth), height 500ms var(--ease-gth), filter 500ms var(--ease-gth), -webkit-filter 500ms var(--ease-gth);
}

@media (min-width: 768px) {
  .brand__logo { width: 8rem; height: 8rem; }
}

.site-header.is-scrolled .brand__logo {
  width: 3.5rem;
  height: 3.5rem;
  -webkit-filter: none;
          filter: none;
}

@media (min-width: 768px) {
  .site-header.is-scrolled .brand__logo { width: 6rem; height: 6rem; }
}

.brand__name {
  display: none;
  font-family: var(--font-serif);
  letter-spacing: -0.025em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
  font-size: 1rem;
  color: oklch(1 0 0);
  -webkit-transition: color 500ms var(--ease-gth), font-size 500ms var(--ease-gth);
  transition: color 500ms var(--ease-gth), font-size 500ms var(--ease-gth);
}

@media (min-width: 640px)  { .brand__name { display: inline; } }
@media (min-width: 768px)  { .brand__name { font-size: 1.5rem; } }
@media (min-width: 1280px) { .brand__name { font-size: 1.875rem; } }

.site-header.is-scrolled .brand__name {
  color: var(--color-primary);
  font-size: 0.875rem;
}

@media (min-width: 768px) {
  .site-header.is-scrolled .brand__name { font-size: 1.125rem; }
}

@media (min-width: 1280px) {
  .site-header.is-scrolled .brand__name { font-size: 1.25rem; }
}

/* Desktop links */
.site-nav {
  display: none;
  align-items: center;
  gap: 0.25rem;
}

@media (min-width: 1024px) {
  .site-nav { display: flex; }
}

.site-nav__link {
  position: relative;
  font-size: 0.875rem;
  padding: 0.5rem 0.625rem;
  border-radius: var(--radius-sm);
  white-space: nowrap;
  color: oklch(1 0 0 / 0.8);
  -webkit-transition: color 300ms ease;
  transition: color 300ms ease;
}

@media (min-width: 1280px) {
  .site-nav__link { padding-inline: 0.75rem; }
}

.site-nav__link:hover { color: oklch(1 0 0); }

.site-nav__link[aria-current="page"] { color: var(--color-amber-timber); }

.site-header.is-scrolled .site-nav__link { color: var(--color-muted-foreground); }
.site-header.is-scrolled .site-nav__link:hover { color: var(--color-amber-timber); }
.site-header.is-scrolled .site-nav__link[aria-current="page"] { color: var(--color-amber-timber); }

.site-nav__link::after {
  content: "";
  position: absolute;
  left: 0.75rem;
  right: 0.75rem;
  bottom: -0.125rem;
  height: 2px;
  background: var(--color-amber-timber);
  -webkit-transform: scaleX(0);
          transform: scaleX(0);
  -webkit-transform-origin: left;
          transform-origin: left;
  -webkit-transition: -webkit-transform 300ms ease;
  transition: -webkit-transform 300ms ease;
  transition: transform 300ms ease;
  transition: transform 300ms ease, -webkit-transform 300ms ease;
}

.site-nav__link[aria-current="page"]::after { -webkit-transform: scaleX(1); transform: scaleX(1); }

.site-nav .lang-switcher { margin-left: 0.5rem; }

.site-nav__cta {
  margin-left: 0.5rem;
  white-space: nowrap;
  padding-block: 0.625rem;
  font-size: 0.75rem;
  -webkit-transition: background 200ms ease, padding 500ms var(--ease-gth), font-size 500ms var(--ease-gth);
  transition: background 200ms ease, padding 500ms var(--ease-gth), font-size 500ms var(--ease-gth);
}

.site-header.is-scrolled .site-nav__cta {
  padding-block: 0.5rem;
  font-size: 11px;
}

/* Mobile controls */
.site-header__mobile-controls {
  display: flex;
  align-items: center;
  gap: 0.375rem;
  flex-shrink: 0;
}

@media (min-width: 1024px) {
  .site-header__mobile-controls { display: none; }
}

.menu-toggle {
  position: relative;
  width: 2.25rem;
  height: 2.25rem;
  flex-shrink: 0;
  display: -ms-grid;
  display: grid;
  place-items: center;
  border-radius: 9999px;
  border: 1px solid oklch(1 0 0 / 0.15);
  background: oklch(1 0 0 / 0.05);
  color: oklch(1 0 0);
  -webkit-transition: color 500ms ease, background-color 500ms ease, border-color 500ms ease;
  transition: color 500ms ease, background-color 500ms ease, border-color 500ms ease;
}

.menu-toggle:hover { background: oklch(1 0 0 / 0.1); }

.site-header.is-scrolled .menu-toggle {
  border-color: var(--color-border);
  background: transparent;
  color: var(--color-primary);
}

.site-header.is-scrolled .menu-toggle:hover { background: var(--color-muted); }

.menu-toggle__icon {
  position: absolute;
  display: -ms-grid;
  display: grid;
  place-items: center;
  -webkit-transition: opacity 300ms ease, -webkit-transform 300ms ease;
  transition: opacity 300ms ease, -webkit-transform 300ms ease;
  transition: transform 300ms ease, opacity 300ms ease;
  transition: transform 300ms ease, opacity 300ms ease, -webkit-transform 300ms ease;
}

.menu-toggle__icon svg { width: 1.25rem; height: 1.25rem; }

.menu-toggle__icon--menu  { -webkit-transform: rotate(0); transform: rotate(0); opacity: 1; }
.menu-toggle__icon--close { -webkit-transform: rotate(-90deg); transform: rotate(-90deg); opacity: 0; }

.site-header.is-open .menu-toggle__icon--menu  { -webkit-transform: rotate(90deg); transform: rotate(90deg); opacity: 0; }
.site-header.is-open .menu-toggle__icon--close { -webkit-transform: rotate(0); transform: rotate(0); opacity: 1; }

/* Mobile sheet */
.mobile-menu {
  overflow: hidden;
  max-height: 0;
  opacity: 0;
  -webkit-transition: max-height 500ms ease-out, opacity 500ms ease-out;
  transition: max-height 500ms ease-out, opacity 500ms ease-out;
}

@media (min-width: 1024px) {
  .mobile-menu { display: none; }
}

.site-header.is-open .mobile-menu {
  max-height: 80vh;
  opacity: 1;
}

.site-header--transparent:not(.is-scrolled) .mobile-menu,
.site-header--solid:not(.is-scrolled) .mobile-menu {
  background: var(--color-forest-deep);
  border-top: 1px solid oklch(1 0 0 / 0.1);
}

.mobile-menu__inner {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  padding-block: 1.5rem;
}

.site-header.is-scrolled .mobile-menu__inner { padding-inline: 1.5rem; }

.mobile-menu__link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-block: 0.75rem;
  border-bottom: 1px solid oklch(1 0 0 / 0.05);
  color: oklch(1 0 0 / 0.85);
  -webkit-transform: translateY(0.5rem);
          transform: translateY(0.5rem);
  opacity: 0;
  -webkit-transition: opacity 500ms var(--ease-gth), color 300ms ease, -webkit-transform 500ms var(--ease-gth);
  transition: opacity 500ms var(--ease-gth), color 300ms ease, -webkit-transform 500ms var(--ease-gth);
  transition: transform 500ms var(--ease-gth), opacity 500ms var(--ease-gth), color 300ms ease;
  transition: transform 500ms var(--ease-gth), opacity 500ms var(--ease-gth), color 300ms ease, -webkit-transform 500ms var(--ease-gth);
}

.site-header.is-scrolled .mobile-menu__link {
  border-bottom-color: var(--color-border);
  color: var(--color-foreground);
}

.mobile-menu__link[aria-current="page"] { color: var(--color-amber-timber); }

.site-header.is-open .mobile-menu__link {
  -webkit-transform: translateY(0);
          transform: translateY(0);
  opacity: 1;
}

/* Staggered entrance, mirroring the original 80ms + i * 40ms delays */
.site-header.is-open .mobile-menu__link:nth-child(1) { -webkit-transition-delay: 80ms; transition-delay: 80ms; }
.site-header.is-open .mobile-menu__link:nth-child(2) { -webkit-transition-delay: 120ms; transition-delay: 120ms; }
.site-header.is-open .mobile-menu__link:nth-child(3) { -webkit-transition-delay: 160ms; transition-delay: 160ms; }
.site-header.is-open .mobile-menu__link:nth-child(4) { -webkit-transition-delay: 200ms; transition-delay: 200ms; }
.site-header.is-open .mobile-menu__link:nth-child(5) { -webkit-transition-delay: 240ms; transition-delay: 240ms; }

.mobile-menu__label {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  font-family: var(--font-serif);
  font-size: 1.125rem;
}

.mobile-menu__dash {
  display: block;
  height: 1px;
  width: 0.75rem;
  background: oklch(1 0 0 / 0.3);
  -webkit-transition: width 300ms ease, background-color 300ms ease;
  transition: width 300ms ease, background-color 300ms ease;
}

.site-header.is-scrolled .mobile-menu__dash { background: var(--color-border); }

.mobile-menu__link:hover .mobile-menu__dash {
  width: 1.5rem;
  background: var(--color-amber-timber);
}

.mobile-menu__link[aria-current="page"] .mobile-menu__dash {
  width: 2rem;
  background: var(--color-amber-timber);
}

.mobile-menu__index {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.25em;
  color: oklch(1 0 0 / 0.8);
}

.site-header.is-scrolled .mobile-menu__index { color: var(--color-foreground); }

.mobile-menu__cta {
  margin-top: 1.5rem;
  justify-content: center;
  padding-block: 0.75rem;
  -webkit-transform: translateY(0.5rem);
          transform: translateY(0.5rem);
  opacity: 0;
  -webkit-transition: opacity 500ms var(--ease-gth), background 200ms ease, -webkit-transform 500ms var(--ease-gth);
  transition: opacity 500ms var(--ease-gth), background 200ms ease, -webkit-transform 500ms var(--ease-gth);
  transition: transform 500ms var(--ease-gth), opacity 500ms var(--ease-gth), background 200ms ease;
  transition: transform 500ms var(--ease-gth), opacity 500ms var(--ease-gth), background 200ms ease, -webkit-transform 500ms var(--ease-gth);
}

.site-header.is-open .mobile-menu__cta {
  -webkit-transform: translateY(0);
          transform: translateY(0);
  opacity: 1;
  -webkit-transition-delay: 280ms;
          transition-delay: 280ms;
}

/* ------------------------------------------------------------
   Language switcher
   ------------------------------------------------------------ */

.lang-switcher { position: relative; }

.lang-switcher__trigger {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  border-radius: 9999px;
  border: 1px solid oklch(1 0 0 / 0.15);
  padding: 0.375rem 0.625rem;
  font-size: 0.75rem;
  font-weight: 500;
  color: oklch(1 0 0 / 0.85);
  -webkit-transition: color 150ms ease, background-color 150ms ease, border-color 500ms ease;
  transition: color 150ms ease, background-color 150ms ease, border-color 500ms ease;
}

.lang-switcher__trigger:hover {
  color: oklch(1 0 0);
  background: oklch(1 0 0 / 0.1);
}

.site-header.is-scrolled .lang-switcher__trigger {
  border-color: var(--color-border);
  color: var(--color-muted-foreground);
}

.site-header.is-scrolled .lang-switcher__trigger:hover {
  color: var(--color-foreground);
  background: var(--color-muted);
}

.lang-switcher__trigger svg {
  width: 0.875rem;
  height: 0.875rem;
  flex-shrink: 0;
}

.lang-switcher__code { text-transform: uppercase; white-space: nowrap; }

/* The menu is portaled to <body> by i18n.js (as Radix did) so the
   header shell's overflow/backdrop-filter can never clip it; its
   coordinates are set from the trigger on open. */
.lang-switcher__menu {
  position: fixed;
  z-index: 200;
  min-width: 200px;
  padding: 0.25rem;
  background: var(--color-popover);
  color: var(--color-popover-foreground);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  -webkit-box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
          box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
  opacity: 0;
  -webkit-transform: scale(0.95) translateY(-0.5rem);
          transform: scale(0.95) translateY(-0.5rem);
  -webkit-transform-origin: top right;
          transform-origin: top right;
  pointer-events: none;
  -webkit-transition: opacity 150ms ease, -webkit-transform 150ms ease;
  transition: opacity 150ms ease, -webkit-transform 150ms ease;
  transition: opacity 150ms ease, transform 150ms ease;
  transition: opacity 150ms ease, transform 150ms ease, -webkit-transform 150ms ease;
}

.lang-switcher__menu.is-open {
  opacity: 1;
  -webkit-transform: none;
          transform: none;
  pointer-events: auto;
}

.lang-switcher__item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  width: 100%;
  padding: 0.375rem 0.5rem;
  font-size: 0.875rem;
  border-radius: var(--radius-sm);
  cursor: pointer;
}

.lang-switcher__item:hover {
  background: var(--color-accent);
  color: var(--color-accent-foreground);
}

.lang-switcher__item-label {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.lang-switcher__check {
  width: 1rem;
  height: 1rem;
  color: var(--color-amber-timber);
}

.lang-switcher__item:hover .lang-switcher__check { color: currentColor; }

/* ------------------------------------------------------------
   Page hero (shared editorial hero)
   ------------------------------------------------------------ */

.page-hero {
  position: relative;
  padding-top: 9rem;
  padding-bottom: 6rem;
  overflow: hidden;
}

@media (min-width: 768px) {
  .page-hero {
    padding-top: 11rem;
    padding-bottom: 8rem;
  }
}

.page-hero__bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  opacity: 0.6;
}

.page-hero__bg-tint {
  position: absolute;
  inset: 0;
  background: -webkit-gradient(
    linear,
    left top, right top,
    from(color-mix(in oklab, var(--color-forest-deep) 95%, transparent)),
    color-stop(color-mix(in oklab, var(--color-forest-deep) 80%, transparent)),
    to(color-mix(in oklab, var(--color-forest-deep) 55%, transparent))
  );
  background: linear-gradient(
    to right,
    color-mix(in oklab, var(--color-forest-deep) 95%, transparent),
    color-mix(in oklab, var(--color-forest-deep) 80%, transparent),
    color-mix(in oklab, var(--color-forest-deep) 55%, transparent)
  );
}

.page-hero__grid {
  position: absolute;
  inset: 0;
  opacity: 0.4;
  pointer-events: none;
}

.page-hero__graphic {
  position: absolute;
  inset: 0;
  pointer-events: none;
  display: none;
}

@media (min-width: 768px) {
  .page-hero__graphic { display: block; }
}

.page-hero__corner {
  position: absolute;
  width: 1.25rem;
  height: 1.25rem;
  color: color-mix(in oklab, var(--color-amber-timber) 70%, transparent);
  pointer-events: none;
  display: none;
}

@media (min-width: 768px) {
  .page-hero__corner { display: block; }
}

.page-hero__corner--tl { top: 7rem; left: 2.5rem; }
.page-hero__corner--br { bottom: 2rem; right: 2.5rem; -webkit-transform: rotate(180deg); transform: rotate(180deg); }

@media (max-width: 767px) {
  .page-hero__corner--tl { left: 1.5rem; }
  .page-hero__corner--br { right: 1.5rem; }
}

.page-hero__content {
  position: relative;
  z-index: 10;
}

.page-hero__inner { max-width: 48rem; }

.page-hero__kicker {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.page-hero__kicker-line {
  display: block;
  height: 1px;
  width: 2rem;
  background: var(--color-amber-timber);
}

.page-hero__breadcrumb {
  display: none;
  margin-left: 0.5rem;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.2em;
  color: oklch(1 0 0 / 0.85);
}

@media (min-width: 640px) {
  .page-hero__breadcrumb { display: inline; }
}

.page-hero__title {
  margin-top: 1.25rem;
  color: oklch(1 0 0);
  line-height: 1.08;
}

.page-hero__title em,
.accent-serif {
  font-style: italic;
  font-weight: 300;
  color: var(--color-amber-timber);
}

.page-hero__rule {
  margin-top: 1.5rem;
  height: 2px;
  width: 11rem;
  color: var(--color-amber-timber);
}

.page-hero__intro {
  margin-top: 1.5rem;
  color: oklch(1 0 0 / 0.85);
  font-size: 1.125rem;
  line-height: 1.625;
  display: -ms-grid;
  display: grid;
  gap: 1rem;
}

.page-hero__actions { margin-top: 2rem; }

/* Per-page decorative hero graphics */
.hero-graphic {
  position: absolute;
  opacity: 0.45;
}

.hero-graphic--about {
  right: 2.5rem;
  top: 6rem;
  width: 8rem;
  height: 520px;
  opacity: 0.5;
}

.hero-graphic--how {
  right: 0;
  top: 50%;
  -webkit-transform: translateY(-50%);
          transform: translateY(-50%);
  width: 520px;
  height: 360px;
}

.hero-graphic--buyers {
  right: 1.5rem;
  top: 7rem;
  width: 560px;
  height: 420px;
}

.hero-graphic--sellers {
  right: 0;
  bottom: 0;
  width: 520px;
  height: 420px;
}

.hero-graphic--contact {
  right: 4rem;
  top: 8rem;
  width: 360px;
  height: 360px;
}

.hero-graphic--blog {
  right: 2.5rem;
  top: 7rem;
  width: 460px;
  height: 360px;
}

/* ------------------------------------------------------------
   FAQ accordion
   ------------------------------------------------------------ */

.faq { padding-block: 5rem; }

@media (min-width: 768px) {
  .faq { padding-block: 7rem; }
}

.faq__list {
  margin-top: 2rem;
  border-top: 1px solid var(--color-border);
  border-bottom: 1px solid var(--color-border);
}

.faq__item + .faq__item { border-top: 1px solid var(--color-border); }

.faq__question {
  width: 100%;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1.5rem;
  padding-block: 1.25rem;
  text-align: left;
}

.faq__question-text {
  font-family: var(--font-serif);
  font-size: 1.125rem;
  color: var(--color-foreground);
}

@media (min-width: 768px) {
  .faq__question-text { font-size: 1.25rem; }
}

.faq__icon {
  margin-top: 0.25rem;
  color: var(--color-amber-timber);
  flex-shrink: 0;
}

.faq__icon svg { width: 1.25rem; height: 1.25rem; }

.faq__icon--minus { display: none; }

.faq__item.is-open .faq__icon--plus  { display: none; }
.faq__item.is-open .faq__icon--minus { display: block; }

.faq__answer {
  display: none;
  padding-bottom: 1.5rem;
  margin-top: -0.25rem;
  padding-right: 2.5rem;
  color: var(--color-muted-foreground);
  line-height: 1.625;
  white-space: pre-line;
}

.faq__item.is-open .faq__answer { display: block; }

/* ------------------------------------------------------------
   Closing CTA band (forest)
   ------------------------------------------------------------ */

.closing-cta__body {
  margin-top: 1rem;
  color: oklch(1 0 0 / 0.8);
}

.closing-cta .btn-amber { margin-top: 2rem; }

/* ------------------------------------------------------------
   Site footer
   ------------------------------------------------------------ */

.site-footer__inner { padding-block: 4rem; position: relative; }

.site-footer__grid {
  display: -ms-grid;
  display: grid;
  gap: 2.5rem;
}

@media (min-width: 768px) {
  .site-footer__grid { -ms-grid-columns: 1.4fr 1fr 1fr 1fr; grid-template-columns: 1.4fr 1fr 1fr 1fr; }
}

.site-footer__brand {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  color: oklch(1 0 0);
}

.site-footer__logo {
  width: 4rem;
  height: 4rem;
  -o-object-fit: contain;
     object-fit: contain;
  -webkit-filter: brightness(0) invert(1);
          filter: brightness(0) invert(1);
}

@media (min-width: 768px) {
  .site-footer__logo { width: 5rem; height: 5rem; }
}

.site-footer__name {
  font-family: var(--font-serif);
  font-size: 1.125rem;
}

.site-footer__tagline {
  margin-top: 1rem;
  font-size: 0.875rem;
  color: oklch(1 0 0 / 0.65);
  max-width: 20rem;
}

.site-footer__social {
  margin-top: 1.25rem;
  display: flex;
  gap: 0.75rem;
}

.site-footer__social a {
  color: oklch(1 0 0 / 0.7);
  -webkit-transition: color 150ms ease;
  transition: color 150ms ease;
}

.site-footer__social a:hover { color: var(--color-amber-timber); }
.site-footer__social svg { width: 1rem; height: 1rem; }

.site-footer__col-title { margin-top: 0; }

.site-footer__links {
  margin-top: 1rem;
  display: -ms-grid;
  display: grid;
  gap: 0.625rem;
  font-size: 0.875rem;
}

.site-footer__links a {
  color: oklch(1 0 0 / 0.75);
  -webkit-transition: color 150ms ease;
  transition: color 150ms ease;
}

.site-footer__links a:hover { color: var(--color-amber-timber); }

.site-footer__bottom {
  margin-top: 3rem;
  padding-top: 1.5rem;
  border-top: 1px solid oklch(1 0 0 / 0.1);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 1rem;
  font-size: 0.75rem;
  color: oklch(1 0 0 / 0.85);
}

@media (min-width: 768px) {
  .site-footer__bottom { flex-direction: row; }
}

/* ------------------------------------------------------------
   Cookie consent — banner + preferences dialog
   ------------------------------------------------------------ */

.cookie-banner {
  position: fixed;
  inset-inline: 0;
  bottom: 0;
  z-index: 50;
  border-top: 1px solid var(--color-border);
  background: color-mix(in oklab, var(--color-background) 95%, transparent);
  -webkit-box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
          box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

.cookie-banner[hidden] { display: none; }

.cookie-banner__inner {
  margin-inline: auto;
  max-width: 72rem;
  display: flex;
  flex-direction: column;
  gap: 1rem;
  padding: 1.25rem 1rem;
}

@media (min-width: 768px) {
  .cookie-banner__inner {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: 1.5rem;
    padding-block: 1rem;
  }
}

.cookie-banner__text {
  font-size: 0.875rem;
  color: var(--color-muted-foreground);
}

.cookie-banner__title {
  font-weight: 500;
  color: var(--color-foreground);
}

.cookie-banner__body { margin-top: 0.25rem; }

.cookie-banner__body a {
  text-decoration: underline;
  text-underline-offset: 2px;
}

.cookie-banner__body a:hover { color: var(--color-foreground); }

.cookie-banner__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

@media (min-width: 768px) {
  .cookie-banner__actions {
    flex-wrap: nowrap;
    flex-shrink: 0;
  }
}

/* Dialog */
.cookie-dialog[hidden] { display: none; }

.cookie-dialog__overlay {
  position: fixed;
  inset: 0;
  z-index: 50;
  background: rgb(0 0 0 / 0.8);
  -webkit-animation: dialog-overlay-in 150ms ease;
          animation: dialog-overlay-in 150ms ease;
}

.cookie-dialog__content {
  position: fixed;
  left: 50%;
  top: 50%;
  z-index: 50;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
  display: -ms-grid;
  display: grid;
  gap: 1rem;
  width: calc(100% - 2rem);
  max-width: 32rem;
  max-height: calc(100vh - 2rem);
  overflow-y: auto;
  border: 1px solid var(--color-border);
  background: var(--color-background);
  padding: 1.5rem;
  -webkit-box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
          box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
  border-radius: var(--radius-lg);
  -webkit-animation: dialog-content-in 150ms ease;
          animation: dialog-content-in 150ms ease;
}

@-webkit-keyframes dialog-overlay-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}

@keyframes dialog-overlay-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}

@-webkit-keyframes dialog-content-in {
  from { opacity: 0; -webkit-transform: translate(-50%, -48%) scale(0.95); transform: translate(-50%, -48%) scale(0.95); }
  to   { opacity: 1; -webkit-transform: translate(-50%, -50%) scale(1); transform: translate(-50%, -50%) scale(1); }
}

@keyframes dialog-content-in {
  from { opacity: 0; -webkit-transform: translate(-50%, -48%) scale(0.95); transform: translate(-50%, -48%) scale(0.95); }
  to   { opacity: 1; -webkit-transform: translate(-50%, -50%) scale(1); transform: translate(-50%, -50%) scale(1); }
}

.cookie-dialog__header {
  display: flex;
  flex-direction: column;
  gap: 0.375rem;
  text-align: center;
}

@media (min-width: 640px) {
  .cookie-dialog__header { text-align: left; }
}

.cookie-dialog__title {
  font-family: var(--font-sans);
  font-size: 1.125rem;
  font-weight: 600;
  line-height: 1;
  letter-spacing: -0.025em;
}

.cookie-dialog__description {
  font-size: 0.875rem;
  color: var(--color-muted-foreground);
}

.cookie-dialog__close {
  position: absolute;
  right: 1rem;
  top: 1rem;
  border-radius: var(--radius-sm);
  opacity: 0.7;
  -webkit-transition: opacity 150ms ease;
  transition: opacity 150ms ease;
}

.cookie-dialog__close:hover { opacity: 1; }
.cookie-dialog__close svg { width: 1rem; height: 1rem; }

.cookie-dialog__rows {
  display: -ms-grid;
  display: grid;
  gap: 1rem;
  padding-block: 0.5rem;
}

.pref-row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  border: 1px solid var(--color-border);
  border-radius: calc(var(--radius) + 2px);
  padding: 0.75rem;
}

.pref-row__text { min-width: 0; }

.pref-row__title {
  display: block;
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--color-foreground);
}

.pref-row__desc {
  margin-top: 0.25rem;
  font-size: 0.75rem;
  color: var(--color-muted-foreground);
}

.cookie-dialog__footer {
  display: flex;
  flex-direction: column-reverse;
  gap: 0.5rem;
}

@media (min-width: 640px) {
  .cookie-dialog__footer {
    flex-direction: row;
    justify-content: flex-end;
  }
}

/* Toggle switch (ported from the shadcn Switch) */
.switch {
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
  width: 2.75rem;
  height: 1.5rem;
  padding: 0;
  border: 2px solid transparent;
  border-radius: 9999px;
  background: var(--color-input);
  cursor: pointer;
  -webkit-transition: background-color 150ms ease;
  transition: background-color 150ms ease;
}

.switch[aria-checked="true"] { background: var(--color-primary); }

.switch[disabled] {
  cursor: not-allowed;
  opacity: 0.5;
}

.switch__thumb {
  display: block;
  width: 1.25rem;
  height: 1.25rem;
  border-radius: 9999px;
  background: var(--color-background);
  -webkit-box-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
          box-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
  -webkit-transform: translateX(0);
          transform: translateX(0);
  -webkit-transition: -webkit-transform 150ms ease;
  transition: -webkit-transform 150ms ease;
  transition: transform 150ms ease;
  transition: transform 150ms ease, -webkit-transform 150ms ease;
}

.switch[aria-checked="true"] .switch__thumb { -webkit-transform: translateX(1.25rem); transform: translateX(1.25rem); }

/* ------------------------------------------------------------
   Legal pages (privacy, cookies) shared layout
   ------------------------------------------------------------ */

.legal-body { max-width: 48rem; }

.legal-body__updated {
  font-size: 0.875rem;
  color: var(--color-muted-foreground);
}

.legal-article {
  margin-top: 2.5rem;
  display: -ms-grid;
  display: grid;
  gap: 2.5rem;
  color: var(--color-foreground);
}

.legal-section h2 {
  font-family: var(--font-serif);
  font-size: 1.25rem;
  font-weight: 600;
}

.legal-section__body {
  margin-top: 0.75rem;
  display: -ms-grid;
  display: grid;
  gap: 0.75rem;
  font-size: 15px;
  line-height: 1.625;
  color: color-mix(in oklab, var(--color-foreground) 90%, transparent);
}

.legal-section__body a { text-decoration: underline; }

/* Bordered data table (cookie categories, guide documents) */
.data-table-wrap {
  margin-top: 1rem;
  overflow-x: auto;
  border: 1px solid var(--color-border);
  border-radius: calc(var(--radius) + 2px);
}

.data-table {
  width: 100%;
  font-size: 0.875rem;
  text-align: left;
}

.data-table thead {
  background: color-mix(in oklab, var(--color-muted) 50%, transparent);
}

.data-table th {
  padding: 0.5rem 1rem;
  font-weight: 500;
}

.data-table td {
  padding: 0.75rem 1rem;
  color: color-mix(in oklab, var(--color-foreground) 85%, transparent);
  vertical-align: top;
}

.data-table td:first-child { font-weight: 500; color: var(--color-foreground); }
.data-table tbody tr { border-top: 1px solid var(--color-border); }