/* =========================================================================
   MotionFlex — fő stíluslap
   css_naming: kebab-case | css_units: em-based | css_variables: component-scoped
   css_reset: none | css_methodology: desktop-first | css_architecture: scoped
   ========================================================================= */

html { font-size: 100%; } /* 1rem = 16px baseline, minden egyéb em/rem ehhez képest */

/* A dobozok szélessége a paddinggel együtt értendő — enélkül a .container
   1,5em-es belső margója túlcsordul a rögzített oldalsáv melletti sávon. */
*, *::before, *::after { box-sizing: border-box; }

body {
  margin: 0;
  font-family: 'Inter', sans-serif;
  font-weight: 400;
  line-height: 1.7;
  color: #23281f;
  background: #faf7f2;
}

h1, h2, h3, h4, h5, h6 {
  font-family: 'Work Sans', sans-serif;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: #1c2117;
}
h1 { font-size: 3rem; line-height: 1.12; }
h2 { font-size: 2.1rem; }
h3 { font-size: 1.4rem; }
p  { font-size: 1rem; line-height: 1.7; }

a { color: inherit; text-decoration: none; transition: color 0.2s ease; }

img { max-width: 100%; display: block; }

.visually-hidden {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}

/* -------------------------------------------------------------------------
   Container — dom_hierarchy: container-wrapped
   ------------------------------------------------------------------------- */
.container { width: 75em; max-width: 100%; margin: 0 auto; padding: 0 1.5em; }

/* -------------------------------------------------------------------------
   App shell + Sidebar navigation — navigation_type: sidebar-left
   .site-app stays a plain block (no grid) — the sidebar is removed from
   flow via position:fixed, so .site-main gets margin-left instead.
   ------------------------------------------------------------------------- */
.site-app { }

.site-sidebar {
  position: fixed; left: 0; top: 0; height: 100vh; width: 16em;
  background: #fdfbf7; border-right: 1px solid rgba(28,33,23,0.08);
  display: flex; flex-direction: column; justify-content: space-between;
  padding: 1.75em 1.5em; z-index: 500; overflow-y: auto;
}
.site-sidebar-logo { display: flex; align-items: center; gap: 0.6em; margin-bottom: 1.5em; }
.site-sidebar-logo img { height: 2.4em; width: auto; }
.site-sidebar-nav { flex: 1; }
.site-sidebar-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.15em; }
.site-sidebar-item { }
.site-sidebar-link {
  display: block; padding: 0.7em 0.6em; border-radius: 0.4em;
  font-weight: 500; color: #3a4234; border-left: 3px solid transparent;
}
.site-sidebar-link:hover { background: rgba(79,109,92,0.08); color: #4f6d5c; }
.site-sidebar-link.is-active { border-left-color: #c1704a; color: #4f6d5c; font-weight: 700; background: rgba(79,109,92,0.08); }
.site-sidebar-cta { width: 100%; text-align: center; margin-top: 1.25em; }
.site-sidebar-foot { margin-top: 1.5em; font-size: 0.82rem; color: #7c8477; }

/* Mobile-only top bar — carries the mm-module hamburger + slide-in panel */
.mobile-topbar { display: none; }
.mobile-topbar-inner {
  display: flex; align-items: center; justify-content: space-between;
  padding: 0.9em 1.25em; background: #fdfbf7; border-bottom: 1px solid rgba(28,33,23,0.08);
  position: sticky; top: 0; z-index: 600;
}
.mobile-topbar-logo img { height: 2.1em; width: auto; }

.site-main { margin-left: 16em; }
.site-footer { margin-left: 16em; }

/* -------------------------------------------------------------------------
   Mobilmenü modul (slide-left) — a modul saját CSS-e, ne írjunk hozzá sajátot
   ------------------------------------------------------------------------- */
[data-mm-header]{--mm-bg:#ffffff;--mm-text:#333333;--mm-primary:#2563eb;--mm-overlay-bg:rgba(0,0,0,0.5);--mm-transition:0.3s ease}[data-mm-header]{position:relative}[data-mm-toggle]{display:flex;flex-direction:column;justify-content:center;gap:5px;background:none;border:none;cursor:pointer;padding:8px;z-index:1001}[data-mm-toggle] span{display:block;width:24px;height:2px;background:var(--mm-text);transition:var(--mm-transition)}[data-mm-menu]{position:fixed;top:0;left:0;width:280px;max-width:85vw;height:100vh;height:100dvh;background:var(--mm-bg);transform:translateX(-100%);transition:transform var(--mm-transition);z-index:1100;overflow-y:auto;-webkit-overflow-scrolling:touch;display:flex;flex-direction:column;padding:60px 24px 24px}[data-mm-menu].mm-open{transform:translateX(0)}[data-mm-menu] ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:0}[data-mm-menu] ul li a{display:block;padding:14px 0;color:var(--mm-text);text-decoration:none;font-size:16px;border-bottom:1px solid rgba(0,0,0,0.08);transition:color var(--mm-transition)}[data-mm-menu] ul li a:hover{color:var(--mm-primary)}[data-mm-close]{position:absolute;top:16px;right:16px;background:none;border:none;font-size:28px;line-height:1;cursor:pointer;color:var(--mm-text);padding:4px 8px}[data-mm-overlay]{position:fixed;top:0;left:0;width:100%;height:100%;background:var(--mm-overlay-bg);opacity:0;visibility:hidden;transition:opacity var(--mm-transition),visibility var(--mm-transition);z-index:1050}[data-mm-overlay].mm-visible{opacity:1;visibility:visible}@media(min-width:768px){[data-mm-toggle]{display:none!important}[data-mm-menu]{position:static!important;width:auto!important;max-width:none!important;height:auto!important;background:transparent!important;transform:none!important;padding:0!important;overflow:visible!important;flex-direction:row!important}[data-mm-menu] ul{flex-direction:row;gap:0;align-items:center}[data-mm-menu] ul li a{padding:8px 16px;border-bottom:none;font-size:inherit}[data-mm-close]{display:none!important}[data-mm-overlay]{display:none!important}}@media(prefers-reduced-motion:reduce){[data-mm-menu],[data-mm-overlay],[data-mm-toggle] span{transition:none!important}}

/* Mobile-menu module color overrides (functional CSS stays in the module) */
[data-mm-header] {
  --mm-bg: #fdfbf7;
  --mm-text: #23281f;
  --mm-primary: #c1704a;
  --mm-overlay-bg: rgba(28,33,23,0.55);
}
[data-mm-menu] ul li a { font-family: 'Work Sans', sans-serif; font-weight: 600; }
/* Csak az érintőfelület nagyítása 44x44-re — a modul rajzolatához nem nyúlunk */
[data-mm-toggle] { padding: 14px 10px; }
[data-mm-close] { padding: 10px 14px; }

@media (min-width: 48em) {
  .mobile-topbar { display: none !important; }
}
@media (max-width: 48em) {
  .site-sidebar { display: none; }
  .mobile-topbar { display: block; }
  .site-main { margin-left: 0; }
  .site-footer { margin-left: 0; }
}

/* -------------------------------------------------------------------------
   Buttons — button_style: gradient-fill
   ------------------------------------------------------------------------- */
.primary-button {
  --button-bg: linear-gradient(135deg, #4f6d5c, #6f9280);
  --button-color: #ffffff;
  --button-padding: 0.85em 1.7em;
  display: inline-block; background: var(--button-bg); color: var(--button-color);
  border: none; border-radius: 0.6em; padding: var(--button-padding);
  font-weight: 600; font-family: 'Work Sans', sans-serif; cursor: pointer;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.primary-button:hover { transform: scale(1.03); box-shadow: 0 0.6em 1.4em rgba(79,109,92,0.28); color: #fff; }
.primary-button-large { --button-padding: 1.05em 2.2em; font-size: 1.05rem; }
.primary-button-block { display: block; width: 100%; text-align: center; }

.ghost-button {
  --button-color: #3a4234;
  display: inline-block; background: transparent; color: var(--button-color);
  border: 1px solid rgba(28,33,23,0.25); border-radius: 0.6em; padding: 0.8em 1.6em;
  font-weight: 600; font-family: 'Work Sans', sans-serif; cursor: pointer;
  transition: transform 0.2s ease, background 0.2s ease;
}
.ghost-button:hover { transform: scale(1.03); background: rgba(28,33,23,0.05); }

/* -------------------------------------------------------------------------
   Sections — layout_strategy: position-absolute (badges/labels/sticky header)
   spacing_rhythm: newspaper (columns for prose blocks)
   ------------------------------------------------------------------------- */
.content-section { padding: 4.5em 0; position: relative; }
.content-section-tight { padding: 3em 0; }

/* section_class_names hooks (classic-semantic) — alternating surface tint
   for visual rhythm between stacked homepage/inner-page sections */
.content-section-library,
.content-section-pricing,
.content-section-faq,
.content-section-cancellation { background: #f2ede3; }
.content-section-metrics,
.content-section-featured,
.content-section-categories,
.content-section-features,
.content-section-payment { background: #fff; }
.content-section-services,
.content-section-contact { background: transparent; }
.content-section-instructors,
.content-section-register { background-color: #2b3d31; } /* fallback under the tone-section image overlay */
.section-eyebrow {
  display: inline-block; font-family: 'Work Sans', sans-serif; font-weight: 700;
  font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.08em;
  color: #c1704a; margin-bottom: 0.8em;
}
.section-heading { max-width: 42em; margin: 0 0 2em; }
.section-heading p { color: #56604f; margin-top: 0.6em; }
.section-heading-center { max-width: 38em; margin-left: auto; margin-right: auto; text-align: center; }

.prose-columns { columns: 2; column-gap: 2.4em; column-rule: 1px solid rgba(28,33,23,0.1); }
.prose-columns p { margin: 0 0 1em; break-inside: avoid; }
@media (max-width: 48em) { .prose-columns { columns: 1; } }

/* Section divider — section_divider: wave-svg */
.section-divider { line-height: 0; }
.section-divider svg { display: block; width: 100%; height: 5em; }
.section-divider--flip svg { transform: rotate(180deg); }

/* Colored overlay sections — color_sections: colored-overlays */
.tone-section {
  position: relative; background-size: cover; background-position: center; color: #fff;
}
.tone-section::before {
  content: ''; position: absolute; inset: 0; background: rgba(43,61,49,0.86);
}
.tone-section .container { position: relative; z-index: 2; }
.tone-section h2, .tone-section h3 { color: #fff; }
/* A tone-section belsejében ülő világos kártyák saját, sötét címszínt kapnak */
.tone-section .plain-card h2, .tone-section .plain-card h3 { color: #1c2117; }

/* -------------------------------------------------------------------------
   Hero — hero_design: stats-banner + video_layout hero_pattern (featured card)
   image_strategy: inline <img> tags
   ------------------------------------------------------------------------- */
.hero-section { text-align: center; padding: 4em 0 3em; background: #f2ede3; }
.hero-eyebrow { color: #4f6d5c; }
.hero-section h1 { max-width: 38em; margin: 0 auto 0.6em; }
.hero-section .hero-lead { max-width: 34em; margin: 0 auto 1.8em; color: #56604f; font-size: 1.1rem; }
.hero-actions { display: flex; gap: 1em; justify-content: center; flex-wrap: wrap; margin-bottom: 2.6em; }
.hero-trust { font-size: 0.85rem; color: #7c8477; margin-top: 0.5em; }

.hero-feature-card {
  position: relative; max-width: 52em; margin: 0 auto 3em; border-radius: 1em;
  overflow: hidden; box-shadow: 0 1.4em 3em rgba(28,33,23,0.16); cursor: pointer;
}
.hero-feature-card img { width: 100%; aspect-ratio: 16/9; object-fit: cover; }
.hero-feature-card::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(20,24,17,0.78), transparent 55%);
}
.hero-feature-card .hero-feature-tag {
  position: absolute; top: 1.2em; left: 1.2em; z-index: 2;
  background: rgba(255,255,255,0.92); color: #4f6d5c; font-weight: 700;
  font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.05em;
  padding: 0.4em 0.8em; border-radius: 2em;
}
.hero-feature-card .hero-feature-body {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 2;
  padding: 1.6em; text-align: left; color: #fff;
}
.hero-feature-card .hero-feature-body h3 { color: #fff; margin: 0 0 0.3em; }
.hero-feature-card .hero-feature-meta { font-size: 0.85rem; color: rgba(255,255,255,0.85); }
.hero-feature-play {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%);
  width: 3.4em; height: 3.4em; border-radius: 50%; z-index: 3;
  background: rgba(255,255,255,0.18); border: 2px solid rgba(255,255,255,0.7);
  color: #fff; display: flex; align-items: center; justify-content: center;
  font-size: 1.2rem; transition: transform 0.25s ease, background 0.25s ease;
}
.hero-feature-card:hover .hero-feature-play { transform: translate(-50%,-50%) scale(1.1); background: rgba(255,255,255,0.3); }

.hero-stats {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.5em; max-width: 56em; margin: 0 auto;
}
.hero-stats .stat-num { font-size: 2.4rem; font-weight: 800; color: #4f6d5c; font-family: 'Work Sans', sans-serif; }
.hero-stats .stat-label { font-size: 0.85rem; color: #56604f; margin-top: 0.2em; }
@media (max-width: 48em) { .hero-stats { grid-template-columns: repeat(2, 1fr); } }

/* -------------------------------------------------------------------------
   Cards — card_style: overlay-image (video / category / feature cards)
   ------------------------------------------------------------------------- */
.content-card {
  position: relative; border-radius: 0.9em; overflow: hidden; min-height: 15em;
  color: #fff; background: #2b3d31;
  transition: transform 0.3s cubic-bezier(0.4,0,0.2,1), box-shadow 0.3s ease;
}
.content-card:hover { transform: scale(1.03); box-shadow: 0 0.8em 2.2em rgba(28,33,23,0.3); z-index: 5; }
.content-card img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.content-card::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(15,18,13,0.85), transparent 60%);
}
.content-card .card-body { position: relative; z-index: 2; padding: 1.4em; display: flex; flex-direction: column; justify-content: flex-end; min-height: 15em; }
.card-title { font-size: 1.05rem; margin: 0 0 0.3em; color: #fff; }
.card-meta { font-size: 0.8rem; color: rgba(255,255,255,0.8); display: flex; gap: 0.6em; flex-wrap: wrap; }
.card-badge {
  position: absolute; top: 0.9em; right: 0.9em; z-index: 3;
  background: rgba(0,0,0,0.55); color: #fff; font-size: 0.72rem; font-weight: 600;
  padding: 0.3em 0.6em; border-radius: 0.4em;
}
.card-free-badge {
  position: absolute; top: 0.9em; left: 0.9em; z-index: 3;
  background: #c1704a; color: #fff; font-size: 0.7rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.04em; padding: 0.3em 0.6em; border-radius: 0.4em;
}

/* Masonry grid — video_layout: vimeo-masonry */
.video-masonry { columns: 3; column-gap: 1.25em; }
.video-masonry .content-card { display: inline-block; width: 100%; margin: 0 0 1.25em; break-inside: avoid; }
.video-masonry .content-card.is-featured { min-height: 20em; }
.video-masonry .content-card.is-featured .card-body { min-height: 20em; }
@media (max-width: 64em) { .video-masonry { columns: 2; } }
@media (max-width: 48em) { .video-masonry { columns: 1; } }

/* Plain card (instructors — identity must stay visible, not hover-revealed) */
.plain-card {
  background: #fff; border-radius: 0.9em; overflow: hidden;
  box-shadow: 0 0.4em 1.4em rgba(28,33,23,0.08);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.plain-card:hover { transform: scale(1.02); box-shadow: 0 0.8em 2em rgba(28,33,23,0.14); }
.plain-card img { width: 100%; aspect-ratio: 3/4; object-fit: cover; }
.plain-card .card-body { padding: 1.4em; min-height: auto; position: static; display: block; }
.plain-card .card-body::after { content: none; }
.plain-card h3 { margin: 0 0 0.2em; }
.plain-card .plain-card-tag { font-size: 0.8rem; color: #4f6d5c; font-weight: 600; margin-bottom: 0.6em; display: block; }
.plain-card p { color: #56604f; font-size: 0.92rem; }

/* Category / feature cards (non-image, icon based) */
.icon-card {
  background: #fff; border-radius: 0.9em; padding: 1.6em; box-shadow: 0 0.4em 1.2em rgba(28,33,23,0.06);
  transition: transform 0.25s ease;
}
.icon-card:hover { transform: scale(1.03); }
.icon-card .icon-card-icon {
  width: 2.6em; height: 2.6em; border-radius: 0.7em; background: rgba(79,109,92,0.12);
  color: #4f6d5c; display: flex; align-items: center; justify-content: center; font-size: 1.3rem; margin-bottom: 0.9em;
}
.icon-card h3 { font-size: 1.1rem; margin: 0 0 0.4em; }
.icon-card p { font-size: 0.9rem; color: #56604f; margin: 0; }
.icon-card .icon-card-meta { margin-top: 0.8em; font-size: 0.78rem; color: #c1704a; font-weight: 700; }

/* -------------------------------------------------------------------------
   Grids
   ------------------------------------------------------------------------- */
.grid-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.5em; }
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5em; }
.grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.5em; }
@media (max-width: 64em) { .grid-3, .grid-4 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 48em) { .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; } }

/* A hero elé tett értékszalag (section_sequence: services-hero-…) mobilon is
   szalag maradjon — egyoszlopos kártyákként ~1000px-re nőne, és kiszorítaná
   a herót az első képernyőről. */
@media (max-width: 48em) {
  .content-section-services .grid-4 { grid-template-columns: repeat(2, 1fr); gap: 0.8em; }
  .content-section-services .icon-card { padding: 1em; }
  .content-section-services .icon-card .icon-card-icon { width: 2em; height: 2em; font-size: 1rem; margin-bottom: 0.5em; }
  .content-section-services .icon-card h3 { font-size: 0.95rem; }
  .content-section-services .icon-card p { font-size: 0.8rem; }
}

/* -------------------------------------------------------------------------
   Pricing — pricing plans grid
   ------------------------------------------------------------------------- */
.pricing-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.4em; align-items: stretch; }
@media (max-width: 64em) { .pricing-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 48em) { .pricing-grid { grid-template-columns: 1fr; } }
.pricing-card {
  background: #fff; border-radius: 1em; padding: 2em 1.6em; box-shadow: 0 0.4em 1.2em rgba(28,33,23,0.07);
  display: flex; flex-direction: column; position: relative; border: 1px solid rgba(28,33,23,0.06);
  transition: transform 0.25s ease;
}
.pricing-card:hover { transform: scale(1.02); }
.pricing-card.is-popular { border-color: #c1704a; box-shadow: 0 1em 2.4em rgba(193,112,74,0.18); }
.pricing-card .pricing-badge {
  position: absolute; top: -0.9em; left: 50%; transform: translateX(-50%);
  background: #c1704a; color: #fff; font-size: 0.72rem; font-weight: 700;
  padding: 0.35em 0.9em; border-radius: 2em; text-transform: uppercase; letter-spacing: 0.04em;
}
.pricing-card h3 { margin: 0 0 0.3em; }
.pricing-price { font-size: 2.1rem; font-weight: 800; font-family: 'Work Sans', sans-serif; color: #1c2117; }
.pricing-price span { font-size: 0.85rem; font-weight: 500; color: #7c8477; }
.pricing-note { font-size: 0.82rem; color: #4f6d5c; margin: 0.3em 0 1.2em; }
.pricing-features { list-style: none; margin: 0 0 1.6em; padding: 0; flex: 1; }
.pricing-features li { padding: 0.5em 0; border-top: 1px solid rgba(28,33,23,0.07); font-size: 0.9rem; }
.pricing-features li:first-child { border-top: none; }

/* Payment method icon row */
.payment-row { display: flex; flex-wrap: wrap; gap: 1em; justify-content: center; }
.payment-chip {
  display: flex; align-items: center; gap: 0.5em; background: #fff; border: 1px solid rgba(28,33,23,0.1);
  border-radius: 0.6em; padding: 0.7em 1.1em; font-size: 0.85rem; font-weight: 600;
}

/* Cancellation steps */
.step-list { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.3em; counter-reset: step; }
@media (max-width: 48em) { .step-list { grid-template-columns: 1fr; } }
.step-item { background: #fff; border-radius: 0.9em; padding: 1.5em; box-shadow: 0 0.3em 1em rgba(28,33,23,0.06); }
.step-item::before {
  counter-increment: step; content: counter(step);
  display: flex; align-items: center; justify-content: center;
  width: 2.2em; height: 2.2em; border-radius: 50%; background: #4f6d5c; color: #fff;
  font-weight: 700; font-family: 'Work Sans', sans-serif; margin-bottom: 0.8em;
}

/* -------------------------------------------------------------------------
   FAQ — faq_design: side-tabs
   ------------------------------------------------------------------------- */
.faq-tabs { display: grid; grid-template-columns: 1fr 1.6fr; gap: 2em; align-items: start; }
@media (max-width: 48em) { .faq-tabs { grid-template-columns: 1fr; } }
.faq-tabs .faq-qlist { list-style: none; margin: 0; padding: 0; }
.faq-tabs .faq-qlist button {
  display: block; width: 100%; text-align: left; padding: 0.9em 1em; border: none;
  background: none; cursor: pointer; border-left: 3px solid transparent;
  font-family: 'Work Sans', sans-serif; font-size: 0.98rem; color: #3a4234;
}
.faq-tabs .faq-qlist button.is-active { border-left-color: #c1704a; font-weight: 700; color: #1c2117; background: rgba(79,109,92,0.06); }
.faq-panel { background: #fff; border-radius: 0.9em; padding: 1.8em; box-shadow: 0 0.4em 1.2em rgba(28,33,23,0.06); }
.faq-panel h3 { margin: 0 0 0.6em; }
.faq-panel p { color: #46503f; }

/* -------------------------------------------------------------------------
   Forms — form_placement: sidebar-form
   ------------------------------------------------------------------------- */
.contact-layout { display: grid; grid-template-columns: 1fr 22em; gap: 2.5em; align-items: start; }
@media (max-width: 64em) { .contact-layout { grid-template-columns: 1fr; } }
.contact-info-list { list-style: none; margin: 1.6em 0 0; padding: 0; display: flex; flex-direction: column; gap: 1em; }
.contact-info-list li { display: flex; gap: 0.8em; align-items: flex-start; }
.contact-info-icon {
  width: 2.2em; height: 2.2em; border-radius: 0.6em; background: rgba(79,109,92,0.12);
  color: #4f6d5c; display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.sidebar-form-card {
  background: #fff; border-radius: 1em; padding: 1.8em; box-shadow: 0 0.6em 1.8em rgba(28,33,23,0.1);
  position: sticky; top: 2em;
}
.sidebar-form-card h2 { font-size: 1.3rem; margin: 0 0 0.4em; }
.sidebar-form-card > p { color: #56604f; font-size: 0.9rem; margin: 0 0 1.2em; }

.contact-form { display: flex; flex-direction: column; gap: 1em; }
.form-group { display: flex; flex-direction: column; gap: 0.4em; }
.form-label { font-size: 0.85rem; font-weight: 600; color: #3a4234; }
.form-input {
  font: inherit; padding: 0.75em 0.9em; border: 1px solid rgba(28,33,23,0.18);
  border-radius: 0.5em; background: #fdfbf7;
}
.form-input:focus { outline: 2px solid #4f6d5c; outline-offset: 1px; }
textarea.form-input { min-height: 7em; resize: vertical; }
.form-check { display: flex; align-items: flex-start; gap: 0.6em; font-size: 0.85rem; color: #46503f; }
.form-note { font-size: 0.82rem; color: #7c8477; margin-top: 0.4em; }
.form-error { font-size: 0.82rem; color: #b1442c; margin-top: 0.2em; }
.form-alert { padding: 0.85em 1em; border-radius: 0.6em; font-size: 0.9rem; margin-bottom: 1em; }
.form-alert.is-ok { background: rgba(79,109,92,0.12); color: #35503f; }
.form-alert.is-error { background: rgba(193,112,74,0.14); color: #96401f; }
.form-alert.is-hidden { display: none; }

/* Auth pages */
.auth-shell { display: grid; grid-template-columns: 1fr 1fr; gap: 3em; align-items: center; padding: 3em 0; }
@media (max-width: 64em) { .auth-shell { grid-template-columns: 1fr; } }
.auth-aside ul { margin: 1.2em 0 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 0.6em; }
.auth-aside ul li { padding-left: 1.6em; position: relative; color: #46503f; }
.auth-aside ul li::before { content: '✓'; position: absolute; left: 0; color: #4f6d5c; font-weight: 700; }
.auth-card { background: #fff; border-radius: 1em; padding: 2.2em; box-shadow: 0 0.8em 2em rgba(28,33,23,0.1); }
.auth-card h2 { margin: 0 0 0.3em; }
.auth-card-intro { color: #56604f; font-size: 0.9rem; margin: 0 0 1.4em; }
.auth-inline-row { display: flex; justify-content: space-between; align-items: center; font-size: 0.85rem; }
.auth-inline-row a { color: #4f6d5c; font-weight: 600; }
.auth-switch { text-align: center; margin-top: 1.2em; font-size: 0.9rem; }
.auth-switch a { color: #c1704a; font-weight: 700; }
.field-check { display: flex; align-items: flex-start; gap: 0.6em; font-size: 0.85rem; }

/* Dashboard */
.account-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.4em; }
@media (max-width: 48em) { .account-grid { grid-template-columns: 1fr; } }
.account-panel { background: #fff; border-radius: 0.9em; padding: 1.7em; box-shadow: 0 0.4em 1.2em rgba(28,33,23,0.07); }
.account-status { display: inline-block; font-size: 0.75rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.04em; background: rgba(79,109,92,0.12); color: #4f6d5c; padding: 0.3em 0.7em; border-radius: 2em; margin-bottom: 0.8em; }
.account-list { list-style: none; margin: 1em 0; padding: 0; }
.account-list li { display: flex; justify-content: space-between; padding: 0.5em 0; border-top: 1px solid rgba(28,33,23,0.06); font-size: 0.9rem; }
.account-list li:first-child { border-top: none; }
.account-actions { display: flex; gap: 0.7em; flex-wrap: wrap; margin-top: 0.6em; }
.btn-small { padding: 0.55em 1.1em; font-size: 0.85rem; }

/* Page banner (inner pages) */
.page-banner { background: #f2ede3; padding: 3.4em 0 2.6em; }
.page-banner .section-eyebrow { }
.page-banner p { max-width: 38em; color: #56604f; }

/* -------------------------------------------------------------------------
   Footer — footer_design: bordered-top-thick
   ------------------------------------------------------------------------- */
.site-footer { background: #fff; color: #3a4234; border-top: 0.4em solid #c1704a; padding: 3.5em 0 1.6em; }
.footer-newsletter {
  display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 1.4em;
  padding-bottom: 2.4em; margin-bottom: 2.4em; border-bottom: 1px solid rgba(28,33,23,0.08);
}
.footer-newsletter h2 { font-size: 1.3rem; margin: 0 0 0.3em; }
.footer-newsletter p { margin: 0; color: #56604f; max-width: 28em; }
.footer-newsletter-form { display: flex; gap: 0.6em; flex-wrap: wrap; }
.footer-newsletter-form input { padding: 0.75em 1em; border-radius: 0.5em; border: 1px solid rgba(28,33,23,0.18); font: inherit; min-width: 14em; flex: 1 1 14em; }
.site-footer-grid { display: grid; grid-template-columns: 1.6fr repeat(4, 1fr); gap: 2em; }
@media (max-width: 64em) { .site-footer-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 48em) { .site-footer-grid { grid-template-columns: 1fr; } }
.site-footer-brand img { height: 2.2em; width: auto; margin-bottom: 0.8em; }
.site-footer-brand p { color: #56604f; font-size: 0.9rem; }
.site-footer-col h3 { font-size: 0.95rem; margin: 0 0 0.9em; }
.site-footer-col ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.55em; font-size: 0.9rem; }
.site-footer-col a:hover { color: #4f6d5c; }
.site-footer-bottom {
  margin-top: 2.4em; padding-top: 1.6em; border-top: 1px solid rgba(28,33,23,0.08);
  display: flex; flex-wrap: wrap; gap: 0.8em; justify-content: space-between; font-size: 0.8rem; color: #7c8477;
}
.site-footer-legal { display: flex; gap: 1em; }

/* -------------------------------------------------------------------------
   Legal pages (privacy/terms/cookie-policy)
   ------------------------------------------------------------------------- */
.legal-content { max-width: min(46em, 100%); }
.legal-content h2 { margin-top: 1.8em; }
.legal-content ul { padding-left: 1.3em; }
.legal-content li { margin-bottom: 0.5em; }

/* -------------------------------------------------------------------------
   Video modal — video_player_modal: cinema-blur
   ------------------------------------------------------------------------- */
.video-modal-backdrop {
  position: fixed; inset: 0; z-index: 9999; background: rgba(0,0,0,0.75);
  backdrop-filter: blur(1.1em) saturate(0.6); -webkit-backdrop-filter: blur(1.1em) saturate(0.6);
  display: flex; align-items: center; justify-content: center; padding: 1.5em;
  opacity: 0; transition: opacity 0.28s cubic-bezier(0.25,0.46,0.45,0.94);
}
.video-modal-backdrop.is-open { opacity: 1; }
.video-modal-player {
  position: relative; width: 100%; max-width: 51.25em; aspect-ratio: 16/9;
  background: rgba(10,10,10,0.85); border-radius: 0.75em; border: 1px solid rgba(255,255,255,0.08);
  box-shadow: 0 2em 5em rgba(0,0,0,0.9), 0 0 0 1px rgba(255,255,255,0.04);
  background-size: cover; background-position: center;
  transform: scale(0.92); transition: transform 0.28s cubic-bezier(0.25,0.46,0.45,0.94);
  overflow: hidden;
}
.video-modal-backdrop.is-open .video-modal-player { transform: scale(1); }
.video-modal-play-btn {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%);
  width: 5.5em; height: 5.5em; border-radius: 50%; background: rgba(255,255,255,0.12);
  border: 2px solid rgba(255,255,255,0.6); color: #fff; font-size: 1.6rem;
  display: flex; align-items: center; justify-content: center; cursor: pointer;
  box-shadow: 0 0 1.9em rgba(255,255,255,0.15); animation: mf-pulse-glow 2.5s ease-in-out infinite;
}
.video-modal-play-btn:hover { background: rgba(255,255,255,0.22); transform: translate(-50%,-50%) scale(1.1); }
@keyframes mf-pulse-glow {
  0%, 100% { box-shadow: 0 0 1.2em rgba(255,255,255,0.12); }
  50% { box-shadow: 0 0 2.4em rgba(255,255,255,0.28); }
}
.video-modal-controls {
  position: absolute; left: 0; right: 0; bottom: 0; height: 3em;
  background: linear-gradient(to top, rgba(0,0,0,0.9) 0%, transparent 100%);
  display: flex; align-items: center; gap: 0.8em; padding: 0 1em 0.6em;
  color: rgba(255,255,255,0.85); font-size: 0.8rem;
}
.video-modal-controls .video-modal-progress { flex: 1; height: 0.25em; background: rgba(255,255,255,0.25); border-radius: 1em; overflow: hidden; }
.video-modal-controls .video-modal-progress span { display: block; width: 18%; height: 100%; background: #fff; }
.video-modal-close {
  position: absolute; top: 1em; right: 1em; z-index: 4; width: 2.1em; height: 2.1em; border-radius: 50%;
  background: rgba(255,255,255,0.08); color: rgba(255,255,255,0.7); border: none; cursor: pointer;
  backdrop-filter: blur(0.25em); font-size: 1.1rem; display: flex; align-items: center; justify-content: center;
}
.video-modal-close:hover { background: rgba(255,255,255,0.18); }
.video-modal-lock-note {
  position: absolute; bottom: 3.6em; left: 0; right: 0; text-align: center; color: rgba(255,255,255,0.75); font-size: 0.8rem;
}

/* -------------------------------------------------------------------------
   Scroll reveal (js_behavior: observer-pattern / IntersectionObserver)
   ------------------------------------------------------------------------- */
.reveal { opacity: 0; transform: translateY(1.2em); transition: opacity 0.6s ease, transform 0.6s ease; }
.reveal.is-visible { opacity: 1; transform: translateY(0); }
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
}

.video-card, [data-video], [data-hero-video] { cursor: pointer; }

/* Video library filter bar + search + lock badge */
.library-toolbar { display: flex; flex-wrap: wrap; gap: 1em; justify-content: space-between; align-items: center; margin-bottom: 1.8em; }
.library-filters { display: flex; flex-wrap: wrap; gap: 0.6em; }
.library-filter {
  font-family: 'Work Sans', sans-serif; font-size: 0.85rem; font-weight: 600; padding: 0.55em 1.1em;
  border-radius: 2em; border: 1px solid rgba(28,33,23,0.16); background: #fff; color: #3a4234; cursor: pointer;
}
.library-filter.is-active { background: #4f6d5c; border-color: #4f6d5c; color: #fff; }
.library-search { padding: 0.6em 1em; border-radius: 2em; border: 1px solid rgba(28,33,23,0.16); font: inherit; min-width: 14em; }
.card-lock {
  position: absolute; top: 0.9em; left: 0.9em; z-index: 3; width: 1.9em; height: 1.9em; border-radius: 50%;
  background: rgba(0,0,0,0.55); color: #fff; display: flex; align-items: center; justify-content: center; font-size: 0.85rem;
}
.library-view-all { text-align: center; margin-top: 1.6em; }

/* -------------------------------------------------------------------------
   Cookie consent — themed via siteTheme in cookie-consent.css (loaded separately)
   ------------------------------------------------------------------------- */