/**
 * Home Sections — page-specific styles for the homepage.
 * Shared components (buttons, pills, cards, tricolor) are in components.css.
 * Design tokens are in tokens.css.
 *
 * MIGRATION NOTES:
 * - Pills/badges → ime-pill ime-pill--{blue|pink} in HTML
 * - Buttons → ime-btn-primary / ime-btn-secondary / btn-shimmer in HTML
 * - Section headings h2 → ime-section-headline in HTML
 * - Cards → ime-card in HTML
 * - Card titles h3 → ime-card-title in HTML
 * - Section padding → ime-section / ime-section--sm / ime-section--lg in HTML
 * - Gradient text spans → ime-gradient-text in HTML
 */

/* ─── Why You're Here ────────────────────────────────────────── */
/* KEEP: page-specific 2-col photo+text layout */
.why-here {
  padding: var(--sp-11) 0;
  background: var(--color-white);
}
.why-here-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 56px;
  align-items: stretch;
}
.why-here-photo {
  position: relative;
  overflow: hidden;
  border-radius: var(--r-lg);
  min-height: 280px;
}
.why-here-photo img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 35% 35%;
}
/* KEEP: page-specific heading sizing for this section */
.why-here-title {
  font-size: clamp(32px, 4vw, 44px);
  font-weight: var(--font-weight-extrabold);
  line-height: var(--line-height-snug);
  margin: 0 0 28px;
  color: var(--color-text);
}
.why-here-title .accent-blue { color: var(--color-blue); }
.why-here-title .accent-pink { color: var(--color-pink); }
/* KEEP: subtitle variant unique to this section */
.why-here-subtitle {
  font-size: clamp(24px, 3vw, 32px);
  font-weight: var(--font-weight-semibold);
  line-height: 1.3;
  color: var(--color-blue);
  margin: 0 0 28px;
}
.why-here-text p {
  font-size: var(--font-size-md);
  line-height: var(--line-height-loose);
  color: var(--color-muted);
  margin: 0 0 var(--sp-4);
}
.why-here-text .btn-pill {
  margin-top: var(--sp-3);
}
/* KEEP: RTL reverse layout for alternating photo/text rows */
.why-here--reverse .why-here-grid {
  grid-template-columns: 1fr 1fr;
  direction: rtl;
}
.why-here--reverse .why-here-grid > * {
  direction: ltr;
}
@media (max-width: 768px) {
  .why-here { padding: 56px 0; }
  .why-here-grid { grid-template-columns: 1fr; gap: var(--sp-7); }
  .why-here--reverse .why-here-grid { direction: ltr; }
  .why-here-photo img { height: 300px; min-height: 300px; }
  .why-here-title { font-size: 28px; }
}

/* ─── How It Works (compact) ─────────────────────────────────── */
/* KEEP: section padding — slightly different from ime-section defaults */
.hiw-compact {
  padding: 72px 0;
  background: var(--color-bg);
}
/* KEEP: centered header layout */
.hiw-compact-hd {
  text-align: center;
  margin-bottom: var(--sp-9);
}
/* KEEP: 2-col card grid layout */
.hiw-compact-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 28px;
  max-width: 960px;
  margin: 0 auto;
}
/* KEEP: card layout + gradient top bar — page-specific decoration */
/* ime-card handles visual shell; hiw-compact-card adds top bar + overflow */
.hiw-compact-card {
  padding: var(--sp-7);
  position: relative;
  overflow: hidden;
}
.hiw-compact-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: var(--grad-primary);
}
/* KEEP: large number display unique to this section */
.hiw-compact-num {
  font-size: 32px;
  font-weight: var(--font-weight-extrabold);
  color: var(--color-blue);
  margin-bottom: var(--sp-3);
}
/* KEEP: body text in HIW cards */
.hiw-compact-card p {
  font-size: var(--font-size-md);
  line-height: 1.6;
  color: var(--color-muted);
  margin: 0;
}
@media (max-width: 768px) {
  .hiw-compact-grid { grid-template-columns: 1fr; }
}

/* ─── Platform list + link ───────────────────────────────────── */
/* KEEP: custom bullet list layout used in Manu section */
.platform-list {
  list-style: none;
  padding: 0;
  margin: 0 0 20px;
}
.platform-list li {
  position: relative;
  padding-left: 28px;
  font-size: var(--font-size-md);
  line-height: 1.6;
  color: var(--color-muted);
  margin-bottom: 10px;
}
.platform-list li::before {
  content: '✓';
  position: absolute;
  left: 0;
  color: var(--color-blue);
  font-weight: var(--font-weight-bold);
}
/* KEEP: inline text link style unique to platform section */
.platform-link {
  display: inline-block;
  margin-top: var(--sp-2);
  font-size: var(--font-size-body-lg);
  font-weight: var(--font-weight-semibold);
  color: var(--color-blue);
  text-decoration: none;
  transition: opacity var(--transition-fast);
}
.platform-link:hover {
  opacity: 0.7;
}

/* ─── Membership Section ─────────────────────────────────────── */
/* KEEP: page-specific section padding with gradient bg */
.memb-section {
  padding: var(--sp-11) 0;
  background: linear-gradient(180deg, var(--color-bg) 0%, var(--color-white) 100%);
}
/* KEEP: centered header layout */
.memb-hd {
  text-align: center;
  margin-bottom: 56px;
}
.memb-hd p {
  color: var(--color-muted);
  font-size: var(--font-size-md);
  margin-top: var(--sp-4);
  max-width: 600px;
  margin-left: auto;
  margin-right: auto;
}

/* Benefits list */
/* KEEP: 2-col benefit grid layout */
.memb-benefits {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px 48px;
  margin-bottom: 56px;
  max-width: 800px;
  margin-left: auto;
  margin-right: auto;
}
.memb-benefit {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-3);
  padding: 10px 0;
}
.memb-benefit svg { flex-shrink: 0; margin-top: 2px; }
.memb-benefit span {
  font-size: var(--font-size-md);
  color: var(--color-text);
  line-height: var(--line-height-normal);
}

/* KEEP: 2-col stat card + feature list layout */
.memb-feat-split {
  display: grid;
  grid-template-columns: 2fr 3fr;
  gap: 48px;
  align-items: stretch;
  margin-bottom: 56px;
}
/* KEEP: gradient stat card — unique bg + layout */
.memb-stat-card {
  /*background: var(--grad-primary);*/
  border-radius: var(--r-lg);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  /*padding: var(--sp-9) var(--sp-7);*/
  color: var(--color-white);
}

.memb-stat-card img {  border-radius: var(--r-lg);}
	
.memb-stat-big {
  font-size: clamp(36px, 5vw, 52px);
  font-weight: 900;
  line-height: 1.1;
}
.memb-stat-sub {
  font-size: var(--font-size-md);
  font-weight: var(--font-weight-medium);
  opacity: 0.85;
  margin-top: var(--sp-2);
}
.memb-stat-benefits {
  display: flex;
  flex-direction: column;
  gap: 20px;
  margin-top: var(--sp-9);
  padding-top: var(--sp-8);
  border-top: 1px solid rgba(255,255,255,0.2);
}
.memb-stat-benefit {
  display: flex;
  align-items: baseline;
  gap: var(--sp-3);
  font-size: var(--font-size-md);
}
.memb-stat-key {
  font-weight: var(--font-weight-extrabold);
  font-size: 20px;
  letter-spacing: -0.02em;
}
.memb-stat-arrow {
  opacity: 0.4;
  font-size: var(--font-size-label);
}
.memb-stat-val {
  font-weight: var(--font-weight-regular);
  opacity: 0.75;
  font-size: var(--font-size-md);
}
/* KEEP: vertical feature list layout */
.memb-feat-list {
  display: flex;
  flex-direction: column;
  gap: 20px;
  justify-content: center;
}
.memb-feat-item {
  display: flex;
  gap: var(--sp-4);
  align-items: flex-start;
}
/* KEEP: colored icon box — page-specific icon container */
.memb-feat-icon {
  width: 44px;
  height: 44px;
  border-radius: var(--r-md);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.memb-feat-icon.blue { background: rgba(0,144,255,0.08); }
.memb-feat-icon.pink { background: rgba(233,61,130,0.08); }
.memb-feat-item h3 {
  font-size: var(--font-size-body-lg);
  font-weight: var(--font-weight-bold);
  color: var(--color-text);
  margin: 0 0 var(--sp-1);
}
.memb-feat-item p {
  font-size: var(--font-size-md);
  line-height: var(--line-height-normal);
  color: var(--color-muted);
  margin: 0;
}
@media (max-width: 768px) {
  .memb-feat-split { grid-template-columns: 1fr; gap: 28px; }
  .memb-stat-card { min-height: auto; padding: 28px var(--sp-6); }
  .memb-stat-big { font-size: 28px; }
  .memb-benefits { grid-template-columns: 1fr; }
  .memb-feat-item h3 { font-size: var(--font-size-md); }
}

/* Membership Slider */
/* KEEP: centered header with dark-bg text */
.memb-slider-hd {
  text-align: center;
  margin-bottom: 36px;
}
.memb-slider-hd h3 {
  font-size: clamp(32px, 4vw, 44px);
  font-weight: var(--font-weight-extrabold);
  color: var(--color-white) !important;
  margin: 0 0 10px;
}
/* KEEP: gradient word in slider heading */
.memb-grad {
  background: var(--grad-primary);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
.memb-slider-hd p {
  font-size: var(--font-size-md);
  color: rgba(255,255,255,0.55);
  margin: 0;
}
/* KEEP: dark-bg slider container with specific layout */
.memb-slider {
  margin-bottom: var(--sp-10);
  background: var(--color-text) !important;
  border-radius: var(--r-xl);
  overflow: visible;
  box-shadow: var(--shadow-lg);
  padding: var(--sp-9) var(--sp-9) var(--sp-7);
  position: relative;
}
/* Side arrows — hidden, using grid arrows instead */
.memb-arrow { display: none; }
/* KEEP: 4-col grid with arrow buttons + two content panels */
.memb-slider-grid {
  display: grid;
  grid-template-columns: 40px 1.2fr 1fr 40px;
  gap: var(--sp-6);
  align-items: center;
}
/* KEEP: circular arrow button styling unique to slider */
.memb-slider-arrow-l,
.memb-slider-arrow-r {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 1.5px solid rgba(28,52,71,0.15);
  background: var(--color-white);
  color: var(--color-text);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all var(--transition-fast);
  padding: 0;
  box-shadow: var(--shadow-sm);
}
.memb-slider-arrow-l:hover,
.memb-slider-arrow-r:hover {
  background: rgba(0,144,255,0.08);
  border-color: rgba(0,144,255,0.3);
  color: var(--color-blue);
}
/* KEEP: mockup panel — absolute positioned slides */
.memb-slider-img {
  position: relative;
  min-height: 420px;
}
/* ── UI Mockups ── */
/* KEEP: mockup card layout — white panel on dark slider bg */
.memb-ui {
  position: absolute; inset: 0;
  background: var(--color-white);
  border-radius: var(--r-lg);
  box-shadow: 0 8px 40px rgba(28,52,71,0.08);
  padding: 28px;
  opacity: 0;
  transition: opacity 0.5s ease;
  display: flex; flex-direction: column;
}
.memb-ui.active { opacity: 1; }
/* KEEP: mini pill inside mockup — not ime-pill (different size/context) */
.mui-pill {
  display: inline-block; width: fit-content;
  background: var(--color-blue); color: var(--color-white) !important;
  font-size: 11px; font-weight: var(--font-weight-bold); text-transform: uppercase; letter-spacing: 0.5px;
  padding: 5px 14px; border-radius: var(--r-lg); margin-bottom: var(--sp-3);
}
.mui-title { font-size: var(--font-size-label); font-weight: var(--font-weight-semibold); color: var(--color-muted); margin-bottom: var(--sp-4); }
.mui-card { background: #f8f9fc; border-radius: var(--r-md); padding: var(--sp-4); border: 1px solid rgba(28,52,71,0.05); margin-bottom: var(--sp-3); }
.mui-badge { display: flex; align-items: center; gap: var(--sp-2); font-size: var(--font-size-caption); font-weight: var(--font-weight-semibold); color: var(--color-blue); text-transform: uppercase; letter-spacing: 0.5px; }
.mui-badge-num { width: 24px; height: 24px; border-radius: var(--r-xs); color: var(--color-white); display: flex; align-items: center; justify-content: center; font-size: var(--font-size-caption); font-weight: var(--font-weight-extrabold); }
.mui-progress { height: 6px; background: #E8EDF2; border-radius: 3px; overflow: hidden; flex: 1; }
.mui-progress-fill { height: 100%; background: var(--grad-primary); border-radius: 3px; }
.mui-phases { display: flex; flex-direction: column; gap: var(--sp-1); }
.mui-phase { display: flex; align-items: center; gap: var(--sp-2); font-size: var(--font-size-caption); font-weight: var(--font-weight-semibold); color: var(--color-text); padding: var(--sp-2) var(--sp-3); background: #f8f9fc; border-radius: var(--r-sm); }
.mui-phase-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
.mui-phase-pct { margin-left: auto; font-size: var(--font-size-caption); color: var(--color-muted); }
.mui-course { display: flex; align-items: center; gap: 10px; font-size: var(--font-size-caption); font-weight: var(--font-weight-semibold); color: var(--color-text); padding: 10px var(--sp-3); background: #f8f9fc; border-radius: 10px; border: 1px solid rgba(28,52,71,0.05); margin-bottom: var(--sp-1); }
.mui-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
.mui-count { margin-left: auto; font-size: var(--font-size-caption); color: var(--color-muted); background: #eef0f4; padding: 3px var(--sp-2); border-radius: var(--r-sm); }
.mui-footer { display: flex; align-items: center; gap: 10px; margin-top: auto; padding-top: var(--sp-3); border-top: 1px solid rgba(28,52,71,0.05); }
.mui-res-grid { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 10px; }
.mui-res { display: flex; flex-direction: column; align-items: center; gap: var(--sp-2); padding: 20px var(--sp-2); background: #f8f9fc; border-radius: var(--r-md); border: 1px solid rgba(28,52,71,0.05); font-size: var(--font-size-caption); font-weight: var(--font-weight-semibold); color: var(--color-muted); }
.mui-prog { display: flex; align-items: center; gap: 14px; padding: var(--sp-4); background: #f8f9fc; border-radius: var(--r-md); border: 1px solid rgba(28,52,71,0.05); margin-bottom: 10px; }
.mui-prog strong { font-size: var(--font-size-label); color: var(--color-text); }
.mui-prog-icon { width: 44px; height: 44px; border-radius: var(--r-md); display: flex; align-items: center; justify-content: center; font-size: 22px; flex-shrink: 0; }
.mui-post { display: flex; gap: var(--sp-3); padding: 14px; background: #f8f9fc; border-radius: var(--r-md); border: 1px solid rgba(28,52,71,0.05); margin-bottom: var(--sp-2); }
.mui-avatar { width: 36px; height: 36px; border-radius: 50%; color: var(--color-white); display: flex; align-items: center; justify-content: center; font-size: var(--font-size-label); font-weight: var(--font-weight-bold); flex-shrink: 0; }
/* KEEP: slide content panel — absolute positioned text area */
.memb-slider-content {
  position: relative;
  min-height: 420px;
}
.memb-slide-nav {
  position: absolute;
  bottom: 28px;
  left: 0;
}
.memb-slide-link {
  position: absolute;
  bottom: -4px;
  left: 0;
}
/* KEEP: fade-slide animation for slider panels */
.memb-slide {
  position: absolute;
  top: 0; left: 0; right: 0;
  opacity: 0;
  transition: opacity 0.5s ease;
  pointer-events: none;
}
.memb-slide.active { opacity: 1; pointer-events: auto; }
/* KEEP: pill label inside slide — different from ime-pill (dark bg context) */
.memb-slide-label {
  display: inline-block;
  font-size: var(--font-size-caption);
  font-weight: var(--font-weight-bold);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--color-text) !important;
  background: rgba(0,144,255,0.06);
  border: 1.5px solid rgba(0,144,255,0.15);
  padding: var(--sp-1) var(--sp-4);
  border-radius: var(--r-xl);
  margin-bottom: var(--sp-4);
}
/* KEEP: slide title eyebrow in blue */
.memb-slide-title {
  font-size: clamp(14px, 2vw, 16px);
  font-weight: var(--font-weight-bold);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--color-blue) !important;
  margin: 0 0 var(--sp-4);
}
/* KEEP: slide h3 + p — white text on dark bg slider */
.memb-slide h3 {
  font-size: clamp(24px, 3vw, 32px);
  font-weight: var(--font-weight-extrabold);
  color: var(--color-white) !important;
  line-height: var(--line-height-snug);
  margin: 0 0 var(--sp-4);
}
.memb-slide p {
  font-size: var(--font-size-md);
  line-height: var(--line-height-loose);
  color: rgba(255,255,255,0.6) !important;
  margin: 0;
}
.memb-slide p strong { color: rgba(255,255,255,0.85) !important; }
/* KEEP: dot nav layout for slider */
.memb-slide-nav {
  display: flex;
  align-items: center;
  gap: 10px;
}
a.memb-slide-link {
  display: block;
  font-size: var(--font-size-body-lg);
  font-weight: var(--font-weight-semibold);
  color: var(--color-blue) !important;
  text-decoration: none;
  transition: color var(--transition-fast);
}
.memb-slide-link:hover { color: rgba(255,255,255,0.8); }
/* KEEP: slider dot nav buttons */
.memb-slide-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  border: none;
  background: rgba(255,255,255,0.2);
  cursor: pointer;
  transition: all 0.3s;
  padding: 0;
}
.memb-slide-dot.active {
  background: var(--color-blue);
  transform: scale(1.2);
}
@media (max-width: 768px) {
  .memb-slider { padding: 24px var(--sp-5); }
  .memb-slider-grid { grid-template-columns: 1fr; gap: 24px; }
  .memb-slider-arrow-l, .memb-slider-arrow-r { display: none; }
  .memb-slider-hd h3 { font-size: clamp(24px, 5vw, 32px); }

  /* Text panel: show BEFORE graphic */
  .memb-slider-content { order: 1; min-height: auto; }
  .memb-slider-img { order: 2; min-height: auto; overflow: hidden; }

  /* Break absolute positioning — show only active slide in normal flow */
  .memb-slide {
    position: relative;
    top: auto; left: auto; right: auto;
    display: none;
  }
  .memb-slide.active {
    display: block;
    opacity: 1;
  }
  .memb-slide h3 { font-size: 20px; }
  .memb-slide-nav { position: relative; bottom: auto; left: auto; margin-top: var(--sp-4); }
  .memb-slide-link { position: relative; bottom: auto; left: auto; margin-top: var(--sp-3); }

  /* Break absolute positioning on mockup cards too */
  .memb-ui {
    position: relative;
    inset: auto;
    display: none;
    padding: 20px;
  }
  .memb-ui.active {
    display: flex;
    opacity: 1;
  }
  .memb-ui .mui-res-grid { grid-template-columns: 1fr 1fr; gap: 8px; }
}

/* Pricing block */
/* KEEP: centered pricing card with gradient bg */
.memb-pricing-section {
  max-width: 680px;
  margin: 0 auto;
}
.memb-pricing-card {
  text-align: center;
  background: linear-gradient(135deg, rgba(0,144,255,0.04) 0%, rgba(233,61,130,0.04) 100%);
  border: 1px solid rgba(0,144,255,0.1);
  border-radius: var(--r-2xl);
  padding: var(--sp-9) var(--sp-8);
}
.memb-pricing-title {
  font-size: 32px;
  font-weight: var(--font-weight-extrabold);
  color: var(--color-text);
  margin: 0 0 var(--sp-2);
}
.memb-pricing-sub {
  font-size: var(--font-size-md);
  color: var(--color-muted);
  margin: 0 0 var(--sp-7);
}
/* KEEP: gradient divider bar */
.memb-pricing-divider {
  width: 80px;
  height: 3px;
  background: var(--grad-primary);
  border-radius: 2px;
  margin: 28px auto;
}
.memb-compare-label {
  font-size: var(--font-size-caption);
  font-weight: var(--font-weight-semibold);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--color-muted);
  margin-bottom: var(--sp-4);
  text-align: center;
}
.memb-compare {
  display: flex;
  justify-content: center;
  gap: var(--sp-4);
  margin-bottom: var(--sp-7);
}
.memb-compare-item {
  padding: var(--sp-4) 20px;
  border-radius: var(--r-md);
  background: rgba(28,52,71,0.04);
  text-align: center;
  flex: 1;
}
.memb-compare-type {
  display: block;
  font-size: var(--font-size-caption);
  font-weight: var(--font-weight-semibold);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--color-muted);
  margin-bottom: var(--sp-1);
}
.memb-compare-price {
  font-size: 22px;
  font-weight: var(--font-weight-extrabold);
  color: var(--color-text);
  text-decoration: line-through;
  text-decoration-thickness: 2px;
  opacity: 0.5;
}
.memb-compare-price small {
  font-size: var(--font-size-caption);
  font-weight: var(--font-weight-medium);
}

/* Our price */
.memb-our-price {
  margin-bottom: var(--sp-7);
}
.memb-price-label {
  font-size: var(--font-size-label);
  font-weight: var(--font-weight-semibold);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--color-blue);
  margin-bottom: var(--sp-2);
}
.memb-price-from {
  font-size: var(--font-size-caption);
  font-weight: var(--font-weight-semibold);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--color-muted);
  margin-bottom: var(--sp-1);
}
/* KEEP: large price display — custom size not covered by tokens */
.memb-price-big {
  font-size: clamp(44px, 6vw, 60px);
  font-weight: var(--font-weight-extrabold);
  color: var(--color-text);
  line-height: 1;
  margin-bottom: var(--sp-1);
}
.memb-price-big span {
  font-size: 0.4em;
  font-weight: var(--font-weight-semibold);
  color: var(--color-muted);
}
/* KEEP: gradient price sub-label */
.memb-price-sub {
  font-size: var(--font-size-md);
  font-weight: var(--font-weight-semibold);
  background: var(--grad-primary);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* Guarantee */
/* KEEP: green-tinted guarantee box — unique color scheme */
.memb-guarantee {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  text-align: left;
  background: rgba(0,168,120,0.04);
  border: 1px solid rgba(0,168,120,0.12);
  border-radius: 14px;
  padding: 20px var(--sp-6);
  margin-top: var(--sp-7);
}
.memb-guarantee svg { flex-shrink: 0; margin-top: 2px; }
.memb-guarantee strong {
  display: block;
  font-size: var(--font-size-sm);
  color: var(--color-text);
  margin-bottom: 2px;
}
.memb-guarantee span {
  font-size: var(--font-size-label);
  color: var(--color-muted);
  line-height: var(--line-height-normal);
}

@media (max-width: 768px) {
  .memb-compare { flex-direction: column; gap: 10px; }
}

/* KEEP: compact section padding variant */
.section--compact { padding: 56px 0; }

/* Testimonial grid */
/* KEEP: 3-col testimonial card grid layout — dark bg context */
.tgrid { display: grid; grid-template-columns: repeat(3,1fr); gap: var(--sp-6); }
@media(max-width:768px) { .tgrid { grid-template-columns: 1fr; } }

/* KEEP: testimonial card — dark-bg card shell unique to this section */
.tcard { background: rgba(255,255,255,0.05); border-radius: var(--r-lg); padding: 20px 22px; border: 1px solid rgba(255,255,255,0.08); transition: all var(--transition-slow); position: relative; text-align: left; }
.tcard:hover { transform: translateY(-4px); background: rgba(255,255,255,0.08); }
/* KEEP: testimonial card sub-elements */
.tcard-img { width: 44px; height: 44px; border-radius: 50%; overflow: hidden; margin-bottom: var(--sp-3); border: 2px solid rgba(255,255,255,0.15); }
.tcard-img img { width: 100%; height: 100%; object-fit: cover; }
.tcard-header { display: flex; align-items: center; gap: var(--sp-3); margin-bottom: 10px; }
.tcard-avatar { width: 40px; height: 40px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: var(--font-size-label); font-weight: var(--font-weight-bold); color: var(--color-white); letter-spacing: 0.03em; flex-shrink: 0; }
.tcard-photo { width: 56px; height: 56px; border-radius: 50%; object-fit: cover; border: 2px solid rgba(255,255,255,0.2); flex-shrink: 0; }
.tcard-num { font-size: var(--font-size-sm); font-weight: var(--font-weight-bold); letter-spacing: 0.12em; text-transform: uppercase; margin-bottom: 0; }
.tcard blockquote { font-size: var(--font-size-md); font-weight: var(--font-weight-regular); line-height: var(--line-height-normal); font-style: italic; color: rgba(255,255,255,0.82); margin: 0 0 10px; text-align: left; }
.tcard cite { font-size: var(--font-size-sm); font-weight: var(--font-weight-bold); color: rgba(255,255,255,0.45); font-style: normal; }
/* KEEP: left-edge accent bar — unique decoration */
.tcard-accent { position: absolute; top: 0; bottom: 0; left: 0; width: 3px; border-radius: var(--r-lg) 0 0 var(--r-lg); }

/* BEFORE STATE */
/* DELETE: .problem-pill → replaced by ime-pill ime-pill--pink in HTML */
/* KEEP: problem section header layout */
.problem-hd { text-align: center; max-width: 700px; margin: 0 auto 36px; }
.problem-hd p { font-size: var(--font-size-body-lg); color: var(--color-muted); line-height: var(--line-height-normal); margin: 0; }
/* KEEP: 3-col problem card grid */
.problem-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: var(--sp-5); }
@media(max-width:768px) { .problem-grid { grid-template-columns: 1fr; } }
/* KEEP: problem card — shadow style differs from ime-card default */
.problem-card { border-radius: var(--r-lg); padding: 28px 24px; box-shadow: 0 2px 12px rgba(0,0,0,0.06), 0 0 0 1px rgba(0,0,0,0.04); }
/* KEEP: colored icon wrap inside problem cards */
.problem-card .icon-wrap { width: 44px; height: 44px; border-radius: 12px; display: flex; align-items: center; justify-content: center; margin-bottom: var(--sp-4); }
.problem-card .icon-wrap.pink { background: rgba(233,61,130,0.12); }
.problem-card .icon-wrap.blue { background: rgba(0,144,255,0.12); }
/* KEEP: problem card body text */
.problem-card p { font-size: var(--font-size-md); color: var(--color-muted); line-height: var(--line-height-normal); margin: 0; }

/* METHOD */
/* KEEP: method header centered layout */
.method-hd { text-align: center; max-width: 680px; margin: 0 auto 48px; }
.method-hd h2 .accent-blue { color: var(--color-blue); }
/* KEEP: side-by-side compare layout with overflow clip */
.compare-wrap { display: grid; grid-template-columns: 1fr 1fr; border-radius: var(--r-xl); overflow: hidden; box-shadow: 0 4px 32px rgba(0,0,0,0.10); }
@media(max-width:768px) {
  .compare-wrap { grid-template-columns: 1fr; }
  .compare-old, .compare-new { padding: 32px var(--sp-6); text-align: left; }
  .compare-old h3, .compare-new h3 { font-size: 18px; margin-bottom: 20px; }
  .compare-label { text-align: left; }
}
/* KEEP: dark panel — unique dark bg */
.compare-old { background: var(--color-text); padding: 44px var(--sp-8); }
/* KEEP: light panel — gradient bg + Italian flag top bar */
.compare-new { background: linear-gradient(180deg,#f0f8ff 0%,var(--color-white) 60%); padding: 44px var(--sp-8); border: 1px solid rgba(0,144,255,0.18); border-top: none; position: relative; }
.compare-new::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 4px; background: var(--grad-italia); }
.compare-label { font-size: var(--font-size-sm); font-weight: var(--font-weight-bold); letter-spacing: 0.12em; text-transform: uppercase; margin-bottom: var(--sp-4); }
.compare-old .compare-label { color: rgba(255,255,255,0.65); }
.compare-new .compare-label { color: var(--color-blue); }
.compare-old h3 { font-size: 22px; font-weight: var(--font-weight-bold); color: var(--color-white); margin: 0 0 28px; }
.compare-new h3 { font-size: 22px; font-weight: var(--font-weight-bold); color: #0F1C2E; margin: 0 0 28px; }
.compare-list { list-style: none; display: flex; flex-direction: column; gap: var(--sp-6); }
.compare-item { display: flex; gap: 14px; align-items: flex-start; }
/* KEEP: circular icon in compare list */
.compare-icon { flex-shrink: 0; width: 28px; height: 28px; border-radius: 50%; display: flex; align-items: center; justify-content: center; margin-top: 2px; }
.compare-old .compare-icon { background: rgba(255,255,255,0.12); }
.compare-new .compare-icon { background: rgba(0,144,255,0.12); }
.compare-item-text strong { display: block; font-size: var(--font-size-md); font-weight: var(--font-weight-bold); line-height: 1.3; margin-bottom: var(--sp-1); }
.compare-old .compare-item-text strong { color: var(--color-white); }
.compare-new .compare-item-text strong { color: #0F1C2E; }
.compare-old .compare-item-text p { font-size: var(--font-size-md); color: rgba(255,255,255,0.82); line-height: var(--line-height-normal); margin: 0; }
.compare-new .compare-item-text p { font-size: var(--font-size-md); color: var(--color-muted); line-height: var(--line-height-normal); margin: 0; }

/* MEET MANU */
/* KEEP: gradient bg section unique to this page */
.manu-sec { background: linear-gradient(135deg, rgba(0,144,255,0.06) 0%, var(--color-white) 55%, rgba(233,61,130,0.04) 100%); }
/* KEEP: 2-col photo+text grid */
.manu-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: stretch; }
/* KEEP: photo column — gradient bg + border + absolute-positioned image */
.manu-photo { border-radius: var(--r-xl); overflow: hidden; background: linear-gradient(160deg, rgba(0,144,255,0.07) 0%, rgba(233,61,130,0.05) 100%); border: 1.5px solid rgba(0,144,255,0.15); position: relative; min-height: 400px; }
.manu-photo img { position: absolute; bottom: 0; left: 0; width: 100%; height: 100%; object-fit: contain; object-position: bottom center; }
.manu-text { display: flex; flex-direction: column; justify-content: center; }
.manu-text .accent-blue { color: var(--color-blue); }
/* KEEP: intro paragraph style */
.manu-intro { color: var(--color-muted); font-weight: var(--font-weight-regular); font-size: var(--font-size-body-lg); line-height: var(--line-height-normal); margin-bottom: 28px; }
/* KEEP: check-list layout */
.manu-list { list-style: none; display: flex; flex-direction: column; gap: var(--sp-4); margin-bottom: 36px; }
.manu-list li { display: flex; gap: 14px; align-items: flex-start; }
.manu-list li svg { flex-shrink: 0; margin-top: 3px; }
.manu-list li span { color: var(--color-muted); font-weight: var(--font-weight-regular); font-size: var(--font-size-md); line-height: var(--line-height-normal); }
.manu-list li strong { color: var(--color-text); font-weight: var(--font-weight-bold); }
.manu-text .btn-shimmer { width: auto; align-self: flex-start; padding: 14px var(--sp-7); font-size: var(--font-size-md); }

/* HOW IT WORKS — method-steps V1 */
/* KEEP: background image section — unique to this page */
.hiw-v1 { position: relative; overflow: hidden; background-image: url('https://italymadeeasy.com/wp-content/uploads/2026/03/tuscan-sky-bg.webp'); background-size: cover; background-position: center center; }
/* KEEP: dark overlay gradient on bg image */
.hiw-v1-overlay { position: absolute; inset: 0; background: linear-gradient(to bottom, rgba(4,12,24,0.05) 0%, rgba(4,12,24,0.08) 25%, rgba(4,12,24,0.30) 55%, rgba(4,12,24,0.42) 100%); }
/* KEEP: z-indexed inner content over bg */
.hiw-v1-inner { position: relative; z-index: 1; max-width: var(--max-width-site); margin: 0 auto; padding: 100px 80px 80px; display: flex; flex-direction: column; align-items: center; }
/* KEEP: centered header area */
.hiw-v1-header { text-align: center; margin-bottom: 56px; }
/* KEEP: large headline on dark bg */
.hiw-v1-headline { font-size: clamp(2.2rem, 3.8vw, 3.2rem); font-weight: var(--font-weight-extrabold); color: var(--color-white); letter-spacing: -0.02em; line-height: 1.1; }
.hiw-v1-headline em { font-style: normal; color: var(--color-blue); }
/* KEEP: 2-col card grid on dark bg */
.hiw-v1-grid { display: grid; grid-template-columns: repeat(2,1fr); gap: var(--sp-6); margin-bottom: 56px; width: 100%; max-width: 900px; }
/* KEEP: frosted glass card — unique dark-overlay backdrop */
.hiw-v1-card { background: rgba(4,12,24,0.45); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); border: 1px solid rgba(255,255,255,0.12); border-radius: var(--r-xl); padding: 36px 28px; text-align: center; }
/* KEEP: large number in blue */
.hiw-v1-num { font-size: 1.8rem; font-weight: 900; color: var(--color-blue); opacity: 0.90; line-height: 1; margin-bottom: var(--sp-3); }
/* KEEP: card text on dark bg */
.hiw-v1-card h3 { font-size: var(--font-size-body-lg); font-weight: var(--font-weight-extrabold); color: var(--color-white); line-height: 1.25; margin-bottom: 10px; }
.hiw-v1-card p { font-size: var(--font-size-sm); font-weight: var(--font-weight-regular); color: rgba(255,255,255,0.68); line-height: var(--line-height-normal); margin: 0; }
.hiw-v1-cta { text-align: center; }
@media(max-width:1024px) { .hiw-v1-inner { padding: var(--sp-11) var(--sp-8) 72px; } }
@media(max-width:768px) { .hiw-v1-grid { grid-template-columns: 1fr; max-width: 480px; } .hiw-v1-inner { padding: 72px var(--sp-6) 64px; } .hiw-v1-num { font-size: 1.5rem; } }
@media(max-width:640px) { .hiw-v1-inner { padding: 56px 20px 48px; } }

/* WHAT HAPPENS WHEN YOU START */
/* KEEP: light-blue tinted section bg */
.whys-sec { background: #F0F7FF; padding: 100px 0; position: relative; }
.whys-header { text-align: center; max-width: 680px; margin: 0 auto 56px; }
/* KEEP: 2-col card grid */
.whys-grid { display: grid; grid-template-columns: repeat(2,1fr); gap: var(--sp-6); max-width: 900px; margin: 0 auto; }
/* KEEP: card with left blue border */
.whys-card { background: var(--color-white); border: 1px solid rgba(28,52,71,0.06); border-left: 3px solid var(--color-blue); border-radius: var(--r-lg); padding: 28px; transition: box-shadow var(--transition-fast); }
.whys-card:hover { box-shadow: 0 8px 32px rgba(0,144,255,0.10); }
.whys-card-top { display: flex; align-items: baseline; gap: var(--sp-3); margin-bottom: 10px; }
/* KEEP: large icon text label */
.whys-icon { font-size: var(--font-size-lg); font-weight: 900; color: var(--color-blue); opacity: 0.85; line-height: 1; flex-shrink: 0; }
.whys-card h3 { font-size: var(--font-size-body-lg); font-weight: var(--font-weight-extrabold); color: var(--color-text); line-height: 1.3; margin: 0; }
.whys-card p { font-size: var(--font-size-sm); font-weight: var(--font-weight-regular); color: var(--color-muted); line-height: 1.6; margin: 0; }
.whys-card em { font-style: italic; color: var(--color-text); font-weight: var(--font-weight-medium); }
@media(max-width:680px) { .whys-grid { grid-template-columns: 1fr; } .whys-sec { padding: 72px 0; } }

/* FLUENCY PATH ZIGZAG */
/* KEEP: unique zigzag timeline layout — no ime-* equivalent */
.fp-sec { background: var(--color-bg); padding: 100px 0; position: relative; overflow: hidden; isolation: isolate; }
.fp-hd { text-align: center; max-width: 820px; margin: 0 auto 72px; }
.fp-hd h2 { font-size: clamp(28px, 2.8vw, 40px); font-weight: var(--font-weight-extrabold); color: var(--color-text); line-height: var(--line-height-snug); margin: 0 0 20px; }
.fp-hd p { font-size: var(--font-size-body-lg); color: var(--color-muted); line-height: var(--line-height-normal); margin: 0; }
/* KEEP: vertical gradient timeline line */
.fp-timeline { position: relative; max-width: 960px; margin: 0 auto; }
.fp-timeline::before { content: ''; position: absolute; left: 50%; top: 0; bottom: 0; width: 2px; background: linear-gradient(180deg, var(--color-blue) 0%, #2B7DE9 25%, #6B4FC4 50%, #C0408A 75%, var(--color-pink) 100%); transform: translateX(-50%); }
/* KEEP: 3-col step grid (text | number | text) */
.fp-step { display: grid; grid-template-columns: 1fr 80px 1fr; align-items: center; margin-bottom: var(--sp-11); position: relative; }
.fp-step:last-child { margin-bottom: 0; }
.fp-center { display: flex; align-items: center; justify-content: center; z-index: 2; position: relative; }
/* KEEP: numbered circle with colored backgrounds per step */
.fp-num { width: 64px; height: 64px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 18px; font-weight: 900; color: var(--color-white); box-shadow: 0 0 0 6px var(--color-white), var(--shadow-md); }
.fp-n1{background:var(--color-blue)}.fp-n2{background:#2B7DE9}.fp-n3{background:#6B4FC4}.fp-n4{background:#C0408A}.fp-n5{background:linear-gradient(135deg,#C0408A,var(--color-pink))}
.fp-text { padding: 0; }
.fp-step:nth-child(odd) .fp-text { text-align: right; padding-right: 52px; }
.fp-step:nth-child(even) .fp-text { text-align: left; padding-left: 52px; }
.fp-lbl { font-size: var(--font-size-sm); font-weight: var(--font-weight-bold); letter-spacing: 0.12em; text-transform: uppercase; margin-bottom: var(--sp-1); }
.fp-name { font-size: clamp(18px, 2.5vw, 22px); font-weight: var(--font-weight-extrabold); color: var(--color-text); margin-bottom: var(--sp-1); }
.fp-tag { font-size: var(--font-size-sm); font-style: italic; color: var(--color-muted); font-weight: var(--font-weight-regular); margin-bottom: 14px; }
.fp-ul { list-style: none; display: flex; flex-direction: column; gap: 7px; }
.fp-ul li { font-size: var(--font-size-md); font-weight: var(--font-weight-regular); color: var(--color-muted); line-height: var(--line-height-normal); display: flex; align-items: flex-start; gap: var(--sp-2); }
.fp-step:nth-child(odd) .fp-ul li { flex-direction: row-reverse; justify-content: flex-start; }
.fp-dot { width: 6px; height: 6px; border-radius: 50%; flex-shrink: 0; margin-top: 7px; }
.fp-img { display: flex; align-items: center; justify-content: center; }
.fp-step:nth-child(odd) .fp-img { justify-content: flex-start; }
.fp-step:nth-child(even) .fp-img { justify-content: flex-end; }
/* KEEP: circular photo in timeline */
.fp-circle { width: 240px; height: 240px; border-radius: 50%; overflow: hidden; box-shadow: var(--shadow-lg); border: 5px solid var(--color-white); }
.fp-circle img { width: 100%; height: 100%; object-fit: cover; }
.fp-foot { text-align: center; margin-top: 72px; }
.fp-foot p { font-size: var(--font-size-md); color: var(--color-muted); line-height: var(--line-height-normal); margin: 0 0 28px; }
@media(max-width:960px) {
  .fp-circle { width: 160px; height: 160px; }
  .fp-step:nth-child(odd) .fp-text { padding-right: 28px; }
  .fp-step:nth-child(even) .fp-text { padding-left: 28px; }
}
@media(max-width:768px) {
  .fp-sec { padding: 72px 0; }
  .fp-timeline::before { left: 32px; transform: none; }
  .fp-step { grid-template-columns: 64px 1fr; grid-template-rows: auto auto; }
  .fp-step:nth-child(odd) .fp-text, .fp-step:nth-child(even) .fp-text { text-align: left; padding: 0 0 0 var(--sp-3); grid-column: 2; }
  .fp-step:nth-child(odd) .fp-center, .fp-step:nth-child(even) .fp-center { grid-column: 1; grid-row: 1; justify-content: flex-start; }
  .fp-step:nth-child(odd) .fp-ul li { flex-direction: row; }
  .fp-img { display: none; }
  .fp-name { font-size: 18px; }
}

/* COMMUNITY */
/* KEEP: dark-bg community section layout */
.community { background: var(--color-text); }
.comm-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: start; }
.comm-text h2 { font-size: clamp(28px, 3vw, 42px); font-weight: var(--font-weight-extrabold); color: var(--color-white); line-height: var(--line-height-snug); margin: 0 0 var(--sp-4); }
.comm-text p { font-size: var(--font-size-md); color: rgba(255,255,255,0.65); line-height: var(--line-height-normal); margin-bottom: var(--sp-6); }
.comm-list { list-style: none; display: flex; flex-direction: column; gap: var(--sp-3); margin-bottom: 28px; }
.comm-list li { display: flex; gap: var(--sp-3); align-items: flex-start; color: rgba(255,255,255,0.75); font-weight: var(--font-weight-regular); font-size: var(--font-size-md); }
.comm-list li svg { flex-shrink: 0; margin-top: 3px; }
/* KEEP: quote box on dark bg */
.comm-quote { background: rgba(255,255,255,0.06); border-radius: var(--r-lg); padding: 22px 26px; border-left: 3px solid rgba(0,144,255,0.6); margin-bottom: 28px; text-align: left; }
.comm-quote blockquote { color: rgba(255,255,255,0.85); font-style: italic; font-weight: var(--font-weight-regular); font-size: var(--font-size-md); margin: 0 0 var(--sp-2); }
.comm-quote cite { color: rgba(255,255,255,0.45); font-size: var(--font-size-sm); font-weight: var(--font-weight-semibold); font-style: normal; display: block; }
.comm-action { display: flex; flex-direction: column; align-items: flex-start; gap: 14px; }
.comm-action p { font-size: var(--font-size-md); color: rgba(255,255,255,0.45); line-height: var(--line-height-normal); margin: 0; }
/* KEEP: community feed card on dark bg — white panel */
.comm-feed { background: var(--color-white); border-radius: var(--r-xl); padding: 28px var(--sp-6); box-shadow: 0 12px 48px rgba(0,0,0,0.18); align-self: stretch; }
/* KEEP: pink pill label in community feed */
.comm-feed-pill { display: inline-block; background: var(--color-pink); color: var(--color-white); font-size: 0.75rem; font-weight: var(--font-weight-regular); text-transform: uppercase; letter-spacing: 0.5px; padding: var(--sp-1) var(--sp-4); border-radius: var(--r-pill); margin-bottom: var(--sp-4); }
.comm-feed-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 18px; }
.comm-feed-title { font-size: var(--font-size-body-lg); font-weight: var(--font-weight-extrabold); color: var(--color-text); }
.comm-feed-see { font-size: var(--font-size-caption); font-weight: var(--font-weight-semibold); color: var(--color-blue); text-decoration: none; }
.comm-feed-see:hover { text-decoration: underline; }
.comm-feed-posts { display: flex; flex-direction: column; gap: var(--sp-4); }
/* KEEP: individual community post cards */
.comm-feed-post { background: var(--color-bg); border: 1px solid rgba(28,52,71,0.08); border-radius: var(--r-md); padding: 18px var(--sp-4); }
.comm-feed-author { display: flex; gap: 10px; align-items: center; margin-bottom: var(--sp-3); }
.comm-feed-avatar { width: 38px; height: 38px; border-radius: 50%; display: flex; align-items: center; justify-content: center; color: var(--color-white); font-size: var(--font-size-caption); font-weight: var(--font-weight-bold); flex-shrink: 0; }
.comm-feed-author strong { display: block; font-size: var(--font-size-caption); font-weight: var(--font-weight-bold); color: var(--color-text); }
.comm-feed-author span { font-size: var(--font-size-caption); color: rgba(28,52,71,0.45); font-weight: var(--font-weight-regular); }
.comm-feed-body { font-size: var(--font-size-sm); color: var(--color-text); line-height: var(--line-height-normal); margin: 0 0 var(--sp-3); }
.comm-feed-photo { border-radius: var(--r-sm); overflow: hidden; height: 140px; }
.comm-feed-photo img { width: 100%; height: 100%; object-fit: cover; }
.comm-feed-reactions { display: flex; gap: var(--sp-1); font-size: var(--font-size-caption); color: rgba(28,52,71,0.5); font-weight: var(--font-weight-regular); }
@media(max-width:768px) {
  .comm-grid { grid-template-columns: 1fr; gap: var(--sp-7); }
  .comm-feed { max-width: 480px; }
}

/* HOW TO START */
/* KEEP: 3-col steps grid */
.steps-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: var(--sp-6); }
/* KEEP: gradient circle number — unique decoration */
.step-num-circle { width: 52px; height: 52px; border-radius: 50%; background: var(--grad-primary); color: var(--color-white); display: flex; align-items: center; justify-content: center; font-size: 22px; font-weight: var(--font-weight-extrabold); margin: 0 auto 18px; box-shadow: 0 4px 16px rgba(0,144,255,0.3); }
.step-meta { font-size: var(--font-size-sm); color: var(--color-muted); font-weight: var(--font-weight-medium); margin-bottom: var(--sp-2); text-transform: uppercase; letter-spacing: 0.4px; }
/* KEEP: step card color variant */
.step-card { border-color: rgba(0,144,255,0.18); background: rgba(0,144,255,0.03); }
.step-card p { font-size: var(--font-size-md); color: var(--color-muted); line-height: var(--line-height-normal); margin: 0; }
@media(max-width:768px) {
  .steps-grid { grid-template-columns: 1fr; max-width: 400px; margin: 0 auto; }
  .step-num-circle { font-size: 20px; }
}

/* FINAL CTA */
/* KEEP: full-bleed background image section */
.final { position: relative; padding: 120px 0; background: url('https://italymadeeasy.com/wp-content/uploads/italy/homepage-final-cta-bg.webp') center/cover no-repeat; }
/* KEEP: dark overlay on bg image */
.final-ov { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(28,52,71,0.5) 0%, rgba(28,52,71,0.92) 100%); }
.final-inner { position: relative; z-index: 1; text-align: center; max-width: 680px; margin: 0 auto; }
.final-body { display: flex; flex-direction: column; align-items: center; gap: 0; }
.final-scene { color: rgba(255,255,255,0.82); font-weight: var(--font-weight-regular); font-size: var(--font-size-md); line-height: var(--line-height-normal); margin-bottom: 28px; }
.final-social { color: rgba(255,255,255,0.65); font-size: var(--font-size-md); font-weight: var(--font-weight-regular); line-height: var(--line-height-normal); margin-bottom: 36px; }
.final-turn { color: var(--color-white); font-size: clamp(18px, 2.5vw, 22px); font-weight: var(--font-weight-bold); margin-bottom: 36px; }
.final-ctas { display: flex; flex-direction: column; align-items: center; gap: 14px; }
.final-fine { color: rgba(255,255,255,0.45); font-size: var(--font-size-caption); font-weight: var(--font-weight-regular); }
.mini-ts { display: flex; gap: var(--sp-6); justify-content: center; flex-wrap: wrap; margin-top: var(--sp-8); }
.mini-t { color: rgba(255,255,255,0.6); font-size: var(--font-size-sm); font-style: italic; font-weight: var(--font-weight-regular); max-width: 260px; text-align: center; }
.sig { color: rgba(255,255,255,0.45); font-size: var(--font-size-sm); font-weight: var(--font-weight-regular); font-style: italic; margin-top: var(--sp-7); }
@media(max-width:768px) {
  .final { padding: 72px 0; }
  .final-inner { padding: 0 var(--sp-6); }
  .final-turn { font-size: 18px; }
  .mini-ts { gap: var(--sp-4); }
}
@media(max-width:640px) {
  .final-inner { padding: 0 20px; }
}

/* HERO — layout defined in hero.css; only supplementary styles here */
/* KEEP: testimonial card sub-elements */
.htc-meta { display: flex; align-items: center; gap: var(--sp-1); margin-bottom: 3px; }
.htc-name { font-size: var(--font-size-md); font-weight: var(--font-weight-bold); color: var(--color-text); }
.htc-loc { font-size: var(--font-size-caption); color: var(--color-muted); font-weight: var(--font-weight-regular); }
.htc-quote { font-size: var(--font-size-md); font-weight: var(--font-weight-regular); color: var(--color-muted); line-height: var(--line-height-normal); font-style: italic; margin: 0; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.htc-stars { color: var(--color-yellow); font-size: var(--font-size-caption); white-space: nowrap; }
/* Testimonial slider layout → hero.css; only card styles here */
.hero-tslide { position: absolute; inset: 0; opacity: 0; transition: opacity 0.6s ease-in-out; pointer-events: none; }
.hero-tslide.active { opacity: 1; position: relative; pointer-events: auto; }
/* KEEP: glassmorphism testimonial card */
.hero-testimonial-slider .hero-tcard { background: rgba(255,255,255,0.94); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border-radius: var(--r-md); padding: 14px var(--sp-4); border: 1px solid rgba(0,0,0,0.06); box-shadow: 0 6px 24px rgba(0,0,0,0.10); position: relative; overflow: hidden; }
/* KEEP: Italian flag stripe on testimonial card top */
.hero-testimonial-slider .hero-tcard::before { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 3px; background: var(--grad-italia); border-radius: 3px 3px 0 0; }
/* KEEP: slider dot nav for hero testimonials */
.slider-dots { display: flex; justify-content: center; gap: 3px; margin-top: 10px; }
.slider-dot { width: 5px; height: 5px; border-radius: 50%; background: rgba(28,52,71,0.15); cursor: pointer; transition: all 0.3s; border: none; padding: 0; }
.slider-dot.active { background: var(--color-blue); width: 14px; border-radius: 10px; }
/* KEEP: hero action row */
.hero-actions { display: flex; align-items: center; gap: 20px; flex-wrap: wrap; margin-top: var(--sp-6); margin-bottom: 28px; }
.hero-read { font-size: var(--font-size-sm); font-weight: var(--font-weight-medium); color: var(--color-text); text-decoration: none; opacity: 0.6; transition: opacity var(--transition-fast); }
.hero-read:hover { opacity: 1; }
@media(max-width:640px) {
  .hero-actions { flex-direction: column; align-items: flex-start; gap: var(--sp-3); }
  .hero-cta .btn-shimmer { padding: 14px 28px; }
}

/* Stats bar layout → hero.css */

/* PHOTO BREAKER (cinematic boxed) */
/* KEEP: boxed cinematic bg-image breaker — page-specific layout */
.fp-breaker-cine-wrap { padding: 0 56px; max-width: 1312px; margin: 48px auto 0; }
.fp-breaker-cine { position: relative; min-height: 360px; display: flex; align-items: center; overflow: hidden; background-image: url('https://italymadeeasy.com/wp-content/uploads/italy/amalfi-coast-testimonial.webp'); background-size: cover; background-position: center 40%; border-radius: 18px; }
/* KEEP: directional gradient overlay unique to this element */
.fp-breaker-cine::before { content: ''; position: absolute; inset: 0; background: linear-gradient(to right, rgba(20,34,46,0.96) 0%, rgba(20,34,46,0.90) 28%, rgba(20,34,46,0.55) 52%, rgba(20,34,46,0.10) 72%, transparent 100%); z-index: 1; border-radius: 18px; }
.fp-breaker-cine-inner { position: relative; z-index: 2; padding: 52px 56px; max-width: 56%; }
.fp-breaker-cine-inner h2 { font-size: clamp(1.8rem, 3vw, 2.6rem); font-weight: var(--font-weight-extrabold); color: var(--color-white); line-height: 1.15; }
.fp-breaker-cine-inner h2 span { background: var(--grad-primary); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; }
.fp-breaker-quote { margin-top: 20px; font-size: clamp(0.85rem, 1.2vw, 1rem); font-style: italic; font-weight: var(--font-weight-regular); color: rgba(255,255,255,0.65); line-height: var(--line-height-normal); }
.fp-breaker-quote strong { font-style: normal; font-weight: var(--font-weight-semibold); color: rgba(255,255,255,0.45); font-size: 0.85em; }
/* KEEP: absolute location credit */
.fp-breaker-cine-loc { position: absolute; bottom: 14px; right: 18px; z-index: 2; font-size: var(--font-size-caption); font-weight: var(--font-weight-regular); color: rgba(255,255,255,0.25); letter-spacing: 0.03em; }
@media(max-width:680px) { .fp-breaker-cine-wrap { padding: 0 20px; } .fp-breaker-cine::before { background: linear-gradient(to bottom, rgba(20,34,46,0.85) 0%, rgba(20,34,46,0.50) 100%); } .fp-breaker-cine-inner { max-width: 100%; padding: var(--sp-8) 28px; } }

/* MEMBERSHIP V2 — feat-list + price-box */
/* KEEP: 2-col feat/price layout */
.memb-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: start; }
.feat-list { list-style: none; display: flex; flex-direction: column; gap: var(--sp-4); }
.feat-list li { display: flex; gap: 14px; align-items: flex-start; }
.feat-list li svg { flex-shrink: 0; margin-top: 3px; }
.feat-list li strong { color: var(--color-text); font-weight: var(--font-weight-bold); font-size: var(--font-size-md); }
.feat-list li span { color: var(--color-muted); font-weight: var(--font-weight-regular); font-size: var(--font-size-md); }
/* KEEP: pricing box — unique shadow + border style */
.price-box { background: var(--color-white); border-radius: var(--r-xl); padding: var(--sp-8) 36px; box-shadow: 0 8px 40px rgba(0,144,255,0.12); border: 2px solid rgba(0,144,255,0.15); }
.price-num { font-size: 52px; font-weight: var(--font-weight-extrabold); color: var(--color-text); line-height: 1; }
.compare-box { background: var(--color-blue-1); border-radius: var(--r-md); padding: 14px var(--sp-4); margin: 20px 0; font-size: var(--font-size-md); font-weight: var(--font-weight-regular); color: var(--color-muted); }
.guarantee { display: flex; gap: var(--sp-3); align-items: flex-start; margin-top: 18px; padding-top: 18px; border-top: 1px solid var(--color-border); font-size: var(--font-size-md); font-weight: var(--font-weight-regular); color: var(--color-muted); }

/* RESPONSIVE */
@media(max-width:960px) {
  .method-grid, .manu-grid, .memb-grid { grid-template-columns: 1fr; gap: var(--sp-7); }
  .memb-feat-grid { grid-template-columns: 1fr !important; gap: var(--sp-4) !important; }
  .manu-photo { aspect-ratio: unset; height: 320px; }
}
@media(max-width:640px) {
  .section { padding: 56px 0; }
  .price-box { padding: 28px 22px; }
}