/* ═══════════════════════════════════════════════════════════════════
   Techin Society Theme — Main CSS
   ═══════════════════════════════════════════════════════════════════ */

/* ── Header ──────────────────────────────────────────────────── */
.site-header {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 1000;
  /*
   * DEFAULT (all internal pages): solid navy from pixel 0.
   * No transitions until JS runs — so there is never a flash of
   * white/transparent on page load.
   */
  background: var(--navy);
  box-shadow: 0 2px 20px rgba(0,0,0,.25);
  padding: 0;
  transition: background var(--dur-base) var(--ease),
              box-shadow var(--dur-base) var(--ease),
              backdrop-filter var(--dur-base) var(--ease);
}

/*
 * Homepage ONLY: start transparent so the full-bleed hero shows through.
 * JS adds .scrolled once user scrolls 40px, which triggers the
 * frosted-glass effect below.
 */
.page-home .site-header {
  background: transparent;
  box-shadow: none;
}

.site-header[data-home="1"] {
  background: transparent;
  box-shadow: none;
}

.page-home .site-header.scrolled,
.site-header[data-home="1"].scrolled {
  background: rgba(15,39,68,.95);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  box-shadow: 0 4px 32px rgba(0,0,0,.25);
}

/* Non-home pages: add extra shadow lift on scroll for depth */
.site-header.scrolled {
  box-shadow: 0 4px 24px rgba(0,0,0,.35);
}

.header-inner {
  display: flex;
  align-items: center;
  gap: var(--space-lg);
  height: 72px;
}

/* Logo — breathing room, no squeezing */
.site-logo { flex: none; text-decoration: none; }
.logo-text  {
  display: flex;
  align-items: center;
  gap: 12px;           /* generous gap between icon and text */
  white-space: nowrap;
}
.logo-icon { font-size: 1.6rem; flex: none; line-height: 1; }
.logo-name {
  font-family: var(--font-display);
  font-size: 1.25rem;
  font-weight: 800;
  color: #fff;
  letter-spacing: 0.02em;  /* slightly positive — no squeezing */
  line-height: 1;
  word-break: keep-all;
  white-space: nowrap;
}

/* Primary Nav */
.primary-nav { flex: 1; min-width: 0; }
.nav-menu { display:flex; align-items:center; gap:4px; justify-content:center; }
.nav-menu li { position:relative; }
.nav-menu li a {
  padding: 8px 14px;
  font-size: .9rem;
  font-weight: 500;
  color: rgba(255,255,255,.85);
  border-radius: var(--r-sm);
  transition: all var(--dur-fast) var(--ease);
  display: block;
  white-space: nowrap;
}
.nav-menu li a:hover { color:#fff; background: rgba(255,255,255,.1); }
.nav-menu li.current-menu-item > a { color:#fff; }

/* Sub-menu */
.nav-menu .sub-menu {
  position:absolute; top:calc(100% + 8px); left:0;
  background:#fff; border-radius:var(--r-md); min-width:200px;
  box-shadow:var(--shadow-lg); border:1px solid var(--gray-100);
  opacity:0; visibility:hidden; transform:translateY(8px);
  transition:all var(--dur-fast) var(--ease); z-index:100;
}
.nav-menu li:hover .sub-menu { opacity:1; visibility:visible; transform:none; }
.nav-menu .sub-menu a { color:var(--gray-700) !important; border-radius:0; padding:10px 16px; font-size:.875rem; }
.nav-menu .sub-menu a:hover { color:var(--navy) !important; background:var(--gray-50) !important; }

.header-actions { display:flex; align-items:center; gap:8px; flex:none; }
.btn-ghost-nav {
  color:rgba(255,255,255,.85);
  border: 1.5px solid rgba(255,255,255,.3);
  background:transparent;
  padding:8px 18px;
  font-size:.875rem;
  border-radius:var(--r-full);
  font-weight:500;
  transition:all var(--dur-fast) var(--ease);
  white-space: nowrap;
}
.btn-ghost-nav:hover { color:#fff; border-color:rgba(255,255,255,.8); background:rgba(255,255,255,.08); }

/* Mobile toggle */
.nav-toggle { display:none; flex-direction:column; gap:5px; background:none; border:none; cursor:pointer; padding:6px; }
.nav-toggle span { display:block; width:24px; height:2px; background:#fff; border-radius:2px; transition:all var(--dur-fast) var(--ease); }
.nav-toggle.open span:nth-child(1) { transform:rotate(45deg) translate(5px,5px); }
.nav-toggle.open span:nth-child(2) { opacity:0; }
.nav-toggle.open span:nth-child(3) { transform:rotate(-45deg) translate(5px,-5px); }

.nav-overlay { display:none; position:fixed; inset:0; background:rgba(0,0,0,.5); z-index:99; }

@media(max-width:900px) {
  .nav-toggle { display:flex; }
  .primary-nav {
    position:fixed; top:72px; left:0; right:0; bottom:0;
    background:var(--navy); overflow-y:auto; z-index:100;
    transform:translateX(100%); transition:transform var(--dur-base) var(--ease);
    padding:var(--space-lg);
  }
  .primary-nav.open { transform:none; }
  .nav-menu { flex-direction:column; align-items:stretch; gap:2px; }
  .nav-menu li a { font-size:1.05rem; padding:12px 16px; color:#fff !important; border-radius:var(--r-md); }
  .nav-menu .sub-menu { position:static; box-shadow:none; background:rgba(255,255,255,.08); margin:4px 0 0 16px; opacity:1; visibility:visible; transform:none; }
  .nav-menu .sub-menu a { color:rgba(255,255,255,.8) !important; }
  .header-actions { display:none; }
}

/* ── Hero ────────────────────────────────────────────────────────── */
.hero-section {
  min-height: 100vh;
  background: var(--navy);
  display: flex;
  align-items: center;
  position: relative;
  overflow: hidden;
  padding: 100px 0 60px;
}
.hero-bg { position:absolute; inset:0; pointer-events:none; }
.hero-orb { position:absolute; border-radius:50%; filter:blur(80px); opacity:.3; }
.hero-orb-1 { width:600px; height:600px; background:var(--teal); top:-100px; right:-100px; animation:float 8s ease-in-out infinite; }
.hero-orb-2 { width:400px; height:400px; background:var(--amber); bottom:-100px; left:-50px; animation:float 10s ease-in-out infinite reverse; }
.hero-grid-overlay { position:absolute; inset:0; background-image:radial-gradient(rgba(255,255,255,.05) 1px,transparent 1px); background-size:40px 40px; }

.hero-container { display:grid; grid-template-columns:1fr 1fr; gap:var(--space-2xl); align-items:center; position:relative; z-index:1; }
.hero-content { max-width:580px; }

.hero-badge { margin-bottom:var(--space-lg); }
.hero-headline { font-size:clamp(2.4rem,5vw,3.8rem); font-weight:800; color:#fff; line-height:1.1; margin-bottom:var(--space-lg); }
.hero-headline-accent { color:var(--teal-light); }
.hero-sub { font-size:1.1rem; color:rgba(255,255,255,.75); margin-bottom:var(--space-xl); max-width:52ch; }

.hero-actions { display:flex; gap:var(--space-md); flex-wrap:wrap; margin-bottom:var(--space-xl); }
.hero-play-btn { color:rgba(255,255,255,.85); border-color:rgba(255,255,255,.25); background:rgba(255,255,255,.05); }
.hero-play-btn:hover { background:rgba(255,255,255,.12); color:#fff; }
.play-icon { width:28px; height:28px; background:rgba(255,255,255,.2); border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:.75rem; }

.hero-social-proof { display:flex; align-items:center; gap:var(--space-md); }
.avatar-stack { display:flex; }
.avatar-item { width:36px; height:36px; border-radius:50%; border:2px solid var(--navy); display:flex; align-items:center; justify-content:center; font-size:.75rem; font-weight:700; color:#fff; margin-left:-10px; }
.avatar-item:first-child { margin-left:0; }
.proof-stars { color:var(--amber); font-size:.9rem; }
.proof-label { color:rgba(255,255,255,.7); font-size:.8rem; }

/* Phone mockup */
.hero-visual { display:flex; justify-content:center; position:relative; }
.mockup-wrapper { position:relative; }
.mockup-phone { width:280px; background:#1a1a2e; border-radius:32px; padding:12px; box-shadow:0 30px 80px rgba(0,0,0,.5), 0 0 0 1px rgba(255,255,255,.1); }
.mockup-screen { background:#f8fafc; border-radius:24px; padding:16px; overflow:hidden; }
.mock-topbar { display:flex; justify-content:space-between; align-items:center; margin-bottom:12px; }
.mock-society-name { font-size:.75rem; font-weight:700; color:var(--navy); }
.mock-avatar { width:28px; height:28px; background:var(--teal); border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:.65rem; font-weight:700; color:#fff; }
.mock-stat-row { display:flex; gap:8px; margin-bottom:12px; }
.mock-stat { flex:1; background:var(--off); border-radius:10px; padding:10px 8px; text-align:center; }
.mock-stat-green { background:#f0fdf4; }
.mock-num { font-size:.85rem; font-weight:800; color:var(--navy); }
.mock-stat-green .mock-num { color:#16a34a; }
.mock-lbl { font-size:.6rem; color:var(--gray-400); margin-top:2px; }
.mock-notice { display:flex; align-items:flex-start; gap:8px; background:#fff; border:1px solid var(--gray-200); border-radius:8px; padding:8px; margin-bottom:6px; }
.mock-notice-ok { border-color:#bbf7d0; background:#f0fdf4; }
.mock-notice-dot { width:8px; height:8px; border-radius:50%; background:var(--amber); margin-top:4px; flex:none; }
.mock-dot-green { background:var(--green); }
.mock-notice-title { font-size:.7rem; font-weight:600; color:var(--navy); }
.mock-notice-sub { font-size:.6rem; color:var(--gray-400); margin-top:2px; }
.mock-tabs { display:flex; gap:4px; margin-top:10px; }
.mock-tab { flex:1; text-align:center; font-size:.6rem; padding:5px; border-radius:6px; color:var(--gray-400); font-weight:600; }
.mock-tab.active { background:var(--navy); color:#fff; }

.float-badge { position:absolute; background:#fff; border-radius:var(--r-full); padding:7px 14px; font-size:.75rem; font-weight:600; color:var(--navy); box-shadow:var(--shadow-md); white-space:nowrap; display:flex; align-items:center; gap:6px; }
.float-badge-1 { top:-20px; right:-30px; }
.float-badge-2 { bottom:40px; right:-40px; }
.float-badge-3 { bottom:-10px; left:-30px; }
.float-badge span { font-size:1rem; }

@media(max-width:900px) {
  .hero-container { grid-template-columns:1fr; gap:var(--space-xl); text-align:center; }
  .hero-content { margin:0 auto; }
  .hero-actions { justify-content:center; }
  .hero-social-proof { justify-content:center; }
  .hero-visual { display:none; }
}

/* ── Stats Bar ───────────────────────────────────────────────────── */
.stats-bar { background:var(--off); border-top:1px solid var(--gray-100); border-bottom:1px solid var(--gray-100); padding:var(--space-xl) 0; }
.stats-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:0; }
.stat-item { text-align:center; padding:var(--space-lg) var(--space-md); border-right:1px solid var(--gray-200); }
.stat-item:last-child { border-right:none; }
.stat-icon { font-size:1.8rem; margin-bottom:8px; }
.stat-number { font-family:var(--font-display); font-size:2.2rem; font-weight:800; color:var(--navy); line-height:1; }
.stat-label { color:var(--gray-500); font-size:.85rem; margin-top:4px; }

@media(max-width:768px) {
  .stats-grid { grid-template-columns:repeat(2,1fr); }
  .stat-item:nth-child(2) { border-right:none; }
  .stat-item { border-bottom:1px solid var(--gray-200); }
  .stat-item:nth-child(3),.stat-item:nth-child(4) { border-bottom:none; }
}

/* ── Features ────────────────────────────────────────────────────── */
.features-section { background:var(--white); }
.features-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:var(--space-lg); }
.feature-card { padding:var(--space-lg); }
.feature-icon-wrap { width:56px; height:56px; border-radius:var(--r-md); display:flex; align-items:center; justify-content:center; margin-bottom:var(--space-md); }
.feature-icon { font-size:1.6rem; }
.feature-card h3 { font-size:1.05rem; margin-bottom:8px; }
.feature-card p  { font-size:.9rem; color:var(--gray-500); line-height:1.6; margin:0; }

@media(max-width:900px) { .features-grid { grid-template-columns:repeat(2,1fr); } }
@media(max-width:600px) { .features-grid { grid-template-columns:1fr; } }

/* ── How It Works ────────────────────────────────────────────────── */
.how-section { background:var(--off); }
.how-inner { display:grid; grid-template-columns:1fr 1fr; gap:var(--space-2xl); align-items:center; }
.how-text .section-desc { margin-bottom:var(--space-xl); }
.steps-list { display:flex; flex-direction:column; gap:var(--space-lg); }
.step-item { display:flex; gap:var(--space-lg); align-items:flex-start; }
.step-num { width:44px; height:44px; background:var(--navy); color:#fff; border-radius:50%; display:flex; align-items:center; justify-content:center; font-family:var(--font-display); font-weight:800; font-size:.9rem; flex:none; }
.step-body h4 { font-size:1rem; margin-bottom:4px; }
.step-body p  { font-size:.875rem; color:var(--gray-500); margin:0; }

/* Dashboard mockup */
.how-visual { display:flex; justify-content:center; }
.dashboard-mockup { width:100%; max-width:460px; background:var(--white); border-radius:var(--r-lg); box-shadow:var(--shadow-xl); border:1px solid var(--gray-200); overflow:hidden; }
.dm-titlebar { background:#f3f4f6; padding:10px 14px; display:flex; align-items:center; gap:10px; }
.dm-dots { display:flex; gap:5px; }
.dm-dots span { width:11px; height:11px; border-radius:50%; background:#e5e7eb; }
.dm-dots span:nth-child(1){background:#fc5356;} .dm-dots span:nth-child(2){background:#ffbd2e;} .dm-dots span:nth-child(3){background:#27c93f;}
.dm-url { font-size:.72rem; color:var(--gray-400); background:#fff; border-radius:4px; padding:3px 10px; flex:1; text-align:center; }
.dm-body { display:flex; height:260px; }
.dm-sidebar { width:44px; background:var(--navy); display:flex; flex-direction:column; gap:2px; padding:8px 4px; }
.dm-sb-item { font-size:1.1rem; text-align:center; padding:6px; border-radius:6px; cursor:pointer; }
.dm-sb-item:hover,.dm-sb-item:first-child { background:rgba(255,255,255,.15); }
.dm-content { flex:1; padding:12px; overflow:hidden; }
.dm-header-bar { display:flex; justify-content:space-between; margin-bottom:10px; }
.dm-title { font-family:var(--font-display); font-weight:700; font-size:.85rem; color:var(--navy); }
.dm-badge-green { font-size:.65rem; color:#16a34a; font-weight:600; }
.dm-stats-row { display:grid; grid-template-columns:repeat(4,1fr); gap:5px; margin-bottom:10px; }
.dm-stat { background:var(--off); border-radius:6px; padding:7px 5px; text-align:center; }
.dm-stat-green{ background:#f0fdf4; } .dm-stat-orange{ background:#fff7ed; } .dm-stat-blue{ background:#eff6ff; }
.dm-val { font-size:.7rem; font-weight:800; color:var(--navy); }
.dm-stat-green .dm-val{color:#16a34a;} .dm-stat-orange .dm-val{color:#c2410c;} .dm-stat-blue .dm-val{color:#1d4ed8;}
.dm-lbl { font-size:.55rem; color:var(--gray-400); }
.dm-table-preview { display:flex; flex-direction:column; gap:3px; }
.dm-table-row { display:flex; align-items:center; gap:8px; padding:6px 8px; background:var(--off); border-radius:6px; font-size:.7rem; }
.dm-row-flat { font-weight:700; color:var(--navy); width:36px; }
.dm-row-name { flex:1; color:var(--gray-500); }
.dm-row-status { padding:2px 7px; border-radius:9999px; font-size:.6rem; font-weight:700; }
.dm-status-paid { background:#dcfce7; color:#166534; }
.dm-status-overdue { background:#fee2e2; color:#991b1b; }
.dm-status-partial { background:#fef3c7; color:#92400e; }

@media(max-width:900px) {
  .how-inner { grid-template-columns:1fr; }
  .how-visual { display:none; }
}

/* ── Pricing ─────────────────────────────────────────────────────── */
.pricing-section { background:var(--off); }
.billing-toggle { display:inline-flex; align-items:center; gap:12px; background:var(--white); border:1px solid var(--gray-200); border-radius:var(--r-full); padding:6px 16px; margin-top:var(--space-lg); cursor:pointer; }
.toggle-opt { font-size:.875rem; font-weight:600; color:var(--gray-400); transition:color var(--dur-fast) var(--ease); }
.toggle-opt.active { color:var(--navy); }
.toggle-switch { width:44px; height:24px; background:var(--gray-200); border-radius:var(--r-full); position:relative; transition:background var(--dur-fast) var(--ease); }
.toggle-switch.on { background:var(--teal); }
.toggle-knob { width:18px; height:18px; background:#fff; border-radius:50%; position:absolute; top:3px; left:3px; transition:transform var(--dur-fast) var(--ease); box-shadow:0 1px 3px rgba(0,0,0,.15); }
.toggle-switch.on .toggle-knob { transform:translateX(20px); }
.toggle-save { background:var(--teal); color:#fff; font-size:.65rem; padding:2px 6px; border-radius:9999px; margin-left:4px; }

.pricing-grid { display:grid; grid-template-columns:repeat(5,1fr); gap:var(--space-md); align-items:start; }
.pricing-card { background:var(--white); border:2px solid var(--gray-200); border-radius:var(--r-lg); padding:28px 20px; position:relative; transition:all var(--dur-base) var(--ease); text-align:center; }
.pricing-card:hover { transform:translateY(-4px); box-shadow:var(--shadow-lg); }
.pricing-popular { border-color:var(--teal); transform:scale(1.03); box-shadow:var(--shadow-teal); }
.pricing-popular:hover { transform:scale(1.03) translateY(-4px); }
.popular-badge { position:absolute; top:-14px; left:50%; transform:translateX(-50%); background:var(--teal); color:#fff; font-size:.72rem; font-weight:700; padding:4px 14px; border-radius:var(--r-full); white-space:nowrap; }
.lifetime-badge { position:absolute; top:-14px; left:50%; transform:translateX(-50%); background:var(--amber); color:var(--navy); font-size:.72rem; font-weight:700; padding:4px 14px; border-radius:var(--r-full); white-space:nowrap; }
.pricing-icon { font-size:2rem; margin-bottom:8px; }
.pricing-plan-name { font-family:var(--font-display); font-weight:800; font-size:1.1rem; color:var(--navy); margin-bottom:12px; }
.pricing-price-wrap { margin-bottom:8px; }
.pricing-price { display:flex; align-items:flex-start; justify-content:center; }
.price-currency { font-size:1.1rem; font-weight:700; color:var(--navy); margin-top:8px; }
.price-amount { font-family:var(--font-display); font-size:2.4rem; font-weight:800; color:var(--navy); line-height:1; }
.price-period { font-size:.8rem; color:var(--gray-400); margin-bottom:8px; }
.pricing-flat-limit { font-size:.8rem; color:var(--gray-500); background:var(--gray-50); padding:4px 12px; border-radius:var(--r-full); display:inline-block; margin-bottom:16px; }
.pricing-features { text-align:left; display:flex; flex-direction:column; gap:7px; margin-bottom:var(--space-lg); }
.pricing-features li { display:flex; align-items:flex-start; gap:8px; font-size:.82rem; color:var(--gray-700); line-height:1.4; }
.pricing-features svg { flex:none; margin-top:1px; }
.pricing-cta { width:100%; justify-content:center; }
.pricing-note { margin-top:var(--space-xl); color:var(--gray-500); font-size:.9rem; }

@media(max-width:1100px) { .pricing-grid { grid-template-columns:repeat(3,1fr); } .pricing-popular { transform:none; } }
@media(max-width:768px)  { .pricing-grid { grid-template-columns:1fr; max-width:380px; margin:0 auto; } }

/* ── Testimonials ────────────────────────────────────────────────── */
.testimonials-section { background:var(--navy); }
.testimonials-section .section-label { color:rgba(255,255,255,.6); }
.testimonials-section h2 { color:#fff; }
.testimonials-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:var(--space-lg); }
.testimonial-card { padding:var(--space-lg); }
.testimonial-stars { color:var(--amber); font-size:1rem; margin-bottom:12px; letter-spacing:2px; }
.testimonial-card blockquote { font-size:.9rem; color:var(--gray-700); font-style:italic; line-height:1.7; margin:0 0 var(--space-md); max-width:none; }
.testimonial-author { display:flex; align-items:center; gap:10px; }
.testimonial-avatar-placeholder { width:42px; height:42px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-weight:800; font-size:.9rem; color:#fff; flex:none; background:var(--teal); }
.testimonial-avatar-placeholder.large { width:52px; height:52px; font-size:1.1rem; }
.testimonial-name { font-weight:700; font-size:.9rem; color:var(--navy); }
.testimonial-role { font-size:.78rem; color:var(--gray-400); }

@media(max-width:900px) { .testimonials-grid { grid-template-columns:repeat(2,1fr); } }
@media(max-width:600px) { .testimonials-grid { grid-template-columns:1fr; } }

/* ── Trust band ──────────────────────────────────────────────────── */
.trust-section { background:var(--off); padding:var(--space-xl) 0; }
.trust-label { font-size:.8rem; color:var(--gray-400); text-align:center; text-transform:uppercase; letter-spacing:.08em; margin-bottom:var(--space-md); }
.trust-cities { display:flex; flex-wrap:wrap; justify-content:center; gap:10px; }
.trust-city { background:var(--white); border:1px solid var(--gray-200); border-radius:var(--r-full); padding:6px 16px; font-size:.875rem; font-weight:600; color:var(--gray-700); }

/* ── FAQ ─────────────────────────────────────────────────────────── */
.faq-section { background:var(--white); }
.faq-accordion { display:flex; flex-direction:column; gap:8px; }
.faq-item { border:1px solid var(--gray-200); border-radius:var(--r-md); overflow:hidden; transition:box-shadow var(--dur-fast) var(--ease); }
.faq-item.open { box-shadow:var(--shadow-md); border-color:var(--teal); }
.faq-question { width:100%; background:none; border:none; padding:18px 20px; text-align:left; font-family:var(--font-body); font-size:.95rem; font-weight:600; color:var(--navy); cursor:pointer; display:flex; justify-content:space-between; align-items:center; gap:16px; transition:background var(--dur-fast) var(--ease); }
.faq-question:hover { background:var(--off); }
.faq-icon { font-size:1.3rem; color:var(--teal); transition:transform var(--dur-fast) var(--ease); flex:none; }
.faq-item.open .faq-icon { transform:rotate(45deg); }
.faq-answer { max-height:0; overflow:hidden; transition:max-height var(--dur-slow) var(--ease); }
.faq-item.open .faq-answer { max-height:400px; }
.faq-answer-inner { padding:0 20px 18px; font-size:.9rem; color:var(--gray-500); line-height:1.7; }
.faq-answer-inner p { max-width:none; margin:0; }

/* ── CTA Band ────────────────────────────────────────────────────── */
.cta-band { background:var(--navy); padding:var(--space-2xl) 0; position:relative; overflow:hidden; }
.cta-bg-pattern { position:absolute; inset:0; background-image:radial-gradient(rgba(255,255,255,.04) 1px,transparent 1px); background-size:32px 32px; }
.cta-inner { position:relative; z-index:1; display:flex; justify-content:space-between; align-items:center; gap:var(--space-xl); flex-wrap:wrap; }
.cta-content .section-label::before { background:rgba(255,255,255,.5); }
.cta-actions { display:flex; gap:var(--space-md); flex-wrap:wrap; }

@media(max-width:768px) { .cta-inner { flex-direction:column; text-align:center; } .cta-content .section-label { justify-content:center; } .cta-actions { justify-content:center; } }

/* ── Contact ─────────────────────────────────────────────────────── */
.contact-section { background:var(--off); }
.contact-grid { display:grid; grid-template-columns:1fr 1fr; gap:var(--space-2xl); align-items:start; }
.contact-info .section-desc { margin-bottom:var(--space-xl); }
.contact-methods { display:flex; flex-direction:column; gap:var(--space-md); }
.contact-method { display:flex; align-items:flex-start; gap:var(--space-md); }
.cm-icon { font-size:1.4rem; width:44px; flex:none; }
.cm-label { font-size:.75rem; text-transform:uppercase; letter-spacing:.06em; color:var(--gray-400); font-weight:600; }
.cm-value { font-size:.95rem; font-weight:600; color:var(--navy); }
.contact-form-card { padding:var(--space-xl); }
.contact-success { text-align:center; padding:var(--space-xl); }
.contact-success > div { font-size:2.5rem; margin-bottom:10px; }
.contact-success strong { display:block; font-size:1.1rem; color:var(--navy); margin-bottom:6px; }
.contact-success p { margin:0; color:var(--gray-500); font-size:.9rem; }

@media(max-width:768px) { .contact-grid { grid-template-columns:1fr; } }

/* ── Footer ──────────────────────────────────────────────────────── */
.footer-newsletter { background:var(--teal); padding:var(--space-xl) 0; }
.newsletter-inner { display:flex; justify-content:space-between; align-items:center; gap:var(--space-xl); flex-wrap:wrap; }
.newsletter-text h3 { color:#fff; margin:0 0 4px; }
.newsletter-text p  { color:rgba(255,255,255,.8); margin:0; font-size:.9rem; }
.newsletter-form { display:flex; gap:10px; flex:1; max-width:400px; }
.newsletter-form .form-input { background:rgba(255,255,255,.15); border-color:rgba(255,255,255,.3); color:#fff; }
.newsletter-form .form-input::placeholder { color:rgba(255,255,255,.6); }
.newsletter-form .form-input:focus { background:rgba(255,255,255,.25); border-color:#fff; }

@media(max-width:768px) { .newsletter-inner { flex-direction:column; } .newsletter-form { max-width:100%; width:100%; } }

.footer-main { background:var(--navy); padding:var(--space-2xl) 0 var(--space-xl); }
.footer-grid { display:grid; grid-template-columns:2fr 1fr 1fr 1fr; gap:var(--space-2xl); }
.footer-brand p { color:rgba(255,255,255,.6); font-size:.875rem; margin:var(--space-md) 0 var(--space-lg); max-width:30ch; }
.footer-logo { display:flex; align-items:center; gap:8px; text-decoration:none; }
.footer-logo .logo-name { color:#fff; }
.footer-contact { display:flex; align-items:center; gap:8px; color:rgba(255,255,255,.7); font-size:.875rem; margin-bottom:8px; }
.footer-contact svg { color:var(--teal); flex:none; }

.footer-social { display:flex; gap:10px; margin-top:var(--space-lg); }
.social-icon { width:36px; height:36px; background:rgba(255,255,255,.08); border-radius:8px; display:flex; align-items:center; justify-content:center; color:rgba(255,255,255,.7); transition:all var(--dur-fast) var(--ease); }
.social-icon:hover { background:var(--teal); color:#fff; transform:translateY(-2px); }

.footer-col h5 { color:#fff; font-size:.9rem; font-weight:700; margin-bottom:var(--space-md); letter-spacing:.02em; }
.footer-links { display:flex; flex-direction:column; gap:8px; }
.footer-links li a { color:rgba(255,255,255,.55); font-size:.875rem; transition:color var(--dur-fast) var(--ease); }
.footer-links li a:hover { color:#fff; }

.footer-bottom { background:rgba(0,0,0,.3); padding:var(--space-md) 0; }
.footer-bottom-inner { display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:var(--space-md); }
.footer-bottom p { color:rgba(255,255,255,.45); font-size:.8rem; margin:0; }
.footer-bottom-links { display:flex; gap:var(--space-lg); }
.footer-bottom-links a { color:rgba(255,255,255,.45); font-size:.8rem; }
.footer-bottom-links a:hover { color:#fff; }
.footer-badges { display:flex; gap:8px; flex-wrap:wrap; }
.trust-badge { background:rgba(255,255,255,.06); color:rgba(255,255,255,.5); font-size:.72rem; padding:3px 10px; border-radius:9999px; border:1px solid rgba(255,255,255,.1); }

@media(max-width:900px) { .footer-grid { grid-template-columns:1fr 1fr; } }
@media(max-width:600px) { .footer-grid { grid-template-columns:1fr; } .footer-bottom-inner { flex-direction:column; text-align:center; } }

/* ── Breadcrumb ──────────────────────────────────────────────────── */
.breadcrumb {
  padding: var(--space-md) 0;
  /* Breadcrumb sits inside .container which has padding:0 24px.
     Add a small extra nudge so it never hugs the viewport edge. */
}
.breadcrumb ol {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  list-style: none;
  font-size: .8rem;
  margin: 0;
  padding: 0;
  /* Indent slightly within the container for visual breathing room */
  padding-left: 2px;
}
.breadcrumb li:not(:last-child)::after { content: '›'; margin-left: 6px; color: var(--gray-400); }
.breadcrumb a { color: var(--teal); }
.breadcrumb a:hover { color: var(--teal-light); }
.breadcrumb li[aria-current] { color: var(--gray-500); }

/* Ensure page-content-wrap (which wraps breadcrumb) uses container padding */
.page-content-wrap {
  padding: var(--space-2xl) 0;
  /* padding-left/right come from .container parent — do NOT override them here */
}

/* ── Interior page wrapper ───────────────────────────────────────── */
.page-inner {
  padding-top: 72px; /* exact header height — for normal pages only */
}

.page-hero {
  background: linear-gradient(135deg, var(--navy) 0%, #1a4060 60%, #0d6b74 100%);
  padding: var(--space-2xl) 0 var(--space-xl);
  text-align: center;
  position: relative;
  overflow: hidden;
}
/* Subtle dot grid overlay on page heroes */
.page-hero::before {
  content: '';
  position: absolute; inset: 0;
  background-image: radial-gradient(rgba(255,255,255,.04) 1px, transparent 1px);
  background-size: 32px 32px;
  pointer-events: none;
}
.page-hero .container { position: relative; z-index: 1; }
.page-hero h1 { color: #fff; margin-bottom: 10px; }
.page-hero p  { color: rgba(255,255,255,.7); margin: var(--space-sm) auto 0; max-width: 52ch; }

/* .page-content-wrap padding defined in breadcrumb block above */

/* ── Single post / page content ─────────────────────────────────── */
.entry-content { max-width:720px; margin:0 auto; }
.entry-content h2,.entry-content h3,.entry-content h4 { margin:var(--space-xl) 0 var(--space-md); }
.entry-content p,.entry-content ul,.entry-content ol { margin-bottom:var(--space-md); }
.entry-content ul { list-style:disc; padding-left:var(--space-lg); }
.entry-content a { color:var(--teal); text-decoration:underline; }
.entry-content img { border-radius:var(--r-md); margin:var(--space-lg) 0; }
.entry-content blockquote { border-left:4px solid var(--teal); padding:var(--space-md) var(--space-lg); background:var(--off); border-radius:0 var(--r-md) var(--r-md) 0; margin:var(--space-lg) 0; font-style:italic; color:var(--gray-700); }
.entry-content code { background:var(--gray-100); padding:2px 6px; border-radius:4px; font-size:.875em; }
.entry-content pre  { background:var(--navy); color:#e2e8f0; padding:var(--space-lg); border-radius:var(--r-md); overflow-x:auto; }

/* ════════════════════════════════════════════════════════════════════
   SHORTCODE PAGES — Login, Register, Portal
   page.php outputs the shortcode directly inside <main.site-main>
   with NO wrapper divs for these pages.
   ════════════════════════════════════════════════════════════════════ */

/* All shortcode pages: push content below fixed header */
.page-soc-login .site-main,
.page-owner-login .site-main,
.page-register .site-main,
.page-portal .site-main {
  padding-top: 72px;
  min-height: calc(100vh - 72px);
  display: flex;
  flex-direction: column;
  background: var(--off);
}

/* ── LOGIN PAGES: split panel ────────────────────────────────────── */
/*
 * .ssm-login-wrap is output by login.php shortcode.
 * It contains: .ssm-login-left-panel + .login-right-panel
 * We use grid to create the two columns.
 */
.page-soc-login .ssm-login-wrap,
.page-owner-login .ssm-login-wrap {
  display: grid !important;
  grid-template-columns: 42% 1fr !important;
  width: 100% !important;
  max-width: 100% !important;
  min-height: calc(100vh - 72px) !important;
  padding: 0 !important;
  margin: 0 !important;
}

/*
 * When user is already logged in, the plugin outputs:
 * .ssm-login-wrap > .ssm-login-already  (no left panel)
 * Reset the grid so the single message is centered.
 */
.page-soc-login .ssm-login-wrap:has(.ssm-login-already),
.page-owner-login .ssm-login-wrap:has(.ssm-login-already) {
  display: flex !important;
  align-items: center;
  justify-content: center;
}
/* Fallback for browsers without :has() */
.ssm-login-already {
  text-align: center;
  padding: 60px 24px;
  width: 100%;
  max-width: 480px;
  margin: 0 auto;
  background: #fff;
  border-radius: 20px;
  box-shadow: 0 8px 40px rgba(0,0,0,.1);
}

/* Left branding panel */
.ssm-login-left-panel {
  background: linear-gradient(160deg, var(--navy) 0%, #1a4060 70%, #0a5a64 100%);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  padding: 60px 56px;
  gap: var(--space-xl);
  position: relative;
  overflow: hidden;
}
.ssm-login-left-panel::before {
  content: '';
  position: absolute;
  width: 400px; height: 400px;
  background: var(--teal);
  border-radius: 50%;
  opacity: .10;
  top: -80px; right: -80px;
  filter: blur(60px);
  pointer-events: none;
}
.ssm-login-left-panel::after {
  content: '';
  position: absolute;
  width: 300px; height: 300px;
  background: var(--amber);
  border-radius: 50%;
  opacity: .07;
  bottom: -60px; left: -40px;
  filter: blur(60px);
  pointer-events: none;
}
.login-panel-logo     { font-size: 3rem; line-height: 1; }
.login-panel-headline { font-family: var(--font-display); font-size: 2rem; font-weight: 800; color: #fff; line-height: 1.15; }
.login-panel-headline span { color: var(--teal-light); }
.login-panel-desc     { color: rgba(255,255,255,.65); font-size: .95rem; line-height: 1.65; max-width: 34ch; }
.login-panel-features { display: flex; flex-direction: column; gap: 10px; }
.login-panel-feature  { display: flex; align-items: center; gap: 10px; color: rgba(255,255,255,.75); font-size: .875rem; }
.login-panel-feature::before {
  content: '✓';
  min-width: 22px; height: 22px; border-radius: 50%;
  background: rgba(13,148,136,.3); color: var(--teal-light);
  display: flex; align-items: center; justify-content: center;
  font-size: .7rem; font-weight: 800; flex: none;
}

/* Right panel — holds and centers the form card */
.login-right-panel {
  background: var(--off);
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 48px 40px;
}

/* The login card itself */
.ssm-login-box {
  width: 100% !important;
  max-width: 440px !important;
  margin: 0 auto !important;
  padding: 48px 44px !important;
  box-shadow: 0 20px 60px rgba(0,0,0,.12), 0 4px 16px rgba(0,0,0,.06) !important;
  border-radius: 20px !important;
  background: #fff !important;
  border: 1px solid var(--gray-100) !important;
}

/* Login mobile */
@media(max-width: 768px) {
  .page-soc-login .ssm-login-wrap,
  .page-owner-login .ssm-login-wrap {
    grid-template-columns: 1fr !important;
  }
  .ssm-login-left-panel { display: none; }
  .login-right-panel    { padding: 40px 20px; align-items: flex-start !important; }
  .ssm-login-box        { padding: 36px 28px !important; box-shadow: 0 8px 40px rgba(0,0,0,.2) !important; }
}

/* ── REGISTER PAGE ────────────────────────────────────────────────── */
.page-register .site-main {
  background: linear-gradient(160deg, #eef2ff 0%, var(--off) 100%);
}
/* The plugin outputs .ssm-register-wrap — just center it */
.ssm-register-wrap {
  width: 100%;
  max-width: 720px;
  margin-left: auto !important;
  margin-right: auto !important;
  padding: 48px 24px 80px;
  box-sizing: border-box;
}

/* ── PORTAL PAGE ──────────────────────────────────────────────────── */
.page-portal .site-main { background: var(--off); }
.ssm-portal {
  width: 100%;
  max-width: 860px;
  margin-left: auto !important;
  margin-right: auto !important;
  padding: 40px 24px 80px;
  box-sizing: border-box;
  font-family: var(--font-body);
}
.ssm-portal-gated,
.ssm-portal-not-linked {
  max-width: 480px;
  margin: 60px auto;
  text-align: center;
  padding: 40px 24px;
}

/* ═══════════════════════════════════════════════════════════════════
   BLOG & ARCHIVE
   ═══════════════════════════════════════════════════════════════════ */
.blog-layout    { display:grid; grid-template-columns:1fr 320px; gap:var(--space-2xl); align-items:start; }
.blog-main      { min-width:0; }
.posts-grid     { display:grid; grid-template-columns:repeat(2,1fr); gap:var(--space-lg); }
.posts-grid-3   { grid-template-columns:repeat(3,1fr); }

/* Post card */
.post-card { display:flex; flex-direction:column; border-radius:var(--r-lg); overflow:hidden; }
.post-card-img-link { display:block; overflow:hidden; aspect-ratio:16/9; }
.post-card-img { width:100%; height:100%; object-fit:cover; transition:transform var(--dur-slow) var(--ease); }
.post-card:hover .post-card-img { transform:scale(1.04); }
.post-card-img-placeholder { aspect-ratio:16/9; background:linear-gradient(135deg,var(--navy),var(--teal)); display:flex; align-items:center; justify-content:center; font-size:3rem; }
.post-card-body { padding:var(--space-lg); display:flex; flex-direction:column; flex:1; }
.post-card-meta { display:flex; align-items:center; gap:var(--space-sm); margin-bottom:var(--space-sm); }
.post-cat-badge { background:rgba(13,148,136,.1); color:var(--teal); font-size:.72rem; font-weight:700; padding:3px 10px; border-radius:var(--r-full); text-transform:uppercase; letter-spacing:.05em; transition:background var(--dur-fast) var(--ease); }
.post-cat-badge:hover { background:var(--teal); color:#fff; }
.post-card-date { font-size:.78rem; color:var(--gray-400); }
.post-card-title { font-size:1.05rem; margin-bottom:var(--space-sm); line-height:1.4; flex:1; }
.post-card-title a { color:var(--navy); transition:color var(--dur-fast) var(--ease); }
.post-card-title a:hover { color:var(--teal); }
.post-card-excerpt { font-size:.875rem; color:var(--gray-500); line-height:1.6; margin-bottom:var(--space-md); max-width:none; }
.post-card-footer { display:flex; justify-content:space-between; align-items:center; border-top:1px solid var(--gray-100); padding-top:var(--space-md); margin-top:auto; }
.post-card-author { display:flex; align-items:center; gap:8px; font-size:.8rem; color:var(--gray-500); font-weight:500; }
.post-card-avatar { border-radius:50%; width:28px; height:28px; object-fit:cover; }
.post-read-more { font-size:.82rem; font-weight:700; color:var(--teal); transition:gap var(--dur-fast) var(--ease); }
.post-read-more:hover { color:var(--teal-light); }

/* Pagination */
.pagination-wrap { margin-top:var(--space-2xl); }
.pagination-wrap .nav-links { display:flex; gap:8px; flex-wrap:wrap; align-items:center; }
.pagination-wrap .page-numbers { padding:8px 14px; border-radius:var(--r-md); border:1.5px solid var(--gray-200); color:var(--navy); font-weight:600; font-size:.9rem; transition:all var(--dur-fast) var(--ease); }
.pagination-wrap .page-numbers:hover,.pagination-wrap .page-numbers.current { background:var(--teal); border-color:var(--teal); color:#fff; }
.pagination-wrap .prev,.pagination-wrap .next { padding:8px 18px; }

/* Sidebar */
.blog-sidebar { position:sticky; top:90px; }
.blog-sidebar .widget { background:var(--white); border:1px solid var(--gray-100); border-radius:var(--r-lg); padding:var(--space-lg); margin-bottom:var(--space-lg); box-shadow:var(--shadow-sm); }
.blog-sidebar .widget-title { font-size:.9rem; font-weight:700; text-transform:uppercase; letter-spacing:.06em; color:var(--navy); margin-bottom:var(--space-md); padding-bottom:var(--space-sm); border-bottom:2px solid var(--teal); display:inline-block; }
.blog-sidebar ul { display:flex; flex-direction:column; gap:8px; }
.blog-sidebar ul li a { font-size:.875rem; color:var(--gray-700); display:flex; justify-content:space-between; padding:4px 0; border-bottom:1px solid var(--gray-100); transition:color var(--dur-fast) var(--ease); }
.blog-sidebar ul li a:hover { color:var(--teal); }
.widget_search .search-form { display:flex; gap:8px; }
.widget_search .search-field { flex:1; }
.widget_search .search-submit { padding:10px 16px; }

/* No results */
.no-results { text-align:center; padding:var(--space-3xl) var(--space-lg); }
.no-results-icon { font-size:4rem; margin-bottom:var(--space-md); }
.no-results h2 { margin-bottom:var(--space-md); }
.no-results p  { color:var(--gray-500); margin-bottom:var(--space-xl); }

/* ═══════════════════════════════════════════════════════════════════
   SINGLE POST
   ═══════════════════════════════════════════════════════════════════ */
.post-hero {
  background: linear-gradient(135deg, var(--navy) 0%, #1a4060 70%, #0d6b74 100%);
  padding: var(--space-2xl) 0 var(--space-xl);
  position: relative;
  overflow: hidden;
}
.post-hero::before {
  content: ''; position: absolute; inset: 0;
  background-image: radial-gradient(rgba(255,255,255,.04) 1px, transparent 1px);
  background-size: 32px 32px; pointer-events: none;
}
.post-hero .container { position: relative; z-index: 1; }
.post-hero-inner { max-width:760px; }
.post-meta-top { display:flex; align-items:center; gap:var(--space-md); margin-bottom:var(--space-md); }
.post-read-time { font-size:.8rem; color:rgba(255,255,255,.55); }
.post-title   { color:#fff; font-size:clamp(1.6rem,4vw,2.6rem); margin-bottom:var(--space-md); }
.post-excerpt { color:rgba(255,255,255,.7); font-size:1.05rem; margin-bottom:var(--space-lg); max-width:60ch; }
.post-author-bar { display:flex; align-items:center; gap:var(--space-md); }
.author-avatar .author-img { border-radius:50%; width:48px; height:48px; border:2px solid rgba(255,255,255,.3); }
.author-name { color:#fff; font-weight:600; font-size:.9rem; }
.post-date-read { display:flex; align-items:center; gap:6px; font-size:.78rem; color:rgba(255,255,255,.55); }

.post-layout { display:grid; grid-template-columns:1fr 280px; gap:var(--space-2xl); align-items:start; }
.post-body { min-width:0; }
.post-featured-img { border-radius:var(--r-lg); overflow:hidden; margin-bottom:var(--space-xl); }
.post-thumb { width:100%; aspect-ratio:16/9; object-fit:cover; }

/* Post Tags & Share */
.post-tags { display:flex; flex-wrap:wrap; align-items:center; gap:8px; margin:var(--space-xl) 0; padding:var(--space-lg) 0; border-top:1px solid var(--gray-100); }
.post-tag { background:var(--gray-100); color:var(--gray-700); padding:4px 12px; border-radius:var(--r-full); font-size:.8rem; font-weight:500; transition:all var(--dur-fast) var(--ease); }
.post-tag:hover { background:var(--navy); color:#fff; }
.post-share { display:flex; align-items:center; gap:10px; flex-wrap:wrap; padding:var(--space-lg); background:var(--off); border-radius:var(--r-md); margin:var(--space-lg) 0; }
.post-share span { font-size:.85rem; font-weight:600; color:var(--gray-700); }
.share-btn { padding:7px 16px; border-radius:var(--r-full); font-size:.8rem; font-weight:600; transition:all var(--dur-fast) var(--ease); }
.share-twitter  { background:#e8f4fd; color:#1da1f2; } .share-twitter:hover  { background:#1da1f2; color:#fff; }
.share-facebook { background:#e8f0ff; color:#1877f2; } .share-facebook:hover { background:#1877f2; color:#fff; }
.share-whatsapp { background:#e8fdf0; color:#25d366; } .share-whatsapp:hover { background:#25d366; color:#fff; }
.share-linkedin { background:#e8f0ff; color:#0a66c2; } .share-linkedin:hover { background:#0a66c2; color:#fff; }

/* Author box */
.author-box { display:flex; gap:var(--space-lg); align-items:flex-start; background:var(--off); border-radius:var(--r-lg); padding:var(--space-lg); margin:var(--space-xl) 0; border:1px solid var(--gray-100); }
.author-box-img { border-radius:50%; width:80px; height:80px; flex:none; }
.author-box-name { font-weight:700; font-size:1.05rem; color:var(--navy); margin-bottom:4px; }
.author-box-bio  { font-size:.875rem; color:var(--gray-500); max-width:none; }

/* Post nav */
.post-nav { display:flex; justify-content:space-between; gap:var(--space-lg); margin:var(--space-xl) 0; padding:var(--space-lg) 0; border-top:1px solid var(--gray-100); }
.post-nav-link { display:flex; flex-direction:column; gap:4px; max-width:48%; }
.post-nav-next { align-items:flex-end; text-align:right; }
.post-nav-dir  { font-size:.75rem; text-transform:uppercase; letter-spacing:.06em; color:var(--teal); font-weight:700; }
.post-nav-title{ font-size:.9rem; font-weight:600; color:var(--navy); transition:color var(--dur-fast) var(--ease); }
.post-nav-link:hover .post-nav-title { color:var(--teal); }

/* Related posts */
.related-posts { background:var(--off); }
.related-posts h3 { margin-bottom:var(--space-xl); }

/* Comments */
.comments-area { margin-top:var(--space-2xl); border-top:1px solid var(--gray-100); padding-top:var(--space-xl); }
.comments-title { font-size:1.3rem; margin-bottom:var(--space-xl); }
.comment-list { list-style:none; }
.comment-list .comment { padding:var(--space-lg) 0; border-bottom:1px solid var(--gray-100); }
.comment-list .comment-author .fn { font-weight:700; color:var(--navy); }
.comment-list .comment-meta { font-size:.8rem; color:var(--gray-400); margin-bottom:8px; }
.comment-list .comment-content p { font-size:.9rem; max-width:none; }
.comment-form h3 { margin:var(--space-xl) 0 var(--space-lg); }
.comment-form input,.comment-form textarea { @extend .form-input; }
.form-submit input { @extend .btn; @extend .btn-primary; cursor:pointer; }

/* ═══════════════════════════════════════════════════════════════════
   404 PAGE
   ═══════════════════════════════════════════════════════════════════ */
.error-404-wrap { display:flex; align-items:center; justify-content:center; min-height:calc(100vh - 80px); background:linear-gradient(135deg,var(--off),#e8f0fe); padding-top:80px; }
.error-404-inner { text-align:center; max-width:500px; padding:var(--space-xl); }
.error-404-visual { position:relative; display:inline-block; margin-bottom:var(--space-xl); }
.error-num { font-family:var(--font-display); font-size:9rem; font-weight:800; color:var(--navy); line-height:1; opacity:.08; }
.error-icon { position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); font-size:5rem; }
.error-404-inner h1 { margin-bottom:var(--space-md); }
.error-404-inner p  { color:var(--gray-500); margin-bottom:var(--space-xl); }
.error-actions { display:flex; gap:var(--space-md); justify-content:center; flex-wrap:wrap; }

/* ═══════════════════════════════════════════════════════════════════
   SEARCH FORM
   ═══════════════════════════════════════════════════════════════════ */
.search-form { display:flex; gap:8px; max-width:500px; }
.search-form .search-field  { flex:1; }
.search-form .search-submit { white-space:nowrap; }

/* ═══════════════════════════════════════════════════════════════════
   PAGE TEMPLATES
   ═══════════════════════════════════════════════════════════════════ */
/* Shortcode page containers — always full width, no padding */
.shortcode-page-wrap {
  width: 100%;
  max-width: 100%;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  flex: 1;
}
.shortcode-full-wrap {
  width: 100%;
  max-width: 100%;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  flex: 1;
}
.page-two-col {
  display: grid;
  grid-template-columns: 1fr 280px;
  gap: var(--space-2xl);
  align-items: start;
  width: 100%;
}
.page-two-col .entry-content { min-width:0; }

/* ═══════════════════════════════════════════════════════════════════
   RESPONSIVE FIXES
   ═══════════════════════════════════════════════════════════════════ */
@media(max-width:900px) {
  .blog-layout   { grid-template-columns:1fr; }
  .blog-sidebar  { position:static; }
  .post-layout   { grid-template-columns:1fr; }
  .post-layout .blog-sidebar { display:none; }
  .page-two-col  { grid-template-columns:1fr; }
  .posts-grid    { grid-template-columns:1fr; }
  .posts-grid-3  { grid-template-columns:repeat(2,1fr); }
}
@media(max-width:600px) {
  .posts-grid-3  { grid-template-columns:1fr; }
  .post-nav      { flex-direction:column; }
  .post-nav-next { align-items:flex-start; text-align:left; }
}

/* ═══════════════════════════════════════════════════════════════════
   PRICING PAGE EXTRAS
   ═══════════════════════════════════════════════════════════════════ */
.comparison-table-wrap { overflow-x:auto; border-radius:var(--r-lg); box-shadow:var(--shadow-md); }
.comparison-table { width:100%; border-collapse:collapse; background:var(--white); font-size:.875rem; }
.comparison-table th,.comparison-table td { padding:13px 16px; text-align:center; border-bottom:1px solid var(--gray-100); }
.comparison-table th:first-child,.comparison-table td:first-child { text-align:left; font-weight:600; color:var(--navy); }
.comparison-table thead tr { background:var(--navy); }
.comparison-table thead th { color:#fff; font-family:var(--font-display); font-weight:700; border-bottom:none; }
.comparison-table thead th:first-child { color:rgba(255,255,255,.7); }
.comparison-table tbody tr:hover { background:var(--off); }
.comparison-table td.col-popular,.comparison-table th.col-popular { background:rgba(13,148,136,.06); }
.comparison-table thead th.col-popular { background:var(--teal); }
.comparison-table td { color:var(--gray-500); }
.comparison-table td:first-child,.comparison-table td:last-child { color:var(--navy); font-weight:500; }

/* ═══════════════════════════════════════════════════════════════════
   FEATURES PAGE
   ═══════════════════════════════════════════════════════════════════ */
.feature-showcase { display:grid; grid-template-columns:1fr 1fr; gap:var(--space-2xl); align-items:center; padding:var(--space-2xl) 0; border-bottom:1px solid var(--gray-100); }
.feature-showcase:last-of-type { border-bottom:none; }
.feature-showcase-alt .feature-showcase-content { order:2; }
.feature-showcase-alt .feature-showcase-visual  { order:1; }
.feature-showcase-icon { width:64px; height:64px; border-radius:var(--r-lg); display:flex; align-items:center; justify-content:center; font-size:2rem; margin-bottom:var(--space-md); }
.feature-showcase h2 { margin-bottom:var(--space-md); }
.feature-showcase p  { color:var(--gray-500); margin-bottom:var(--space-lg); }
.feature-points { display:flex; flex-direction:column; gap:10px; }
.feature-points li { display:flex; align-items:flex-start; gap:10px; font-size:.9rem; color:var(--gray-700); }
.feature-points svg { flex:none; margin-top:2px; }

.feature-visual-card { background:var(--white); border-radius:var(--r-lg); padding:var(--space-xl); box-shadow:var(--shadow-lg); border:1px solid var(--gray-100); }
.fvc-header { display:flex; align-items:center; gap:12px; margin-bottom:var(--space-lg); font-size:.9rem; }
.fvc-mockup { display:flex; flex-direction:column; gap:10px; }
.fvc-row { display:flex; align-items:center; gap:10px; animation:fadeIn .5s ease both; }
.fvc-bar { height:12px; border-radius:6px; flex:1; }
.fvc-dot { width:10px; height:10px; border-radius:50%; flex:none; }

.features-cta-block { background:linear-gradient(135deg,var(--off),#e8f4ff); border-radius:var(--r-xl); padding:var(--space-3xl) var(--space-xl); margin-top:var(--space-3xl); }
.features-cta-block p { margin:var(--space-md) auto 0; color:var(--gray-500); }

@media(max-width:900px) {
  .feature-showcase { grid-template-columns:1fr; }
  .feature-showcase-alt .feature-showcase-content,.feature-showcase-alt .feature-showcase-visual { order:unset; }
  .feature-showcase-visual { display:none; }
}