/* ============================================
   YEN Prototype v2 — Refined Design System
   Client-First 2.1 utilities + YEN components
   ============================================ */

/* --- Font Faces: Core (Default Theme) --- */
@font-face { font-family: 'Editorial New'; src: url('fonts/PPEditorialNew-Regular.woff2') format('woff2'); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: 'Editorial New'; src: url('fonts/PPEditorialNew-Italic.woff2') format('woff2'); font-weight: 400; font-style: italic; font-display: swap; }
@font-face { font-family: 'Editorial New'; src: url('fonts/PPEditorialNew-Bold.woff2') format('woff2'); font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: 'Neue Montreal'; src: url('fonts/PPNeueMontreal-Light.woff2') format('woff2'); font-weight: 300; font-style: normal; font-display: swap; }
@font-face { font-family: 'Neue Montreal'; src: url('fonts/PPNeueMontreal-Regular.woff2') format('woff2'); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: 'Neue Montreal'; src: url('fonts/PPNeueMontreal-Book.woff2') format('woff2'); font-weight: 450; font-style: normal; font-display: swap; }
@font-face { font-family: 'Neue Montreal'; src: url('fonts/PPNeueMontreal-Medium.woff2') format('woff2'); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: 'Neue Montreal'; src: url('fonts/PPNeueMontreal-Bold.woff2') format('woff2'); font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: 'Supply Mono'; src: url('fonts/PPSupplyMono-Regular.woff2') format('woff2'); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: 'Supply Mono'; src: url('fonts/PPSupplyMono-Medium.woff2') format('woff2'); font-weight: 500; font-style: normal; font-display: swap; }

/* --- Font Faces: PP Mori (Theme Variant) --- */
@font-face { font-family: 'Mori'; src: url('fonts/PPMori-Extralight.woff2') format('woff2'); font-weight: 200; font-style: normal; font-display: swap; }
@font-face { font-family: 'Mori'; src: url('fonts/PPMori-Regular.woff2') format('woff2'); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: 'Mori'; src: url('fonts/PPMori-SemiBold.woff2') format('woff2'); font-weight: 600; font-style: normal; font-display: swap; }

/* --- Font Faces: PP Hatton (Theme Variant) --- */
@font-face { font-family: 'Hatton'; src: url('fonts/PPHatton-Medium.woff2') format('woff2'); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: 'Hatton'; src: url('fonts/PPHatton-Bold.woff2') format('woff2'); font-weight: 700; font-style: normal; font-display: swap; }

/* --- Font Faces: PP Telegraf (Theme Variant) --- */
@font-face { font-family: 'Telegraf'; src: url('fonts/PPTelegraf-Regular.woff2') format('woff2'); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: 'Telegraf'; src: url('fonts/PPTelegraf-Ultrabold.woff2') format('woff2'); font-weight: 800; font-style: normal; font-display: swap; }

/* --- Font Faces: PP Agrandir (Theme Variant) --- */
@font-face { font-family: 'Agrandir'; src: url('fonts/PPAgrandir-Regular.woff2') format('woff2'); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: 'Agrandir'; src: url('fonts/PPAgrandir-Bold.woff2') format('woff2'); font-weight: 700; font-style: normal; font-display: swap; }

/* --- Font Faces: PP Object Sans (Theme Variant) --- */
@font-face { font-family: 'Object Sans'; src: url('fonts/PPObjectSans-Regular.woff2') format('woff2'); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: 'Object Sans'; src: url('fonts/PPObjectSans-Bold.woff2') format('woff2'); font-weight: 700; font-style: normal; font-display: swap; }

/* --- Font Faces: PP Right Grotesk (Theme Variant) --- */
@font-face { font-family: 'Right Grotesk'; src: url('fonts/PPRightGrotesk-CompactRegular.woff2') format('woff2'); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: 'Right Grotesk'; src: url('fonts/PPRightGrotesk-CompactDark.woff2') format('woff2'); font-weight: 700; font-style: normal; font-display: swap; }

/* --- Font Faces: PP Neue Machina (Theme Variant) --- */
@font-face { font-family: 'Neue Machina'; src: url('fonts/PPNeueMachina-InktrapRegular.woff2') format('woff2'); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: 'Neue Machina'; src: url('fonts/PPNeueMachina-InktrapUltrabold.woff2') format('woff2'); font-weight: 800; font-style: normal; font-display: swap; }

/* --- Design Tokens --- */
:root {
  --yen-purple: #1E3A5F;
  --yen-purple-hover: #15294A;
  --yen-purple-light: #F0F4F8;
  --yen-purple-100: #E2E8F0;
  --yen-purple-200: #CBD5E1;
  --yen-teal: #C5963A;
  --yen-teal-light: #FEF9EE;
  --yen-teal-dark: #8B6914;
  --yen-white: #FFFFFF;
  --yen-off-white: #FAF9F7;
  --yen-border: #E2E0DB;
  --yen-border-light: #F0EDE8;
  --yen-text: #1A1A2E;
  --yen-text-secondary: #4A4A5C;
  --yen-text-muted: #6B6B7B;
  --yen-navy: #0F172A;
  --success: #10B981;
  --warning: #F59E0B;
  --error: #EF4444;
  --font-display: 'Mori', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-body: 'Mori', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-mono: 'Supply Mono', 'SF Mono', 'Fira Code', monospace;
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 14px;
  --radius-xl: 20px;
  --shadow-sm: 0 1px 3px rgba(14,13,31,0.04);
  --shadow-md: 0 4px 16px rgba(14,13,31,0.07);
  --shadow-lg: 0 12px 40px rgba(14,13,31,0.10);
  --transition: 0.2s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

/* --- Reset --- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { font-size: 16px; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; scroll-behavior: smooth; }
body { font-family: var(--font-body); font-weight: 450; color: var(--yen-text); background-color: var(--yen-white); line-height: 1.65; }
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; }
button { font-family: inherit; cursor: pointer; border: none; background: none; }

/* --- Client-First Layout --- */
.page-wrapper { overflow: hidden; }
.padding-global { padding-left: 5%; padding-right: 5%; }
.container-large { width: 100%; max-width: 1280px; margin-left: auto; margin-right: auto; }
.container-medium { width: 100%; max-width: 960px; margin-left: auto; margin-right: auto; }
.container-small { width: 100%; max-width: 720px; margin-left: auto; margin-right: auto; }
.padding-section-large { padding-top: 7rem; padding-bottom: 7rem; }
.padding-section-medium { padding-top: 5rem; padding-bottom: 5rem; }
.padding-section-small { padding-top: 2.5rem; padding-bottom: 2.5rem; }

/* --- Spacing (Client-First 2-class combo) --- */
.margin-top { } .margin-bottom { } .margin-left { } .margin-right { } .margin-vertical { } .margin-horizontal { }
.padding-top { } .padding-bottom { } .padding-left { } .padding-right { } .padding-vertical { } .padding-horizontal { }
.margin-top.margin-xxsmall { margin-top: 0.25rem; } .margin-bottom.margin-xxsmall { margin-bottom: 0.25rem; }
.margin-top.margin-xsmall { margin-top: 0.5rem; } .margin-bottom.margin-xsmall { margin-bottom: 0.5rem; }
.margin-top.margin-small { margin-top: 1rem; } .margin-bottom.margin-small { margin-bottom: 1rem; }
.margin-top.margin-medium { margin-top: 1.5rem; } .margin-bottom.margin-medium { margin-bottom: 1.5rem; }
.margin-top.margin-large { margin-top: 2.5rem; } .margin-bottom.margin-large { margin-bottom: 2.5rem; }
.margin-top.margin-xlarge { margin-top: 4rem; } .margin-bottom.margin-xlarge { margin-bottom: 4rem; }
.margin-top.margin-xxlarge { margin-top: 6rem; } .margin-bottom.margin-xxlarge { margin-bottom: 6rem; }
.margin-vertical.margin-xxsmall { margin-top: 0.25rem; margin-bottom: 0.25rem; }
.margin-vertical.margin-xsmall { margin-top: 0.5rem; margin-bottom: 0.5rem; }
.margin-vertical.margin-small { margin-top: 1rem; margin-bottom: 1rem; }
.margin-vertical.margin-medium { margin-top: 1.5rem; margin-bottom: 1.5rem; }
.margin-vertical.margin-large { margin-top: 2.5rem; margin-bottom: 2.5rem; }
.margin-vertical.margin-xlarge { margin-top: 4rem; margin-bottom: 4rem; }
.margin-horizontal.margin-small { margin-left: 1rem; margin-right: 1rem; }
.margin-horizontal.margin-medium { margin-left: 1.5rem; margin-right: 1.5rem; }
.margin-left.margin-xsmall { margin-left: 0.5rem; } .margin-left.margin-small { margin-left: 1rem; }
.margin-right.margin-xsmall { margin-right: 0.5rem; } .margin-right.margin-small { margin-right: 1rem; }
.padding-top.padding-xxsmall { padding-top: 0.25rem; } .padding-bottom.padding-xxsmall { padding-bottom: 0.25rem; }
.padding-top.padding-xsmall { padding-top: 0.5rem; } .padding-bottom.padding-xsmall { padding-bottom: 0.5rem; }
.padding-top.padding-small { padding-top: 1rem; } .padding-bottom.padding-small { padding-bottom: 1rem; }
.padding-top.padding-medium { padding-top: 1.5rem; } .padding-bottom.padding-medium { padding-bottom: 1.5rem; }
.padding-top.padding-large { padding-top: 2.5rem; } .padding-bottom.padding-large { padding-bottom: 2.5rem; }
.padding-vertical.padding-xxsmall { padding-top: 0.25rem; padding-bottom: 0.25rem; }
.padding-vertical.padding-xsmall { padding-top: 0.5rem; padding-bottom: 0.5rem; }
.padding-vertical.padding-small { padding-top: 1rem; padding-bottom: 1rem; }
.padding-vertical.padding-medium { padding-top: 1.5rem; padding-bottom: 1.5rem; }
.padding-vertical.padding-large { padding-top: 2.5rem; padding-bottom: 2.5rem; }
.padding-horizontal.padding-xsmall { padding-left: 0.5rem; padding-right: 0.5rem; }
.padding-horizontal.padding-small { padding-left: 1rem; padding-right: 1rem; }
.padding-horizontal.padding-medium { padding-left: 1.5rem; padding-right: 1.5rem; }
.padding-horizontal.padding-large { padding-left: 2.5rem; padding-right: 2.5rem; }
.spacing-clean { margin: 0; padding: 0; }

/* --- Typography --- */
.heading-style-h1 { font-family: var(--font-display); font-size: 3.75rem; line-height: 1.05; font-weight: 700; letter-spacing: -0.025em; color: var(--yen-text); }
.heading-style-h2 { font-family: var(--font-display); font-size: 2.75rem; line-height: 1.1; font-weight: 700; letter-spacing: -0.02em; color: var(--yen-text); }
.heading-style-h3 { font-family: var(--font-body); font-size: 1.5rem; line-height: 1.3; font-weight: 600; color: var(--yen-text); }
.heading-style-h4 { font-family: var(--font-body); font-size: 1.25rem; line-height: 1.35; font-weight: 600; color: var(--yen-text); }
.heading-style-h5 { font-family: var(--font-body); font-size: 1.0625rem; line-height: 1.4; font-weight: 600; color: var(--yen-text); }
.heading-style-h6 { font-family: var(--font-body); font-size: 0.8125rem; line-height: 1.4; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--yen-text-muted); }
.text-size-xlarge { font-size: 1.25rem; line-height: 1.6; }
.text-size-large { font-size: 1.125rem; line-height: 1.65; }
.text-size-medium { font-size: 1rem; line-height: 1.65; }
.text-size-regular { font-size: 0.9375rem; line-height: 1.65; }
.text-size-small { font-size: 0.8125rem; line-height: 1.5; }
.text-size-tiny { font-size: 0.75rem; line-height: 1.4; }
.text-weight-bold { font-weight: 700; }
.text-weight-semibold { font-weight: 600; }
.text-weight-medium { font-weight: 500; }
.text-weight-normal { font-weight: 400; }
.text-weight-light { font-weight: 300; }
.text-color-primary { color: var(--yen-text); }
.text-color-secondary { color: var(--yen-text-secondary); }
.text-color-tertiary { color: var(--yen-text-muted); }
.text-color-white { color: #FFFFFF; }
.text-color-black { color: #000000; }
.text-color-alternate { color: var(--yen-purple); }
.text-style-italic { font-style: italic; }
.text-style-uppercase { text-transform: uppercase; }
.text-style-allcaps { text-transform: uppercase; letter-spacing: 0.08em; }
.text-style-nowrap { white-space: nowrap; }
.text-align-left { text-align: left; }
.text-align-center { text-align: center; }
.text-align-right { text-align: right; }
.text-style-link { color: var(--yen-purple); transition: color var(--transition); }
.text-style-link:hover { color: var(--yen-purple-hover); }

/* --- Max Width --- */
.max-width-full { max-width: 100%; }
.max-width-xlarge { max-width: 56rem; }
.max-width-large { max-width: 48rem; }
.max-width-medium { max-width: 36rem; }
.max-width-small { max-width: 28rem; }
.max-width-xsmall { max-width: 20rem; }
.align-center { margin-left: auto; margin-right: auto; }

/* --- Background Colors --- */
.background-color-primary { background-color: var(--yen-purple); }
.background-color-secondary { background-color: var(--yen-off-white); }
.background-color-tertiary { background-color: var(--yen-purple-light); }
.background-color-white { background-color: var(--yen-white); }
.background-color-black { background-color: var(--yen-navy); }

/* --- Buttons --- */
.button { display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem; padding: 0.8125rem 1.75rem; font-family: var(--font-body); font-size: 0.9375rem; font-weight: 500; color: #FFFFFF; background-color: var(--yen-purple); border: 1.5px solid var(--yen-purple); border-radius: var(--radius-md); cursor: pointer; transition: all var(--transition); text-decoration: none; line-height: 1.4; }
.button:hover { background-color: var(--yen-purple-hover); border-color: var(--yen-purple-hover); transform: translateY(-1px); box-shadow: var(--shadow-md); }
.button-secondary { display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem; padding: 0.8125rem 1.75rem; font-family: var(--font-body); font-size: 0.9375rem; font-weight: 500; color: var(--yen-text); background-color: transparent; border: 1.5px solid var(--yen-border); border-radius: var(--radius-md); cursor: pointer; transition: all var(--transition); text-decoration: none; line-height: 1.4; }
.button-secondary:hover { border-color: var(--yen-purple); color: var(--yen-purple); transform: translateY(-1px); }
.button-tertiary { display: inline-flex; align-items: center; gap: 0.375rem; padding: 0.25rem 0; font-family: var(--font-body); font-size: 0.9375rem; font-weight: 500; color: var(--yen-purple); background: none; border: none; cursor: pointer; transition: color var(--transition); text-decoration: none; }
.button-tertiary:hover { color: var(--yen-purple-hover); }
.button.is-small { padding: 0.5rem 1.25rem; font-size: 0.8125rem; }
.button-secondary.is-small { padding: 0.5rem 1.25rem; font-size: 0.8125rem; }
.button.is-white { background-color: #FFFFFF; color: var(--yen-text); border-color: #FFFFFF; }
.button.is-white:hover { background-color: var(--yen-off-white); }

/* --- Borders & Shadows --- */
.border-radius-small { border-radius: var(--radius-sm); }
.border-radius-medium { border-radius: var(--radius-md); }
.border-radius-large { border-radius: var(--radius-lg); }
.border-radius-xlarge { border-radius: var(--radius-xl); }
.shadow-xsmall { box-shadow: 0 1px 2px rgba(14,13,31,0.03); }
.shadow-small { box-shadow: var(--shadow-sm); }
.shadow-medium { box-shadow: var(--shadow-md); }
.shadow-large { box-shadow: var(--shadow-lg); }

/* --- Display --- */
.hide { display: none !important; }
.display-none { display: none; }
.display-block { display: block; }
.overflow-hidden { overflow: hidden; }

/* --- Forms --- */
.form-input { width: 100%; padding: 0.75rem 1rem; font-family: var(--font-body); font-size: 1rem; font-weight: 450; color: var(--yen-text); background-color: var(--yen-white); border: 1.5px solid var(--yen-border); border-radius: var(--radius-md); transition: border-color var(--transition), box-shadow var(--transition); outline: none; }
.form-input:focus { border-color: var(--yen-purple); box-shadow: 0 0 0 3px rgba(124,92,252,0.10); }
.form-input::placeholder { color: var(--yen-text-muted); }
.form-label { display: block; font-size: 0.875rem; font-weight: 500; color: var(--yen-text); margin-bottom: 0.375rem; }
.form-input.is-large { padding: 1rem 1.25rem; font-size: 1.0625rem; border-radius: var(--radius-lg); }

/* --- Icons --- */
.icon-embed-xxsmall { width: 0.75rem; height: 0.75rem; display: flex; }
.icon-embed-xsmall { width: 1rem; height: 1rem; display: flex; }
.icon-embed-small { width: 1.25rem; height: 1.25rem; display: flex; }
.icon-embed-medium { width: 1.5rem; height: 1.5rem; display: flex; }
.icon-embed-large { width: 2rem; height: 2rem; display: flex; }
.icon-embed-xlarge { width: 3rem; height: 3rem; display: flex; }
.icon-embed-xxsmall svg, .icon-embed-xsmall svg, .icon-embed-small svg, .icon-embed-medium svg, .icon-embed-large svg, .icon-embed-xlarge svg { width: 100%; height: 100%; }


/* ============================================
   COMPONENT: Navbar (Canonical)
   ============================================ */
.navbar_component { position: sticky; top: 0; z-index: 100; background-color: rgba(255,255,255,0.95); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); border-bottom: 1px solid var(--yen-border-light); }
.navbar_container { display: flex; align-items: center; justify-content: space-between; max-width: 1280px; margin: 0 auto; padding: 0.875rem 5%; }
.navbar_logo-link { display: flex; align-items: center; gap: 0.625rem; font-family: var(--font-body); font-weight: 600; font-size: 1.0625rem; color: var(--yen-text); letter-spacing: -0.01em; }
.navbar_logo-link svg { flex-shrink: 0; }
.navbar_menu { display: flex; align-items: center; gap: 2rem; }
.navbar_link { font-size: 0.875rem; font-weight: 500; color: var(--yen-text-muted); transition: color var(--transition); }
.navbar_link:hover { color: var(--yen-text); }
.navbar_link.is-active { color: var(--yen-text); }
.navbar_link.is-muted { color: var(--yen-text-muted); }
.navbar_button-wrapper { display: flex; align-items: center; gap: 1rem; }

/* ============================================
   COMPONENT: Hero
   ============================================ */
.hero_content-wrapper { text-align: center; max-width: 800px; margin: 0 auto; }
.hero_search-wrapper { max-width: 580px; margin: 0 auto; position: relative; }
.hero_search-input { width: 100%; padding: 1rem 1.5rem; padding-right: 3.5rem; font-family: var(--font-body); font-size: 1.0625rem; font-weight: 450; border-radius: 60px; border: 1.5px solid var(--yen-border); background: var(--yen-white); box-shadow: var(--shadow-md); transition: all var(--transition); color: var(--yen-text); outline: none; }
.hero_search-input:focus { border-color: var(--yen-purple); box-shadow: 0 0 0 4px rgba(124,92,252,0.10), var(--shadow-md); }
.hero_search-input::placeholder { color: var(--yen-text-muted); }
.hero_search-icon { position: absolute; right: 1.25rem; top: 50%; transform: translateY(-50%); color: var(--yen-text-muted); display: flex; }
.hero_pills-wrapper { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.5rem; }
.hero_pill { display: inline-flex; align-items: center; padding: 0.4375rem 1rem; font-size: 0.8125rem; font-weight: 500; color: var(--yen-text-secondary); background-color: var(--yen-white); border: 1.5px solid var(--yen-border); border-radius: 60px; transition: all var(--transition); white-space: nowrap; }
.hero_pill:hover { border-color: var(--yen-purple); color: var(--yen-purple); background-color: var(--yen-purple-light); }
.hero_button-wrapper { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.75rem; }

/* ============================================
   COMPONENT: Trust Bar
   ============================================ */
.trust-bar_wrapper { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 2rem; }
.trust-bar_item { display: flex; align-items: center; gap: 0.5rem; font-size: 0.875rem; font-weight: 500; color: var(--yen-text-secondary); }
.trust-bar_number { font-weight: 600; color: var(--yen-text); font-size: 0.9375rem; }
.trust-bar_divider { width: 1px; height: 1.25rem; background-color: var(--yen-border); }

/* ============================================
   COMPONENT: Expert Card
   ============================================ */
.expert-card_wrapper { background: var(--yen-white); border: 1.5px solid var(--yen-border); border-radius: var(--radius-lg); padding: 1.5rem; transition: all var(--transition); cursor: pointer; display: flex; flex-direction: column; height: 100%; text-decoration: none; color: inherit; }
.expert-card_wrapper:hover { border-color: var(--yen-purple-200); box-shadow: var(--shadow-md); transform: translateY(-2px); }
.expert-card_header { display: flex; align-items: flex-start; gap: 0.875rem; }
.expert-card_avatar { width: 52px; height: 52px; border-radius: 50%; background: linear-gradient(135deg, var(--yen-purple-light), var(--yen-purple-200)); flex-shrink: 0; display: flex; align-items: center; justify-content: center; font-family: var(--font-body); font-weight: 700; color: var(--yen-purple); font-size: 1rem; }
.expert-card_info { flex: 1; min-width: 0; }
.expert-card_name { font-weight: 600; font-size: 1rem; color: var(--yen-text); line-height: 1.3; }
.expert-card_title { font-size: 0.8125rem; color: var(--yen-text-muted); margin-top: 0.125rem; }
.expert-card_badge { display: inline-flex; align-items: center; gap: 0.25rem; padding: 0.1875rem 0.5rem; font-size: 0.6875rem; font-weight: 600; color: var(--yen-teal-dark); background: var(--yen-teal-light); border-radius: 60px; margin-top: 0.375rem; }
.expert-card_tagline { font-size: 0.875rem; color: var(--yen-text-secondary); line-height: 1.5; margin-top: 0.75rem; flex: 1; }
.expert-card_tags { display: flex; flex-wrap: wrap; gap: 0.375rem; margin-top: 0.75rem; }
.expert-card_tag { padding: 0.1875rem 0.5rem; font-size: 0.6875rem; font-weight: 500; background: var(--yen-off-white); color: var(--yen-text-muted); border-radius: 4px; }
.expert-card_meta { display: flex; flex-wrap: wrap; gap: 0.75rem; font-size: 0.75rem; color: var(--yen-text-muted); margin-top: 0.875rem; padding-top: 0.875rem; border-top: 1px solid var(--yen-border-light); }
.expert-card_meta-item { display: flex; align-items: center; gap: 0.25rem; }
.expert-card_price { font-family: var(--font-mono); font-weight: 500; color: var(--yen-text); }

/* ============================================
   COMPONENT: Offer Card
   ============================================ */
.offer-card_wrapper { background: var(--yen-white); border: 1.5px solid var(--yen-border); border-radius: var(--radius-lg); padding: 1.5rem; transition: all var(--transition); cursor: pointer; display: flex; flex-direction: column; height: 100%; text-decoration: none; color: inherit; }
.offer-card_wrapper:hover { border-color: var(--yen-purple-200); box-shadow: var(--shadow-md); transform: translateY(-2px); }
.offer-card_header { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; }
.offer-card_price { font-family: var(--font-mono); font-size: 1.25rem; font-weight: 500; color: var(--yen-text); white-space: nowrap; }
.offer-card_price.is-free { color: var(--success); }
.offer-card_name { font-weight: 600; font-size: 1rem; color: var(--yen-text); line-height: 1.35; }
.offer-card_category-badge { display: inline-flex; padding: 0.1875rem 0.5rem; font-size: 0.6875rem; font-weight: 600; color: var(--yen-purple); background: var(--yen-purple-light); border-radius: 4px; }
.offer-card_description { font-size: 0.875rem; color: var(--yen-text-secondary); line-height: 1.5; margin-top: 0.625rem; flex: 1; }
.offer-card_expert { display: flex; align-items: center; gap: 0.5rem; margin-top: 1rem; padding-top: 0.875rem; border-top: 1px solid var(--yen-border-light); }
.offer-card_expert-avatar { width: 28px; height: 28px; border-radius: 50%; background: linear-gradient(135deg, var(--yen-purple-light), var(--yen-purple-200)); flex-shrink: 0; display: flex; align-items: center; justify-content: center; font-size: 0.5625rem; font-weight: 700; color: var(--yen-purple); }
.offer-card_expert-name { font-size: 0.8125rem; color: var(--yen-text-secondary); }
.offer-card_delivery { display: flex; align-items: center; gap: 0.375rem; font-size: 0.75rem; color: var(--yen-text-muted); margin-top: 0.75rem; }

/* ============================================
   COMPONENT: Category Card
   ============================================ */
.category-card_wrapper { background: var(--yen-white); border: 1.5px solid var(--yen-border); border-radius: var(--radius-lg); padding: 1.25rem; text-align: center; transition: all var(--transition); cursor: pointer; display: flex; flex-direction: column; align-items: center; gap: 0.625rem; }
.category-card_wrapper:hover { border-color: var(--yen-purple-200); background: var(--yen-purple-light); }
.category-card_icon { width: 2.5rem; height: 2.5rem; display: flex; align-items: center; justify-content: center; border-radius: var(--radius-md); background: var(--yen-purple-light); color: var(--yen-purple); }
.category-card_label { font-size: 0.8125rem; font-weight: 600; color: var(--yen-text-secondary); }

/* ============================================
   COMPONENT: Testimonial
   ============================================ */
.testimonial_wrapper { background: var(--yen-white); border: 1.5px solid var(--yen-border); border-radius: var(--radius-lg); padding: 2rem; }
.testimonial_quote { font-size: 1rem; font-weight: 450; color: var(--yen-text); line-height: 1.65; }
.testimonial_author { display: flex; align-items: center; gap: 0.75rem; margin-top: 1.25rem; }
.testimonial_avatar { width: 40px; height: 40px; border-radius: 50%; background: linear-gradient(135deg, var(--yen-purple-light), var(--yen-purple-200)); flex-shrink: 0; }
.testimonial_name { font-weight: 600; font-size: 0.875rem; }
.testimonial_role { font-size: 0.8125rem; color: var(--yen-text-muted); }
.testimonial-large_wrapper { background: var(--yen-white); border: 1.5px solid var(--yen-border); border-radius: var(--radius-xl); padding: 3rem 3.5rem; text-align: center; max-width: 800px; margin: 0 auto; }

/* ============================================
   COMPONENT: Steps
   ============================================ */
.steps_wrapper { display: flex; align-items: flex-start; gap: 2rem; }
.steps_item { flex: 1; text-align: center; position: relative; }
.steps_number { display: inline-flex; align-items: center; justify-content: center; width: 2.75rem; height: 2.75rem; border-radius: 50%; background: var(--yen-purple-light); color: var(--yen-purple); font-family: var(--font-body); font-weight: 700; font-size: 1rem; margin-bottom: 0.75rem; }
.steps_connector { position: absolute; top: 1.375rem; left: calc(50% + 1.75rem); right: calc(-50% + 1.75rem); height: 1px; background: var(--yen-border); }
.steps_item:last-child .steps_connector { display: none; }

/* ============================================
   COMPONENT: Filters
   ============================================ */
.filter_wrapper { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.filter_pill { display: inline-flex; align-items: center; padding: 0.4375rem 0.875rem; font-size: 0.8125rem; font-weight: 500; color: var(--yen-text-secondary); background: var(--yen-white); border: 1.5px solid var(--yen-border); border-radius: 60px; cursor: pointer; transition: all var(--transition); }
.filter_pill:hover { border-color: var(--yen-purple); color: var(--yen-purple); }
.filter_pill.is-active { background: var(--yen-purple); color: white; border-color: var(--yen-purple); }
.filter_select { padding: 0.5rem 2rem 0.5rem 0.875rem; font-size: 0.8125rem; font-weight: 500; border: 1.5px solid var(--yen-border); border-radius: 60px; background: var(--yen-white); color: var(--yen-text-secondary); appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='%236E6C82' viewBox='0 0 16 16'%3E%3Cpath d='M8 11L3 6h10l-5 5z'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 0.75rem center; cursor: pointer; font-family: var(--font-body); }
.filter_search { padding: 0.5rem 0.875rem; padding-left: 2.25rem; font-size: 0.8125rem; font-weight: 500; border: 1.5px solid var(--yen-border); border-radius: 60px; background: var(--yen-white); color: var(--yen-text); min-width: 200px; font-family: var(--font-body); outline: none; }

/* ============================================
   COMPONENT: Pricing Card
   ============================================ */
.pricing-card_wrapper { background: var(--yen-white); border: 1.5px solid var(--yen-border); border-radius: var(--radius-xl); padding: 2.5rem 2rem; flex: 1; }
.pricing-card_wrapper.is-featured { border-color: var(--yen-purple); box-shadow: 0 0 0 1px var(--yen-purple), var(--shadow-lg); position: relative; }
.pricing-card_badge { position: absolute; top: -0.75rem; left: 50%; transform: translateX(-50%); padding: 0.25rem 1rem; font-size: 0.75rem; font-weight: 600; color: white; background: var(--yen-purple); border-radius: 60px; white-space: nowrap; }
.pricing-card_price { font-family: var(--font-mono); font-size: 2.5rem; font-weight: 500; color: var(--yen-text); }
.pricing-card_price-period { font-family: var(--font-body); font-size: 1rem; font-weight: 400; color: var(--yen-text-muted); }
.pricing-card_features { list-style: none; }
.pricing-card_feature { display: flex; align-items: flex-start; gap: 0.625rem; padding: 0.5rem 0; font-size: 0.9375rem; color: var(--yen-text-secondary); }
.pricing-card_feature-icon { color: var(--yen-teal); flex-shrink: 0; margin-top: 0.1875rem; }
.pricing-card_feature.is-coming { opacity: 0.5; }

/* ============================================
   COMPONENT: FAQ
   ============================================ */
.faq_item { border-bottom: 1px solid var(--yen-border-light); }
.faq_question { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 1.25rem 0; cursor: pointer; font-weight: 500; font-size: 1rem; color: var(--yen-text); transition: color var(--transition); }
.faq_question:hover { color: var(--yen-purple); }
.faq_answer { padding-bottom: 1.25rem; font-size: 0.9375rem; color: var(--yen-text-secondary); line-height: 1.65; }
.faq_chevron { transition: transform var(--transition); color: var(--yen-text-muted); flex-shrink: 0; }

/* ============================================
   COMPONENT: Profile Detail
   ============================================ */
.profile_hero-wrapper { display: flex; gap: 2rem; align-items: flex-start; }
.profile_avatar-large { width: 96px; height: 96px; border-radius: 50%; background: linear-gradient(135deg, var(--yen-purple-light), var(--yen-purple-200)); display: flex; align-items: center; justify-content: center; font-family: var(--font-body); font-weight: 700; color: var(--yen-purple); font-size: 2rem; flex-shrink: 0; }
.profile_info { flex: 1; min-width: 0; }
.profile_meta-row { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem; margin-top: 0.75rem; }
.profile_meta-item { display: inline-flex; align-items: center; gap: 0.375rem; font-size: 0.875rem; color: var(--yen-text-secondary); }
.profile_quick-stats { display: flex; flex-wrap: wrap; gap: 1.5rem; margin-top: 1.5rem; padding-top: 1.5rem; border-top: 1px solid var(--yen-border-light); }
.profile_stat { text-align: center; flex: 1; min-width: 100px; }
.profile_stat-number { font-weight: 700; font-size: 1.5rem; color: var(--yen-text); }
.profile_stat-label { font-size: 0.75rem; color: var(--yen-text-muted); margin-top: 0.125rem; }
.profile_section { border-bottom: 1px solid var(--yen-border-light); }
.profile_tag { display: inline-flex; align-items: center; padding: 0.4375rem 0.875rem; font-size: 0.8125rem; font-weight: 500; color: var(--yen-purple); background: var(--yen-purple-light); border-radius: 60px; }
.profile_tags-wrapper { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.profile_endorsement { display: flex; flex-direction: column; gap: 0.75rem; padding: 1.25rem; background: var(--yen-off-white); border-radius: var(--radius-lg); }
.profile_endorsement-avatar { width: 40px; height: 40px; border-radius: 50%; background: linear-gradient(135deg, var(--yen-purple-light), var(--yen-purple-200)); flex-shrink: 0; display: flex; align-items: center; justify-content: center; font-family: var(--font-body); font-weight: 700; color: var(--yen-purple); font-size: 0.8125rem; }
.profile_endorsement-quote { font-size: 0.9375rem; color: var(--yen-text-secondary); line-height: 1.65; }
.profile_review-card { background: var(--yen-white); border: 1.5px solid var(--yen-border); border-radius: var(--radius-lg); padding: 1.5rem; }
.profile_review-stars { display: flex; gap: 0.125rem; color: #F59E0B; }
.profile_review-quote { font-size: 0.9375rem; color: var(--yen-text-secondary); line-height: 1.65; margin-top: 0.75rem; }
.profile_review-author { font-size: 0.8125rem; color: var(--yen-text-muted); margin-top: 0.75rem; }
.profile_outcome { font-family: var(--font-display); font-size: 1.375rem; line-height: 1.55; color: var(--yen-text); font-weight: 400; font-style: italic; }

/* ============================================
   COMPONENT: Offer Detail
   ============================================ */
.offer-detail_hero-layout { display: flex; gap: 2.5rem; }
.offer-detail_hero-main { flex: 1; min-width: 0; }
.offer-detail_hero-sidebar { flex: 0 0 340px; }
.offer-detail_category-pill { display: inline-flex; align-items: center; padding: 0.375rem 0.875rem; font-size: 0.8125rem; font-weight: 600; color: var(--yen-purple); background: var(--yen-purple-light); border-radius: 60px; }
.offer-detail_price-display { font-family: var(--font-mono); font-size: 2.5rem; font-weight: 500; line-height: 1.15; color: var(--yen-text); }
.offer-detail_price-meta { font-size: 0.9375rem; color: var(--yen-text-muted); }
.offer-detail_expert-card { background: var(--yen-white); border: 1.5px solid var(--yen-border); border-radius: var(--radius-lg); padding: 1.5rem; }
.offer-detail_expert-header { display: flex; align-items: center; gap: 0.875rem; }
.offer-detail_expert-avatar { width: 52px; height: 52px; border-radius: 50%; background: linear-gradient(135deg, var(--yen-purple-light), var(--yen-purple-200)); display: flex; align-items: center; justify-content: center; font-family: var(--font-body); font-weight: 700; color: var(--yen-purple); font-size: 1rem; flex-shrink: 0; }
.offer-detail_expert-info { flex: 1; min-width: 0; }
.offer-detail_expert-name { font-weight: 600; font-size: 1rem; color: var(--yen-text); }
.offer-detail_expert-title { font-size: 0.8125rem; color: var(--yen-text-muted); margin-top: 0.125rem; }
.offer-detail_expert-meta { display: flex; flex-direction: column; gap: 0.375rem; font-size: 0.8125rem; color: var(--yen-text-secondary); }
.offer-detail_expert-meta-item { display: flex; align-items: center; gap: 0.375rem; }
.offer-detail_endorsed-badge { display: inline-flex; align-items: center; gap: 0.25rem; padding: 0.1875rem 0.625rem; font-size: 0.6875rem; font-weight: 600; color: var(--yen-teal-dark); background: var(--yen-teal-light); border-radius: 60px; }
.offer-detail_book-button { display: flex; align-items: center; justify-content: center; width: 100%; padding: 1rem 1.75rem; font-family: var(--font-body); font-size: 1rem; font-weight: 600; color: #FFFFFF; background-color: var(--yen-purple); border: 1.5px solid var(--yen-purple); border-radius: var(--radius-md); cursor: pointer; transition: all var(--transition); text-decoration: none; }
.offer-detail_book-button:hover { background-color: var(--yen-purple-hover); border-color: var(--yen-purple-hover); transform: translateY(-1px); box-shadow: var(--shadow-md); }
.offer-detail_contact-link { display: block; text-align: center; font-size: 0.875rem; color: var(--yen-purple); font-weight: 500; transition: color var(--transition); }
.offer-detail_contact-link:hover { color: var(--yen-purple-hover); }
.offer-detail_check-list { list-style: none; display: flex; flex-direction: column; gap: 0.75rem; }
.offer-detail_check-item { display: flex; align-items: flex-start; gap: 0.75rem; font-size: 0.9375rem; color: var(--yen-text-secondary); line-height: 1.65; }
.offer-detail_check-icon { flex-shrink: 0; width: 1.25rem; height: 1.25rem; margin-top: 0.1875rem; color: var(--yen-teal); }
.offer-detail_deliverables-list { list-style: none; display: flex; flex-direction: column; gap: 1rem; }
.offer-detail_deliverable-item { display: flex; align-items: flex-start; gap: 0.875rem; font-size: 0.9375rem; color: var(--yen-text-secondary); line-height: 1.65; }
.offer-detail_deliverable-number { flex-shrink: 0; width: 1.75rem; height: 1.75rem; border-radius: 50%; background: var(--yen-purple-light); color: var(--yen-purple); font-weight: 700; font-size: 0.75rem; display: flex; align-items: center; justify-content: center; margin-top: 0.125rem; }
.offer-detail_deliverable-title { font-weight: 600; color: var(--yen-text); }
.offer-detail_sticky-bar { position: sticky; bottom: 0; background: rgba(255,255,255,0.95); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); border-top: 1px solid var(--yen-border); padding: 0.875rem 5%; z-index: 50; }
.offer-detail_sticky-bar-content { display: flex; align-items: center; justify-content: space-between; max-width: 1280px; margin: 0 auto; width: 100%; }
.offer-detail_sticky-bar-left { display: flex; align-items: center; gap: 1rem; }
.offer-detail_sticky-bar-title { font-weight: 600; font-size: 0.9375rem; color: var(--yen-text); }
.offer-detail_sticky-bar-price { font-family: var(--font-mono); font-weight: 500; font-size: 1.125rem; color: var(--yen-text); }
.breadcrumb_wrapper { display: flex; align-items: center; gap: 0.5rem; }
.breadcrumb_link { color: var(--yen-text-muted); font-size: 0.8125rem; transition: color var(--transition); }
.breadcrumb_link:hover { color: var(--yen-purple); }
.breadcrumb_separator { color: var(--yen-text-muted); font-size: 0.75rem; display: flex; }
.breadcrumb_current { color: var(--yen-text-secondary); font-size: 0.8125rem; font-weight: 500; }

/* ============================================
   COMPONENT: Match / AI Chat
   ============================================ */
.match_chat-container { border: 1.5px solid var(--yen-border); border-radius: var(--radius-xl); padding: 2rem; box-shadow: var(--shadow-lg); background: var(--yen-white); }
.match_chat-messages { display: flex; flex-direction: column; gap: 1.25rem; }
.match_chat-row { display: flex; align-items: flex-start; gap: 0.75rem; }
.match_chat-row.is-user { flex-direction: row-reverse; }
.match_chat-avatar { width: 36px; height: 36px; border-radius: 50%; flex-shrink: 0; display: flex; align-items: center; justify-content: center; }
.match_chat-avatar.is-system { background: linear-gradient(135deg, var(--yen-purple), var(--yen-purple-hover)); }
.match_chat-avatar.is-user { background: var(--yen-off-white); border: 1.5px solid var(--yen-border); }
.match_chat-bubble { border-radius: var(--radius-lg); padding: 1rem 1.25rem; font-size: 0.9375rem; line-height: 1.65; max-width: 80%; }
.match_chat-bubble.is-system { background: var(--yen-off-white); color: var(--yen-text); border-top-left-radius: var(--radius-sm); }
.match_chat-bubble.is-user { background: var(--yen-purple); color: #FFFFFF; margin-left: auto; border-top-right-radius: var(--radius-sm); }
.match_recommendation-cards { display: flex; flex-wrap: wrap; gap: 1rem; margin-top: 0.75rem; }
.match_recommendation-card { flex: 1; min-width: 240px; background: var(--yen-white); border: 1.5px solid var(--yen-border); border-radius: var(--radius-lg); padding: 1.25rem; transition: all var(--transition); display: flex; flex-direction: column; text-decoration: none; color: inherit; }
.match_recommendation-card:hover { border-color: var(--yen-purple-200); box-shadow: var(--shadow-md); transform: translateY(-2px); }
.match_recommendation-type { display: inline-flex; padding: 0.1875rem 0.5rem; font-size: 0.6875rem; font-weight: 600; border-radius: 4px; width: fit-content; }
.match_recommendation-type.is-offer { color: var(--yen-purple); background: var(--yen-purple-light); }
.match_recommendation-type.is-expert { color: var(--yen-teal-dark); background: var(--yen-teal-light); }
.match_recommendation-card h4 { font-weight: 600; font-size: 1rem; color: var(--yen-text); line-height: 1.35; margin-top: 0.5rem; }
.match_recommendation-card p { font-size: 0.8125rem; color: var(--yen-text-secondary); line-height: 1.5; margin-top: 0.375rem; flex: 1; }
.match_recommendation-footer { display: flex; align-items: center; justify-content: space-between; margin-top: 0.875rem; padding-top: 0.75rem; border-top: 1px solid var(--yen-border-light); }
.match_input-wrapper { display: flex; gap: 0.75rem; margin-top: 1.5rem; }
.match_input-wrapper input { flex: 1; }
.match_input-wrapper .button { flex-shrink: 0; }

/* ============================================
   COMPONENT: How It Works (Process Steps)
   ============================================ */
.process-step_wrapper { display: flex; align-items: flex-start; gap: 2rem; padding: 2.5rem 0; border-bottom: 1px solid var(--yen-border-light); }
.process-step_wrapper:last-child { border-bottom: none; padding-bottom: 0; }
.process-step_wrapper:first-child { padding-top: 0; }
.process-step_number-wrapper { flex-shrink: 0; display: flex; align-items: center; justify-content: center; width: 3.5rem; height: 3.5rem; border-radius: 50%; background: var(--yen-purple-light); border: 1.5px solid var(--yen-purple-200); }
.process-step_number { font-weight: 700; font-size: 1.125rem; color: var(--yen-purple); }
.process-step_icon { flex-shrink: 0; display: flex; align-items: center; justify-content: center; width: 3rem; height: 3rem; border-radius: var(--radius-md); background: var(--yen-purple-light); color: var(--yen-purple); }
.process-step_content { flex: 1; min-width: 0; }

/* ============================================
   COMPONENT: Comparison Cards
   ============================================ */
.compare-card_wrapper { background: var(--yen-white); border: 1.5px solid var(--yen-border); border-radius: var(--radius-lg); padding: 2rem; transition: all var(--transition); }
.compare-card_wrapper:hover { border-color: var(--yen-purple-200); box-shadow: var(--shadow-md); }
.compare-card_vs { display: inline-flex; align-items: center; padding: 0.25rem 0.625rem; font-size: 0.6875rem; font-weight: 600; color: var(--yen-purple); background: var(--yen-purple-light); border-radius: 4px; text-transform: uppercase; letter-spacing: 0.04em; margin-bottom: 0.75rem; }

/* ============================================
   COMPONENT: Stats
   ============================================ */
.stats_wrapper { display: flex; flex-wrap: wrap; justify-content: center; gap: 3rem; }
.stats_item { text-align: center; }
.stats_number { font-weight: 700; font-size: 2.5rem; color: var(--yen-purple); line-height: 1.2; }
.stats_label { font-size: 0.875rem; color: var(--yen-text-secondary); margin-top: 0.25rem; }

/* ============================================
   COMPONENT: Value Card (For Experts)
   ============================================ */
.value-card_wrapper { background: var(--yen-white); border: 1.5px solid var(--yen-border); border-radius: var(--radius-lg); padding: 2rem; transition: all var(--transition); }
.value-card_wrapper:hover { border-color: var(--yen-purple-200); box-shadow: var(--shadow-sm); }
.value-card_icon { width: 2.75rem; height: 2.75rem; display: flex; align-items: center; justify-content: center; border-radius: var(--radius-md); background: var(--yen-purple-light); color: var(--yen-purple); margin-bottom: 1rem; }

/* ============================================
   COMPONENT: Diff Card (How It Works)
   ============================================ */
.diff-card_wrapper { background: var(--yen-white); border: 1.5px solid var(--yen-border); border-radius: var(--radius-lg); padding: 2rem; transition: all var(--transition); }
.diff-card_wrapper:hover { border-color: var(--yen-purple-200); box-shadow: var(--shadow-md); }
.diff-card_icon { display: flex; align-items: center; justify-content: center; width: 2.75rem; height: 2.75rem; border-radius: var(--radius-md); background: var(--yen-purple-light); color: var(--yen-purple); margin-bottom: 1rem; }

/* ============================================
   COMPONENT: CTA Banner
   ============================================ */
.cta-banner_wrapper { background: var(--yen-navy); border-radius: var(--radius-xl); padding: 3.5rem 2.5rem; text-align: center; position: relative; overflow: hidden; }
.cta-banner_wrapper::before { content: ''; position: absolute; top: -40%; right: -10%; width: 320px; height: 320px; background: radial-gradient(circle, rgba(124,92,252,0.15) 0%, transparent 70%); border-radius: 50%; pointer-events: none; }
.cta-banner_content { position: relative; z-index: 1; }

/* ============================================
   COMPONENT: Directory Search
   ============================================ */
.directory-header_search-wrapper { max-width: 580px; margin: 0 auto; position: relative; }
.directory-header_search-input { width: 100%; padding: 1rem 1.5rem 1rem 3.25rem; font-family: var(--font-body); font-size: 1rem; font-weight: 450; border-radius: 60px; border: 1.5px solid var(--yen-border); background: var(--yen-white); box-shadow: var(--shadow-sm); transition: all var(--transition); outline: none; color: var(--yen-text); }
.directory-header_search-input:focus { border-color: var(--yen-purple); box-shadow: 0 0 0 4px rgba(124,92,252,0.10), var(--shadow-sm); }
.directory-header_search-input::placeholder { color: var(--yen-text-muted); }
.directory-header_search-icon { position: absolute; left: 1.125rem; top: 50%; transform: translateY(-50%); color: var(--yen-text-muted); display: flex; pointer-events: none; }

/* ============================================
   COMPONENT: Footer (Canonical)
   ============================================ */
.footer_component { border-top: 1px solid var(--yen-border-light); }
.footer_content { display: flex; gap: 4rem; flex-wrap: wrap; }
.footer_left { flex: 0 0 260px; }
.footer_menu { display: flex; gap: 3rem; flex: 1; flex-wrap: wrap; }
.footer_menu-column { min-width: 130px; }
.footer_link { display: block; font-size: 0.875rem; color: var(--yen-text-secondary); padding: 0.25rem 0; transition: color var(--transition); }
.footer_link:hover { color: var(--yen-purple); }
.footer_bottom { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 1rem; border-top: 1px solid var(--yen-border-light); padding-top: 1.5rem; }
.footer_divider { border-top: 1px solid var(--yen-border-light); }

/* ============================================
   COMPONENT: Filter Bar (Directory Pages)
   ============================================ */
.filter-bar_wrapper { display: flex; flex-wrap: wrap; align-items: center; gap: 0.625rem; }
.filter-bar_count { display: inline-flex; align-items: center; justify-content: center; width: 1.375rem; height: 1.375rem; border-radius: 50%; background: var(--yen-purple); color: white; font-size: 0.6875rem; font-weight: 600; margin-left: 0.25rem; flex-shrink: 0; }
.filter-bar_label { display: inline-flex; align-items: center; gap: 0.375rem; font-size: 0.8125rem; font-weight: 500; color: var(--yen-text-muted); margin-right: 0.25rem; }
.results-header_wrapper { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 0.75rem; }
.load-more_wrapper { display: flex; justify-content: center; }

/* ============================================
   COMPONENT: Large Testimonial Quote Mark
   ============================================ */
.testimonial-large_quote-mark { font-family: var(--font-display); font-size: 4rem; color: var(--yen-purple-200); line-height: 1; margin-bottom: 0.5rem; }

/* ============================================
   COMPONENT: Match Page Extras
   ============================================ */
.match_browse-link { text-align: center; margin-top: 0.875rem; }
.match_cta-form { display: flex; gap: 0.75rem; max-width: 480px; margin: 0 auto; }
.match_cta-form input { flex: 1; }

/* ============================================
   COMPONENT: Page Wrapper with Sticky Bar
   ============================================ */
.page-wrapper.has-sticky-bar { padding-bottom: 5rem; }

/* ============================================
   Flexbox Grid (Client-First safe)
   ============================================ */
.layout_grid-2col { display: flex; flex-wrap: wrap; gap: 1.5rem; }
.layout_grid-2col > * { flex: 0 0 calc((100% - 1.5rem) / 2); }
.layout_grid-3col { display: flex; flex-wrap: wrap; gap: 1.5rem; }
.layout_grid-3col > * { flex: 0 0 calc((100% - 3rem) / 3); }
.layout_grid-4col { display: flex; flex-wrap: wrap; gap: 1.5rem; }
.layout_grid-4col > * { flex: 0 0 calc((100% - 4.5rem) / 4); }
.layout_sidebar { display: flex; gap: 2.5rem; }
.layout_sidebar-left { flex: 0 0 280px; }
.layout_sidebar-content { flex: 1; min-width: 0; }
.layout_flex-center { display: flex; align-items: center; justify-content: center; }
.layout_flex-between { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.layout_diff-grid { display: flex; flex-wrap: wrap; gap: 1.5rem; }
.layout_diff-grid > *:nth-child(1), .layout_diff-grid > *:nth-child(2) { flex: 0 0 calc((100% - 1.5rem) / 2); }
.layout_diff-grid > *:nth-child(3) { flex: 0 0 100%; }

/* ============================================
   Responsive
   ============================================ */
@media (max-width: 991px) {
  .heading-style-h1 { font-size: 2.75rem; }
  .heading-style-h2 { font-size: 2.125rem; }
  .padding-section-large { padding-top: 5rem; padding-bottom: 5rem; }
  .layout_grid-3col > * { flex: 0 0 calc((100% - 1.5rem) / 2); }
  .layout_grid-4col > * { flex: 0 0 calc((100% - 1.5rem) / 2); }
  .layout_sidebar { flex-direction: column; }
  .layout_sidebar-left { flex: none; width: 100%; }
  .steps_wrapper { flex-direction: column; gap: 1.5rem; }
  .steps_connector { display: none; }
  .navbar_menu { display: none; }
  .hide-tablet { display: none !important; }
  .offer-detail_hero-layout { flex-direction: column; }
  .offer-detail_hero-sidebar { flex: none; width: 100%; max-width: 400px; }
  .process-step_wrapper { gap: 1.5rem; }
  .stats_number { font-size: 2rem; }
  .layout_diff-grid > *:nth-child(1), .layout_diff-grid > *:nth-child(2) { flex: 0 0 calc((100% - 1.5rem) / 2); }
}
@media (max-width: 767px) {
  .heading-style-h1 { font-size: 2.125rem; }
  .heading-style-h2 { font-size: 1.75rem; }
  .padding-section-large { padding-top: 3.5rem; padding-bottom: 3.5rem; }
  .padding-section-medium { padding-top: 2.5rem; padding-bottom: 2.5rem; }
  .layout_grid-2col > * { flex: 0 0 100%; }
  .layout_grid-3col > * { flex: 0 0 100%; }
  .layout_grid-4col > * { flex: 0 0 calc((100% - 1.5rem) / 2); }
  .layout_diff-grid > *:nth-child(1), .layout_diff-grid > *:nth-child(2), .layout_diff-grid > *:nth-child(3) { flex: 0 0 100%; }
  .footer_content { flex-direction: column; gap: 2rem; }
  .footer_left { flex: none; }
  .profile_hero-wrapper { flex-direction: column; }
  .trust-bar_wrapper { flex-direction: column; gap: 0.75rem; }
  .trust-bar_divider { display: none; }
  .hide-mobile-landscape { display: none !important; }
  .offer-detail_hero-sidebar { max-width: 100%; }
  .offer-detail_price-display { font-size: 2rem; }
  .process-step_wrapper { flex-direction: column; gap: 1rem; }
  .stats_wrapper { flex-direction: column; gap: 1.5rem; }
  .match_chat-bubble { max-width: 92%; }
  .match_recommendation-cards { flex-direction: column; }
  .match_recommendation-card { min-width: 100%; }
  .match_input-wrapper { flex-direction: column; }
  .match_cta-form { flex-direction: column; }
  .cta-banner_wrapper { padding: 2.5rem 1.5rem; }
}
@media (max-width: 479px) {
  .padding-global { padding-left: 1.25rem; padding-right: 1.25rem; }
  .layout_grid-4col > * { flex: 0 0 100%; }
  .hide-mobile-portrait { display: none !important; }
}

/* SVG Logo — inherit primary color from theme */
.navbar_logo-link svg circle:first-child { fill: var(--yen-purple); }

/* ============================================
   MISSING STYLES (Referenced in HTML)
   ============================================ */

/* Button Variants */
.button.is-teal { background-color: var(--yen-teal); border-color: var(--yen-teal); }
.button.is-teal:hover { background-color: var(--yen-teal-dark); border-color: var(--yen-teal-dark); }
.button-secondary.is-white-outline { color: rgba(255,255,255,0.9); border-color: rgba(255,255,255,0.3); background: transparent; }
.button-secondary.is-white-outline:hover { color: #FFFFFF; border-color: rgba(255,255,255,0.6); background: rgba(255,255,255,0.06); }
.button.is-full-width, .button-secondary.is-full-width { width: 100%; }
.button-full-width_wrapper { width: 100%; }

/* Text Variants */
.text-color-white-muted { color: rgba(255,255,255,0.7); }

/* Expert Card — Free Price Label */
.expert-card_price.is-free { color: var(--success); font-family: var(--font-body); font-weight: 600; }

/* Layout Utilities */
.layout_flex-end { display: flex; justify-content: flex-end; align-items: center; }

/* Match Recommendation Expert Row */
.match_recommendation-expert { display: flex; align-items: center; gap: 0.5rem; margin-top: 0.625rem; font-size: 0.75rem; }

/* ============================================
   CONVERSION POLISH
   ============================================ */

/* Eyebrow / Section Label */
.section-label { display: inline-flex; align-items: center; gap: 0.375rem; padding: 0.3125rem 0.875rem; font-size: 0.6875rem; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--yen-purple); background: var(--yen-purple-light); border-radius: 60px; }
.section-label.is-dark { color: rgba(255,255,255,0.9); background: rgba(255,255,255,0.12); }

/* Testimonial large quote — more visual weight */
.testimonial-large_wrapper .testimonial_quote { font-family: var(--font-display); font-size: 1.375rem; line-height: 1.6; font-weight: 400; font-style: italic; }

/* Card focus ring for keyboard accessibility */
.expert-card_wrapper:focus-visible, .offer-card_wrapper:focus-visible, .match_recommendation-card:focus-visible { outline: 2px solid var(--yen-purple); outline-offset: 2px; }

/* Smooth page transitions between themes */
html { transition: color 0.3s ease, background-color 0.3s ease; }
body, .navbar_component, .footer_component { transition: background-color 0.3s ease, border-color 0.3s ease; }
.button, .button-secondary { transition: all var(--transition), background-color 0.3s ease; }