/*============================================================
                            INDEX
============================================================
1. GLOBAL SETTINGS
   1.1 Reset & Base Setup
   1.2 Variables (colors, typography)
   1.3 Base Elements

2. LAYOUT STRUCTURE
   2.1 Header / Navigation
   2.2 Hero Sections (home + shared template)

3. SHARED COMPONENTS (sections, cards, buttons, etc.)

4. PAGE SECTIONS
   4.1 Homepage (Features, How It Works)
   4.2 Pricing
   4.3 How It Works page
   4.4 Blog Article page
   4.5 Blog page
   4.6 Features page
   4.7 About page
   4.8 Contact page
   4.9 Privacy Policy page
   4.10 Coming Soon page
   4.11 QR CODE DEMO PAGE
   4.12 Demo Apps page
   4.13 Enterprise pages
   4.14 Sign Up Retailer to PerQ

5. FOOTER

6. RESPONSIVE DESIGN

7. CLEAN ARTICLE HEADER LAYOUT
============================================================
*/

/* =========================================================
   1. GLOBAL SETTINGS
========================================================= */

/* 1.1 Reset & Base Setup */
*, *::before, *::after {
  box-sizing: border-box;
}

/* 1.2 Variables (colors, typography) */
:root {
  --brand-orange: #DE541E;
  --brand-deep: #F35B04;
  --brand-yellow: #F7B801;
  --text-dark: #222;
  --bg-light: #fefefe;
  --bg-soft: #334155; /* unified soft background color */
}

/* 1.3 Base Elements */
html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
  background-color: var(--bg-light);
  color: var(--text-dark);
  overflow-x: hidden;
}

/* Prevent layout shift on media */
img, video {
  max-width: 100%;
  height: auto;
  display: block;
}

html, body {
  height: 100%;
}

body {
  display: flex;
  flex-direction: column;
}

.main-content {
  flex: 1;
}

/* =========================================================
   2. LAYOUT STRUCTURE
========================================================= */

/* 2.1 Header / Navigation */
header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20px 60px;
  background: var(--bg-light);
  position: sticky;
  top: 0;
  z-index: 100;
  box-shadow: 0 2px 10px rgba(0,0,0,0.05);
}

header .logo {
  font-size: 1.4rem;
  font-weight: 800;
  color: var(--brand-orange);
  text-decoration: none;
}

nav a {
  color: var(--text-dark);
  text-decoration: none;
  margin-left: 25px;
  font-weight: 600;
  transition: color 0.3s ease;
}

nav a:hover {
  color: var(--brand-orange);
}

/* Hamburger menu - hidden on desktop */
.menu-toggle {
  display: none;
  flex-direction: column;
  cursor: pointer;
  padding: 5px;
  z-index: 101;
}

.menu-toggle span {
  width: 28px;
  height: 3px;
  background: var(--brand-orange);
  margin: 4px 0;
  transition: all 0.3s ease;
  border-radius: 2px;
}

/* Hamburger animation when open */
.menu-toggle.active span:nth-child(1) {
  transform: rotate(45deg) translate(8px, 8px);
}

.menu-toggle.active span:nth-child(2) {
  opacity: 0;
}

.menu-toggle.active span:nth-child(3) {
  transform: rotate(-45deg) translate(7px, -7px);
}

/* Logo image styling */
.logo img {
  height: 60px; /* adjust as needed */
  width: auto;
  display: block;
}

/* Optional: tweak alignment if needed */
header .logo {
  display: flex;
  align-items: center;
}

/* Header CTAs container */
.header-ctas {
  display: flex;
  gap: 12px;
  align-items: center;
  margin-left: 30px;
}

/* Demo CTA - orange */
.header-demo-cta {
  background: var(--brand-orange);
  color: #fefefe;
  padding: 10px 18px;
  border-radius: 8px;
  font-weight: 700;
  text-decoration: none;
  font-size: 0.95rem;
  white-space: nowrap;
  transition: background 0.3s ease, transform 0.2s ease;
}

.header-demo-cta:hover {
  background: var(--brand-yellow);
  transform: translateY(-1px);
}

/* Sign Up CTA - yellow */
.header-signup-cta {
  background: var(--brand-yellow);
  color: #222;
  padding: 10px 18px;
  border-radius: 8px;
  font-weight: 700;
  text-decoration: none;
  font-size: 0.95rem;
  white-space: nowrap;
  transition: background 0.3s ease, transform 0.2s ease;
}

.header-signup-cta:hover {
  background: var(--brand-deep);
  transform: translateY(-1px);
}

/* Mobile - hide header CTAs, show in hamburger menu */
@media (max-width: 768px) {
  .header-ctas {
    display: none;
  }
}

/* 2.2 Hero Sections (Home + Shared Template) */
.hero {
  position: relative;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  color: #fefefe;
  margin: 0;
}

/* Homepage hero with background image (ONLY on index) */
.hero.home-hero {
  height: 100vh;
  background: url('../images/websitemain.webp') no-repeat center center;
  background-size: cover;
  background-attachment: scroll;
  background-position: center center;
}

.hero.home-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.45);
  z-index: 0;
}

.hero-content {
  position: relative;
  z-index: 1;
  max-width: 800px;
  padding: 0 20px;
}

.hero.home-hero h1 {
  font-size: clamp(2.5rem, 5vw, 3.8rem);
  margin-bottom: 20px;
  font-weight: 800;
  color: #fefefe;
  text-shadow: 0 3px 6px rgba(0,0,0,0.4);
}

.hero.home-hero p {
  font-size: 1.25rem;
  margin-bottom: 30px;
  line-height: 1.6;
  color: #f1f1f1;
  text-shadow: 0 2px 4px rgba(0,0,0,0.3);
}

.hero.home-hero .cta {
  background: var(--brand-orange);
  color: #fefefe;
  padding: 16px 36px;
  border-radius: 8px;
  font-weight: 700;
  font-size: 1.1rem;
  text-decoration: none;
  transition: background 0.3s;
}

.hero.home-hero .cta:hover {
  background: var(--brand-deep);
}

/* Shared page hero (applies to all non-index pages) */
.hero.page-hero {
  background: var(--bg-soft);
  padding: 20px 20px 20px; /* compact grey band */
}

.hero.page-hero h1 {
  font-size: 2.8rem;
  font-weight: 800;
  color: var(--brand-orange);
  margin-bottom: 10px;
}

.hero.page-hero p {
  font-size: 1.2rem;
  color: #e2e8f0;
  margin: 0;
  line-height: 1.4;
  max-width: 700px;
  margin-left: auto;
  margin-right: auto;
}

/* Hero meta styling (for article headers) */
.hero.page-hero .article-meta-right,
.hero.page-hero .article-meta-right strong {
  color: #333;
}


/* =========================================================
   3. SHARED COMPONENTS
========================================================= */

/* Generic Section Styling */
section:not(.hero):not(.contact) {
  padding: 20px 20px;
  max-width: 1100px;
  margin: 0 auto;
  background: var(--bg-light);
}

h2.section-title {
  text-align: center;
  font-size: 2.2rem;
  font-weight: 800;
  margin-bottom: 50px;
  color: var(--brand-orange);
}

/* =========================================================
   4.1 PAGE SECTIONS – HOMEPAGE
========================================================= */

/* 4.1 Homepage – Features */
.features-layout {
  display: grid;
  grid-template-columns: 1.3fr 0.7fr;
  align-items: center;
  gap: 60px;
  max-width: 1100px;
  margin: 0 auto;
  padding: 60px 40px;
}

.features {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 25px;
}

.feature {
  background: var(--bg-soft);
  border-radius: 12px;
  padding: 25px 20px;
  box-shadow: 0 4px 15px rgba(0,0,0,0.05);
  text-align: center;
}

.feature h3 {
  color: var(--brand-orange);
  font-size: 1.1rem;
  margin-bottom: 8px;
}

.feature p {
  font-size: 0.95rem;
  color: #ffffff;
  line-height: 1.5;
}

/* App preview on the side */
.app-preview-side {
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.app-preview-side img {
  max-width: 180px;
  border-radius: 20px;
  box-shadow: 0 8px 20px rgba(0,0,0,0.15);
  margin-bottom: 10px;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.app-preview-side img:hover {
  transform: translateY(-5px);
  box-shadow: 0 12px 25px rgba(0,0,0,0.25);
}

.app-preview-side .caption {
  font-size: 0.9rem;
  color: #fefefe;
  line-height: 1.4;
  max-width: 260px;
  margin: 10px auto 0;
  opacity: 0.85;
  text-align: center;
  display: block;
}

/* 4.2 Homepage – How It Works */
.how-it-works {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 40px;
  text-align: center;
}

.step {
  background: var(--bg-soft);
  border-radius: 12px;
  padding: 40px 25px;
  border: 2px solid #FEEAD3;
}

.step-number {
  background: var(--brand-orange);
  color: #fefefe;
  width: 45px;
  height: 45px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 1.2rem;
  margin: 0 auto 15px;
}

.step h3 {
  color: var(--brand-orange);
  font-size: 1.2rem;
  font-weight: 700;
  margin-bottom: 10px;
}

.step p {
  color: #fefefe;
  line-height: 1.6;
  font-size: 1.05rem;
}

/* 4.3 Homepage – About */
#about p {
  color: #333;
  font-size: 1.05rem;
  line-height: 1.6;
  max-width: 800px;
  margin: 0 auto 15px;
}

/* =========================================================
   4.2 PAGE SECTIONS – PRICING
========================================================= */

.pricing-section {
  max-width: 1100px;
  margin: 0 auto;
  padding: 80px 20px;
  text-align: center;
}

.pricing-section h2 {
  color: var(--brand-orange);
  font-size: 2rem;
  margin-bottom: 20px;
  font-weight: 800;
}

.pricing-intro {
  font-size: 1.15rem;
  max-width: 800px;
  margin: 0 auto 60px;
  color: #333;
}

.pricing-table, .plans {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 30px;
}

.plan {
  background: var(--bg-soft);
  border-radius: 12px;
  padding: 40px;
  width: 280px;
  text-align: center;
}

.plan h3 {
  color: var(--brand-orange);
  margin-bottom: 10px;
}

.plan p.price {
  font-size: 2rem;
  font-weight: 800;
  margin: 10px 0;
  color: var(--brand-deep);
}

.plan small {
  display: block;
  color: #fefefe;
  margin-bottom: 15px;
}

.plan ul {
  list-style: none;
  padding: 0;
  text-align: left;
  margin-bottom: 25px;
  color: #fefefe;
}

.plan ul li {
  margin-bottom: 10px;
}

.plan a {
  background: var(--brand-orange);
  color: #fefefe;
  padding: 12px 25px;
  border-radius: 8px;
  font-weight: 700;
  text-decoration: none;
  transition: 0.3s ease;
}

.plan a:hover {
  background: var(--brand-deep);
}

.guarantee {
  margin-top: 80px;
  background: var(--bg-soft);
  border-radius: 10px;
  padding: 40px;
  text-align: left;
  box-shadow: 0 6px 20px rgba(0,0,0,0.05);
  margin-bottom: 50px;
}

.guarantee h3 {
  color: var(--brand-orange);
  font-size: 1.6rem;
  margin-bottom: 15px;
}

.guarantee p {
  color: #fefefe;
  margin-bottom: 10px;
  font-size: 1.05rem;
}

/* =========================================================
   4.3 PAGE SECTIONS – HOW IT WORKS PAGE
========================================================= */

.how-phase {
  margin: 80px 0;
}

.phase-header {
  text-align: center;
  margin-bottom: 50px;
}

.phase-number {
  display: inline-block;
  background: var(--brand-orange);
  color: #fefefe;
  padding: 8px 20px;
  border-radius: 20px;
  font-weight: 700;
  font-size: 0.9rem;
  text-transform: uppercase;
  letter-spacing: 1px;
  margin-bottom: 15px;
}

.phase-header h2 {
  font-size: 2.2rem;
  color: var(--brand-orange);
  margin: 15px 0 10px;
  font-weight: 800;
}

.phase-duration {
  color: #666;
  font-size: 1.1rem;
  font-style: italic;
}

.how-steps {
  display: flex;
  flex-direction: column;
  gap: 30px;
  max-width: 800px;
  margin: 0 auto;
}

.how-step {
  display: flex;
  gap: 25px;
  align-items: flex-start;
  background: var(--bg-soft);
  padding: 30px;
  border-radius: 12px;
  box-shadow: 0 4px 15px rgba(0,0,0,0.05);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.how-step p {
  color: #ffffff !important;
}

.how-step:hover {
  transform: translateX(5px);
  box-shadow: 0 6px 20px rgba(0,0,0,0.1);
}

.how-faq p {
  color: #fefefe !important;
}

.step-icon {
  background: var(--brand-orange);
  color: #fefefe;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 1.3rem;
  flex-shrink: 0;
}

.step-content h3 {
  color: var(--brand-orange);
  font-size: 1.3rem;
  margin: 0 0 10px 0;
  font-weight: 700;
}

.step-content p {
  color: #fefefe;
  line-height: 1.7;
  margin: 0;
  font-size: 1.05rem;
}

.fee-list {
  list-style: none;
  padding: 0;
  margin: 15px 0;
}

.fee-list li {
  padding: 8px 0;
  color: #fefefe;
  font-size: 1.05rem;
}

.fee-note {
  font-size: 0.95rem;
  color: #666;
  font-style: italic;
  margin-top: 10px;
}

.how-faq {
  margin: 80px 0 60px;
}

.how-faq h2 {
  font-size: 2rem;
  color: var(--brand-orange);
  text-align: center;
  margin-bottom: 40px;
  font-weight: 800;
}

.faq-item {
  background: var(--bg-soft);
  border-radius: 10px;
  padding: 25px 30px;
  margin-bottom: 20px;
  box-shadow: 0 4px 15px rgba(0,0,0,0.05);
}

.faq-item h3 {
  color: var(--brand-orange);
  font-size: 1.2rem;
  margin: 0 0 12px 0;
  font-weight: 700;
}

.faq-item p {
  color: #ffffff;
  line-height: 1.7;
  margin: 0;
  font-size: 1.05rem;
}

/* =========================================================
   4.4 PAGE SECTIONS – BLOG ARTICLE PAGE
========================================================= */

.blog-article {
  max-width: 1100px;
  margin: 0 auto;
  padding: 0px 60px 80px;
}

.article-content {
  font-size: 1.05rem;
  line-height: 1.7;
  color: #333;
}

.article-content h2 {
  font-size: 1.8rem;
  color: var(--brand-orange);
  margin: 40px 0 20px 0;
  font-weight: 700;
  line-height: 1.3;
  border-bottom: 2px solid var(--bg-soft);
  padding-bottom: 8px;
}

.article-content h3 {
  font-size: 1.3rem;
  color: var(--text-dark);
  margin: 30px 0 15px 0;
  font-weight: 600;
}

.article-content p {
  margin-bottom: 15px;
  color: #333;
}

.article-content ul, .article-content ol {
  margin: 20px 0 20px 30px;
  line-height: 1.8;
}

.article-content li {
  margin-bottom: 12px;
}

.article-content strong {
  color: var(--text-dark);
  font-weight: 600;
}

/* Inline images in articles */
.article-content .article-image-inline {
  max-width: 300px;
  margin: 30px auto;
  text-align: center;
  display: block;
}

.article-content .article-image-inline img {
  width: 100%;
  display: block;
  margin: 0 auto;
  border-radius: 12px;
  box-shadow: 0 6px 18px rgba(0,0,0,0.1);
}

.article-content .article-image-inline figcaption {
  font-size: 0.85rem;
  font-style: italic;
  color: #666;
  margin-top: 10px;
  text-align: center;
  line-height: 1.4;
}

/* Article grid layout - image and text side by side */
.article-grid {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: flex-start;
  gap: 40px;
  margin: 40px 0;
}

.article-text {
  line-height: 1.6;
  color: #fefefe;
}

.article-text p {
  margin-bottom: 15px;
  font-size: 1.05rem;
}

.article-image {
  display: flex;
  flex-direction: column;
  gap: 20px;
  align-items: flex-start;
}

.article-image figure {
  margin: 0;
  text-align: left;
}

.article-image img {
  max-width: 260px;
  border-radius: 12px;
  box-shadow: 0 6px 18px rgba(0,0,0,0.1);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.article-image img:hover {
  transform: translateY(-3px);
  box-shadow: 0 10px 25px rgba(0,0,0,0.15);
}

.article-image figcaption {
  display: block;
  white-space: normal;
  word-break: break-word;
  line-height: 1.4;
  font-size: 0.85rem;
  font-style: italic;
  color: #666;
  opacity: 0.8;
  margin-top: 8px;
  max-width: 240px;
}

.article-callout {
  background: var(--bg-soft);
  border-radius: 8px;
  padding: 25px 30px;
  margin: 35px 0;
  box-shadow: 0 4px 15px rgba(0,0,0,0.05);
}

.article-callout h3 {
  color: var(--brand-orange);
  font-size: 1.3rem;
  margin: 0 0 12px 0;
  font-weight: 700;
}

.article-callout p {
  margin: 0;
  color: #fefefe;
}

.article-footer {
  margin-top: 60px;
  padding-top: 40px;
  border-top: 2px solid var(--bg-soft);
}

.author-bio {
  display: flex;
  gap: 25px;
  align-items: flex-start;
  background: var(--bg-soft);
  padding: 30px;
  border-radius: 12px;
}

.author-bio-image {
  flex-shrink: 0;
}

.author-bio-image img {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  object-fit: cover;
  box-shadow: 0 4px 10px rgba(0,0,0,0.1);
}

.author-bio-text h3 {
  color: var(--brand-orange);
  font-size: 1.2rem;
  margin: 0 0 10px 0;
}

.author-bio-text p {
  color: #fefefe;
  line-height: 1.6;
  margin: 0;
}

.related-articles {
  margin-top: 80px;
}

.related-articles h2 {
  font-size: 2rem;
  color: var(--brand-orange);
  text-align: center;
  margin-bottom: 40px;
  font-weight: 800;
}

.related-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 25px;
  margin-bottom: 60px;
}

.related-card {
  background: var(--bg-light);
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 4px 15px rgba(0,0,0,0.08);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.related-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 6px 20px rgba(0,0,0,0.12);
}

.related-card a {
  text-decoration: none;
}

.related-card img {
  width: 100%;
  height: 150px;
  object-fit: cover;
}

.related-card h3 {
  padding: 20px;
  font-size: 1.1rem;
  color: var(--text-dark);
  margin: 0;
  line-height: 1.4;
}

.related-card a:hover h3 {
  color: var(--brand-orange);
}

.article-newsletter {
  background: var(--brand-orange);
  color: #fefefe;
  text-align: center;
  padding: 50px 30px;
  border-radius: 12px;
  margin-top: 60px;
  box-shadow: 0 8px 25px rgba(222,84,30,0.25);
}

.article-newsletter h3 {
  font-size: 1.8rem;
  margin: 0 0 10px 0;
  color: #fefefe;
}

.article-newsletter p {
  color: #fefefe;
  opacity: 0.9;
  margin-bottom: 25px;
  font-size: 1.05rem;
}

/* Mobile responsive for articles */
@media (max-width: 768px) {
  .blog-article {
    padding: 40px 20px 60px;
  }

  .article-content {
    font-size: 1.05rem;
  }

  .article-content h2 {
    font-size: 1.4rem;
  }

  .article-content h3 {
    font-size: 1.2rem;
  }

  .article-content .article-image-inline {
    max-width: 100%;
  }

  .article-grid {
    grid-template-columns: 1fr;
    gap: 20px;
  }

  .article-image {
    align-items: center;
  }

  .article-image img {
    max-width: 320px;
  }

  .article-image figcaption {
    text-align: center;
    max-width: 320px;
  }

  .author-bio {
    flex-direction: column;
    align-items: center;
    text-align: center;
  }

  .related-grid {
    grid-template-columns: 1fr;
  }
}

/* =========================================================
   4.4 PAGE SECTIONS – BLOG PAGE
========================================================= */

.blog-content {
  max-width: 1200px;
  margin: 0 auto;
  padding: 60px 60px 80px;
}

.blog-intro {
  text-align: center;
  max-width: 700px;
  margin: 0 auto 60px;
  font-size: 1.1rem;
  color: #333;
  line-height: 1.7;
}

.blog-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(350px, 100%), 1fr));
  gap: 40px;
  margin-bottom: 80px;
}

.blog-card {
  background: var(--bg-light);
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 4px 15px rgba(0,0,0,0.08);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  display: flex;
  flex-direction: column;
}

.blog-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 8px 25px rgba(0,0,0,0.12);
}

.blog-card-image {
  width: 100%;
  height: 220px;
  overflow: hidden;
  background: var(--bg-soft);
}

.blog-card-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 20%;
  transition: transform 0.3s ease;
}

.blog-card:hover .blog-card-image img {
  transform: scale(1.05);
}

.blog-card-content {
  padding: 25px;
  display: flex;
  flex-direction: column;
  flex-grow: 1;
}

.blog-meta {
  display: flex;
  gap: 15px;
  margin-bottom: 15px;
  font-size: 0.85rem;
  color: #777;
}

.blog-date {
  color: #777;
}

.blog-category {
  color: var(--brand-orange);
  font-weight: 600;
}

.blog-card h2 {
  font-size: 1.4rem;
  margin: 0 0 15px 0;
  line-height: 1.4;
}

.blog-card h2 a {
  color: var(--text-dark);
  text-decoration: none;
  transition: color 0.3s ease;
}

.blog-card h2 a:hover {
  color: var(--brand-orange);
}

.blog-excerpt {
  color: #333;
  line-height: 1.6;
  margin: 0 0 20px 0;
  flex-grow: 1;
}

.read-more {
  color: var(--brand-orange);
  font-weight: 600;
  text-decoration: none;
  transition: color 0.3s ease;
  display: inline-block;
}

.read-more:hover {
  color: var(--brand-deep);
  text-decoration: underline;
}

.blog-newsletter {
  background: var(--brand-orange);
  color: #fefefe;
  text-align: center;
  padding: 50px 30px;
  border-radius: 12px;
  max-width: 700px;
  margin: 0 auto;
  box-shadow: 0 8px 25px rgba(222,84,30,0.25);
}

.blog-newsletter h3 {
  font-size: 1.8rem;
  margin: 0 0 10px 0;
  color: #fefefe;
}

.blog-newsletter p {
  color: #fefefe;
  opacity: 0.9;
  margin-bottom: 25px;
  font-size: 1.05rem;
}

/* Newsletter form structure */
.newsletter-form {
  display: flex;
  flex-direction: column;
  gap: 0;
  max-width: 500px;
  margin: 0 auto;
}

.newsletter-input-row {
  display: flex;
  gap: 10px;
  margin-bottom: 15px;
}

.newsletter-input-row input {
  flex: 1;
  padding: 14px 18px;
  border-radius: 8px;
  border: none;
  font-size: 1rem;
  font-family: inherit;
}

.newsletter-input-row button {
  padding: 14px 28px;
  white-space: nowrap;
}

/* Newsletter consent checkbox styling */
.blog-newsletter .consent-group {
  margin: 20px 0;
  text-align: left;
}

.blog-newsletter .consent-checkbox {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  cursor: pointer;
  font-size: 0.9rem;
  line-height: 1.5;
}

.blog-newsletter .consent-checkbox input[type="checkbox"] {
  margin-top: 4px;
  flex-shrink: 0;
  cursor: pointer;
}

.blog-newsletter .consent-checkbox span {
  flex: 1;
  color: #fefefe;
}

.blog-newsletter .consent-checkbox a {
  color: #fefefe;
  text-decoration: underline;
  font-weight: 600;
}

.blog-newsletter .consent-checkbox a:hover {
  color: var(--brand-yellow);
}

/* =========================================================
   4.5 PAGE SECTIONS – FEATURES PAGE
========================================================= */

.features-intro {
  text-align: center;
  max-width: 700px;
  margin: 0 auto 60px;
  font-size: 1.1rem;
  color: #333;
  line-height: 1.7;
}

.content .features-intro p {
  color: #333;
}

.feature-section {
  margin: 80px 0;
}

.feature-section h2 {
  font-size: 2rem;
  color: var(--brand-orange);
  text-align: center;
  margin-bottom: 15px;
  font-weight: 800;
}

.section-subtitle {
  text-align: center;
  font-size: 1.1rem;
  color: #fefefe;
  margin-bottom: 40px;
  max-width: 700px;
  margin-left: auto;
  margin-right: auto;
}

.feature-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 30px;
  margin: 40px 0;
}

.feature-item {
  background: var(--bg-soft);
  border-radius: 12px;
  padding: 30px 25px;
  box-shadow: 0 4px 15px rgba(0,0,0,0.05);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.feature-item-large {
  background: var(--bg-soft);
  border-radius: 12px;
  padding: 35px 30px;
  box-shadow: 0 4px 15px rgba(0,0,0,0.05);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.feature-item:hover, .feature-item-large:hover {
  transform: translateY(-3px);
  box-shadow: 0 6px 20px rgba(0,0,0,0.1);
}

.feature-item h3, .feature-item-large h3 {
  color: var(--brand-orange);
  font-size: 1.2rem;
  margin-bottom: 12px;
  font-weight: 700;
}

.feature-item-large h3 {
  font-size: 1.3rem;
}

.feature-item p, .feature-item-large p {
  color: #fefefe !important;
  line-height: 1.6;
  margin: 0;
  font-size: 1.05rem;
}

/* Add spacing between large feature items in the support section */
.feature-grid-support {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 30px;
  margin: 40px 0;
}

/* Center the CTA button inside highlight boxes */
.highlight-box {
  text-align: center; /* centers inline and inline-block elements like your button */
}

/* Center contents inside highlight box */
.highlight-box {
  text-align: center;
}

/* Button spacing only */
.highlight-box .cta-button {
  display: inline-block;
  margin-top: 20px;
}

/* =========================================================
   4.6 PAGE SECTIONS – ABOUT PAGE
========================================================= */

.content {
  max-width: 900px;
  margin: 0 auto;
  padding: 60px 60px 80px;
}

.content h2 {
  font-size: 1.8rem;
  color: var(--brand-orange);
  border-bottom: 2px solid var(--bg-soft);
  padding-bottom: 8px;
  margin-bottom: 20px;
}

.content p {
  margin-bottom: 15px;
  font-size: 1.05rem;
  color: #333;
}

/* About grid layouts */
.about-grid {
  display: grid;
  grid-template-columns: 1.7fr 0.9fr;
  align-items: center;
  gap: 60px;
  margin: 60px 0;
}

.about-text {
  line-height: 1.6;
  color: #333;
}

/* Ensure highlight box text remains readable */
.highlight-box, .highlight-box p, .highlight-box h3, .highlight-box em, .highlight-box strong {
  color: #fefefe;
}

/* Image and caption styling */
.about-image {
  display: flex;
  flex-direction: column;
  gap: 20px;
  align-items: flex-start;
}

.about-image {
  justify-self: end; /* pushes image column to align right edge */
}

.about-image figure {
  margin: 0;
  text-align: left;
}

.about-image img {
  max-width: 260px;
  border-radius: 12px;
  box-shadow: 0 6px 18px rgba(0,0,0,0.1);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.about-image img:hover {
  transform: translateY(-3px);
  box-shadow: 0 10px 25px rgba(0,0,0,0.15);
}

.about-image figcaption {
  display: block;
  white-space: normal;
  word-break: break-word;
  line-height: 1.4;
  font-size: 0.85rem;
  font-style: italic;
  color: #666;
  opacity: 0.8;
  margin-top: 8px;
  max-width: 240px;
}

/* Reversed layout (image on left, text on right) */
.about-grid-alt {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  gap: 60px;
  margin: 30px 0 60px;
}

.about-grid-alt .about-image {
  order: -1;
  align-items: flex-start;
}

.about-grid-alt .about-image figcaption {
  text-align: left;
  max-width: 260px;
}

/* Mission highlight box */
.highlight-box {
  background: var(--bg-soft);
  border-radius: 10px;
  padding: 25px 30px;
  margin: 40px 0;
  box-shadow: 0 6px 20px rgba(0,0,0,0.05);
  color: #fefefe;
}

/* CTA box */
.cta-box {
  background: var(--brand-orange);
  color: #fefefe;
  text-align: center;
  padding: 50px 30px;
  border-radius: 12px;
  margin: 0 auto;
  max-width: 800px;
  box-shadow: 0 8px 25px rgba(222,84,30,0.25);
}

.cta-box h2, .cta-box h3 {
  font-size: 1.8rem;
  margin-bottom: 10px;
  color: #fefefe;
}

.cta-box p {
  color: #fefefe;
  opacity: 0.9;
  margin-bottom: 25px;
}

.cta-button {
  background: #fefefe;
  color: var(--brand-orange);
  padding: 16px 32px;
  border-radius: 8px;
  text-decoration: none;
  font-weight: 700;
  transition: 0.3s ease;
  display: inline-block;
}

.cta-button:hover {
  background: var(--brand-yellow);
  color: var(--text-dark);
}

/* =========================================================
   4.7 PAGE SECTIONS – CONTACT PAGE
========================================================= */

.contact {
  text-align: center;
  background: var(--brand-orange);
  color: #fefefe;
  padding: 80px 40px;
  border-radius: 20px;
  margin-bottom: 60px;
}

.contact a, .contact .contact-btn {
  color: #fefefe;
  font-weight: 700;
  text-decoration: none;
  font-size: 1.2rem;
  border: 2px solid #fefefe;
  padding: 14px 30px;
  border-radius: 8px;
  display: inline-block;
  margin-top: 20px;
  transition: all 0.3s ease;
}

.contact a:hover, .contact .contact-btn:hover {
  background: #fefefe;
  color: var(--brand-orange);
}

.contact .contact-btn {
  background: #fefefe;
  color: var(--brand-orange);
  font-weight: 700;
  text-decoration: none;
  font-size: 1.1rem;
  padding: 16px 36px;
  border-radius: 8px;
  display: inline-block;
  transition: all 0.3s ease;
  box-shadow: 0 6px 20px rgba(0,0,0,0.1);
}

.contact .contact-btn:hover {
  background: var(--brand-yellow);
  color: var(#fefefe);
  transform: translateY(-2px);
  box-shadow: 0 10px 30px rgba(222,84,30,0.3);
}

/* Contact page specific */
.contact-content {
  max-width: 900px;
  margin: 0 auto;
  padding: 60px 60px 80px;
}

.contact-intro {
  text-align: center;
  margin-bottom: 40px;
}

.contact-intro h2 {
  color: var(--brand-orange);
  font-size: 1.8rem;
  font-weight: 700;
  margin-bottom: 15px;
}

.contact-intro p {
  color: #333;
  font-size: 1.05rem;
  max-width: 700px;
  margin: 0 auto;
}

/* Make contact method text white */
.contact-method p {
  color: #ffffff !important;
}

.contact-methods {
  display: flex;
  flex-direction: column;
  gap: 20px;
  margin: 40px 0;
}

.contact-method {
  text-align: center;
  padding: 20px 0;
  background: var(--bg-soft);
  border-radius: 10px;
  box-shadow: 0 6px 20px rgba(0,0,0,0.05);
}

.contact-method h3 {
  color: var(--brand-orange);
  font-size: 1.3rem;
  font-weight: 700;
  margin-bottom: 10px;
}

.contact-method a {
  color: #fefefe;
  text-decoration: none;
  font-weight: 600;
  font-size: 1.1rem;
}

.contact-method a:hover {
  color: var(--brand-orange);
  text-decoration: underline;
}

.contact-form {
  background: var(--bg-soft);
  padding: 40px;
  border-radius: 12px;
  margin-top: 40px;
  box-shadow: 0 6px 20px rgba(0,0,0,0.05);
}

.contact-form h3 {
  color: var(--brand-orange);
  font-size: 1.5rem;
  font-weight: 700;
  margin-bottom: 25px;
  text-align: center;
}

.form-group {
  margin-bottom: 20px;
}

.form-group label {
  display: block;
  color: #fefefe;
  font-weight: 600;
  margin-bottom: 8px;
}

.form-group input, .form-group textarea {
  width: 100%;
  padding: 14px 18px;
  font-size: 16px;
  border: 2px solid #e1e5e9;
  border-radius: 10px;
  transition: all 0.3s ease;
  outline: none;
  background: #fefefe;
  font-family: inherit;
}

.form-group textarea {
  min-height: 150px;
  resize: vertical;
}

.form-group input:focus, .form-group textarea:focus {
  border-color: var(--brand-orange);
  box-shadow: 0 0 0 3px rgba(222,84,30,0.1);
}

.submit-button {
  background: var(--brand-orange);
  color: #fefefe;
  padding: 16px 32px;
  font-size: 1rem;
  font-weight: 700;
  border: none;
  border-radius: 10px;
  cursor: pointer;
  transition: all 0.3s ease;
  width: 100%;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  box-shadow: 0 6px 20px rgba(222,84,30,0.3);
}

.submit-button:hover {
  background: var(--brand-deep);
  transform: translateY(-2px);
  box-shadow: 0 12px 35px rgba(222,84,30,0.4);
}

.contact-box {
  background: var(--bg-soft);
  border-radius: 10px;
  padding: 25px 30px;
  margin: 30px 0;
  box-shadow: 0 6px 20px rgba(0,0,0,0.05);
}

.contact-box h3 {
  color: var(--brand-orange);
  margin-top: 0;
}

/* =========================================================
   4.8 PAGE SECTIONS – PRIVACY POLICY PAGE
========================================================= */

.privacy-content {
  max-width: 900px;
  margin: 0 auto;
  padding: 60px 60px 80px;
}

.privacy-content h2 {
  font-size: 1.6rem;
  color: var(--brand-orange);
  border-bottom: 2px solid var(--bg-soft);
  padding-bottom: 8px;
  margin: 40px 0 20px;
}

.privacy-content h3 {
  font-size: 1.2rem;
  color: var(--text-dark);
  font-weight: 600;
  margin: 30px 0 15px;
}

.privacy-content p {
  margin-bottom: 15px;
  font-size: 1.05rem;
  color: #333;
}

.privacy-content ul {
  margin: 15px 0 15px 30px;
}

.privacy-content li {
  margin-bottom: 8px;
  color: #333;
}

.last-updated {
  background: #f8f9fa;
  border-radius: 10px;
  padding: 20px;
  text-align: center;
  font-size: 0.9rem;
  color: #666;
  margin-top: 40px;
}

/* Privacy Policy contact box */
.contact-box-privacy {
  background: var(--bg-soft);
  color: #fefefe;
  border-radius: 10px;
  padding: 30px;
  margin: 40px 0;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.05);
}

.contact-box-privacy h3 {
  color: var(--brand-orange);
  margin-top: 0;
  font-size: 1.3rem;
  font-weight: 700;
  margin-bottom: 15px;
}

.contact-box-privacy p, .contact-box-privacy strong, .contact-box-privacy a {
  color: #fefefe;
}

.contact-box-privacy a.contact-email {
  color: var(--brand-yellow);
  text-decoration: none;
  font-weight: 600;
}

.contact-box-privacy a.contact-email:hover {
  text-decoration: underline;
}

/* =========================================================
   4.9 PAGE SECTIONS – TERMS COOKIES
========================================================= */

/* Legal (Terms & Conditions) contact box */
.contact-box-legal {
  background: var(--bg-soft);
  color: #fefefe; /* default text color inside */
  border-radius: 10px;
  padding: 30px;
  margin: 40px 0;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.05);
  text-align: left;
}

.contact-box-legal h3 {
  color: var(--brand-orange);
  font-size: 1.3rem;
  font-weight: 700;
  margin-top: 0;
  margin-bottom: 15px;
}

.contact-box-legal p {
  color: #fefefe; /* ensures paragraph text is white */
  font-size: 1.05rem;
  line-height: 1.6;
  margin-bottom: 10px;
}

.contact-box-legal a.contact-email {
  color: var(--brand-yellow); /* bright highlight for email link */
  text-decoration: none;
  font-weight: 600;
}

.contact-box-legal a.contact-email:hover {
  text-decoration: underline;
}

/* =========================================================
   4.10 PAGE SECTIONS – COMING SOON PAGE
========================================================= */

.notify-box {
  max-width: 500px;
  margin: 40px auto;
  background: #fefefe;
  border-radius: 12px;
  box-shadow: 0 6px 20px rgba(0,0,0,0.05);
  padding: 30px 20px;
}

.notify-box h3 {
  color: var(--brand-orange);
  font-size: 1.5rem;
  margin-bottom: 15px;
}

.notify-box .consent-checkbox span {
  color: #333 !important;
}

.email-form {
  display: flex;
  flex-direction: column;
  gap: 15px;
}

.input-group input {
  width: 100%;
  padding: 14px;
  border-radius: 8px;
  border: 2px solid #e1e5e9;
  font-size: 1rem;
}

.consent-group {
  text-align: left;
  font-size: 0.9rem;
}

.consent-checkbox {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  color: #fefefe;
}

.consent-checkbox input {
  margin-top: 3px;
}

.consent-checkbox a {
  color: var(--brand-orange);
  text-decoration: none;
  font-weight: 600;
}

.consent-checkbox a:hover {
  text-decoration: underline;
}

.success-message {
  margin-top: 15px;
  color: var(--brand-deep);
  font-weight: 600;
  text-align: center;
  display: none;
}

/* =========================================================
   4.11 QR CODE DEMO PAGE
========================================================= */

.qr-code-page .qr-code {
  padding: 30px 20px 50px;
  margin-top: -20px; /* reduces large gap below the page hero */
  text-align: center;
}

.qr-code-page .qr-code h2 {
  font-size: 1.8rem;
  margin-bottom: 10px;
  font-weight: 800;
  color: var(--brand-orange);
}

.qr-code-page .qr-code p {
  font-size: 1.05rem;
  color: #555;
  max-width: 700px;
  margin: 0 auto 25px;
  line-height: 1.6;
}

.qr-code-page .qr-code img {
  border: 8px solid #ddd;
  border-radius: 12px;
}

.qr-code-page .qr-code .qr-wrapper {
  margin: 30px auto;
  max-width: 300px;
}

/* =========================================================
   4.12 DEMO APPS PAGE
========================================================= */

.demo-apps-page .app-store-badges {
  display: flex;
  gap: 24px;
  justify-content: center;
  align-items: flex-start; /* key fix */
  margin: 30px 0 10px;
  flex-wrap: wrap;
}

.demo-apps-page .store-badge {
  height: 60px;
  width: auto;
}

.demo-apps-page .store-badge-disabled {
  opacity: 0.5;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.demo-apps-page .coming-soon-label {
  display: block;
  margin-top: 6px;
  font-size: 0.9rem;
  color: #777;
}

/* Tighten spacing below hero on demo apps page */
.demo-apps-page .hero.page-hero {
  padding-bottom: 20px;
}

/* Reduce top padding of content */
.demo-apps-page .content {
  padding-top: 30px;
}

/* Reduce spacing under intro text */
.demo-apps-page .features-intro {
  margin-bottom: 30px;
}




/* =========================================================
   4.13 ENTERPRISE PAGES
========================================================= */

/* Shared Enterprise layout column */
/* .enterprise-container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 24px;
}  */

.enterprise-container {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  padding-left: clamp(16px, 5vw, 120px);
  padding-right: clamp(16px, 5vw, 120px);
}

/* Enterprise tab navigation */
.enterprise-tabs {
  display: flex;
  justify-content: flex-start;
  align-items: flex-end;
  gap: 0;

  border-bottom: 2px solid #e5e7eb;
  margin-bottom: 32px;

  /* TYPOGRAPHY NORMALISATION */
  font-family: inherit;
  font-size: 15px;
  line-height: 1.2;
}

/* Individual tab links */
.enterprise-tabs a {
  padding: 14px 22px;

  font-family: inherit;
  font-weight: 600;
  letter-spacing: 0;

  color: #475569;
  text-decoration: none;

  border-bottom: 3px solid transparent;
}

/* Hover state */
.enterprise-tabs a:hover {
  color: var(--brand-orange);
}

/* Active tab */
.enterprise-tabs a.active {
  color: var(--brand-orange);
  border-bottom-color: var(--brand-orange);
}


/* =========================================================
   4.14 ENTERPRISE PAGES
========================================================= */
.checkbox-row {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin: 12px 0;
}

.checkbox-row input[type="checkbox"] {
  margin-top: 3px; /* aligns box with first text line */
  flex-shrink: 0;
}

.checkbox-row label {
  font-size: 14px;
  line-height: 1.4;
  cursor: pointer;
}


/* =========================================================
   5. FOOTER
========================================================= */

footer {
  background: #222;
  color: #fefefe;
  text-align: center;
  padding: 40px 20px;
  font-size: 0.9rem;
  margin-top: 60px;
}

footer a {
  color: var(--brand-yellow);
  text-decoration: none;
  font-weight: 600;
}

footer a:hover {
  text-decoration: underline;
}

/* Footer social icons (gentle white style) */
.footer-social {
  margin-top: 25px;
  display: flex;
  justify-content: center;
  gap: 22px;
  opacity: 0.55; /* make the whole row subtly visible */
  transition: opacity 0.3s ease;
}

.footer-social:hover {
  opacity: 0.75; /* slight reveal on hover only */
}

.footer-social img {
  width: 24px;
  height: 24px;
  filter: brightness(0) invert(1); /* converts black SVG lines into soft white */
  opacity: 0.65; /* individual icon softening */
  transition: opacity 0.25s ease, transform 0.2s ease;
}

.footer-social img:hover {
  opacity: 1; /* fully white on hover */
  transform: translateY(-2px); /* tiny movement */
}

/* =========================================================
   6. RESPONSIVE DESIGN
========================================================= */

@media (max-width: 900px) {
  /* Features layout */
  .features-layout {
    grid-template-columns: 1fr;
    text-align: center;
    gap: 40px;
  }

  .features {
    grid-template-columns: 1fr 1fr;
    justify-content: center;
  }

  .app-preview-side img {
    max-width: 150px;
  }

  /* About page grids */
  .about-grid, .about-grid-alt {
    grid-template-columns: 1fr;
    text-align: center;
  }

  .about-grid-alt .about-image {
    order: 0;
  }

  .about-image, .about-grid-alt .about-image {
    align-items: center;
  }

  .about-image img, .about-grid-alt .about-image img {
    max-width: 320px;
  }

  .about-image figcaption, .about-grid-alt .about-image figcaption {
    text-align: center;
    max-width: 320px;
  }
}

@media (max-width: 768px) {
  /* Header */
  header {
    flex-wrap: wrap;
    padding: 15px 20px;
  }

  /* Show hamburger menu on mobile */
  .menu-toggle {
    display: flex;
  }

  /* Mobile navigation */
  nav {
    display: none;
    width: 100%;
    order: 3;
    flex-direction: column;
    background: var(--bg-light);
    padding: 20px 0;
    border-top: 1px solid #eee;
    margin-top: 15px;
  }

  nav.active {
    display: flex;
  }

  nav a {
    margin: 10px 20px;
    padding: 10px;
    border-bottom: 1px solid #f5f5f5;
  }

  nav a:last-child {
    border-bottom: none;
  }

  @media (max-width: 768px) {
    .header-demo-cta {
      padding: 8px 14px;
      font-size: 0.85rem;
      margin-left: auto;
      margin-right: 10px;
    }
  }

  /* Hero sections */
  .hero.home-hero {
    height: 90vh;
  }

  .hero.home-hero h1 {
    font-size: 2rem;
  }

  .hero.home-hero p {
    font-size: 1rem;
  }

  /* Shared page hero adjustments */
  .hero.page-hero {
    padding: 20px;
  }

  .hero.page-hero h1 {
    font-size: 2rem;
  }

  .hero.page-hero p {
    font-size: 1rem;
  }

  /* Content sections */
  .content, .privacy-content, .contact-content, .blog-content {
    padding: 40px 20px 60px;
  }

  /* Blog page */
  .blog-grid {
    grid-template-columns: 1fr;
    gap: 30px;
  }

  .newsletter-form {
    flex-direction: column;
  }

  .newsletter-form button {
    width: 100%;
  }

  .newsletter-input-row {
    flex-direction: column;
  }
  .newsletter-input-row input,
  .newsletter-input-row button {
    width: 100%;
  }

  /* Features page */
  .feature-grid {
    grid-template-columns: 1fr;
  }

  .feature-grid-support {
    grid-template-columns: 1fr;
  }

  /* How It Works page */
  .how-step {
    flex-direction: column;
    gap: 15px;
    padding: 25px 20px;
  }

  .step-icon {
    margin: 0 auto;
  }

  .step-content {
    text-align: center;
  }

  /* CTA box on mobile */
  .cta-box {
    padding: 40px 20px;
  }

  /* Pricing */
  .plan {
    width: 90%;
  }

  /* Contact form */
  .contact-form {
    padding: 30px 20px;
  }

  /* Coming soon */
  .notify-box {
    margin: 30px 15px;
  }
}

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

/* =========================================================
   7. CLEAN ARTICLE HEADER LAYOUT
========================================================= */

/* Override global header flexbox for article headers */
.article-header {
  display: block;
  margin-top: 0px;
  margin-bottom: 20px;
  border-bottom: 1px solid var(--bg-soft);
  padding-bottom: 5px;
  text-align: center;
  width: 100%;
}

/* Title */
.article-header h1 {
  font-size: 2.6rem;
  font-weight: 800;
  color: var(--text-dark);
  margin-bottom: 10px;
  line-height: 1.2;
}

/* Subtitle */
.article-header .article-subtitle {
  font-size: 1.15rem;
  color: #fefefe;
  margin-bottom: 30px;
  line-height: 1.6;
  max-width: 700px;
}

/* Meta info container */
.article-header-meta {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  flex-wrap: wrap;
  gap: 10px;
  width: 100%;
}

/* Left: back to blog link */
.article-meta-left .back-to-blog {
  color: var(--brand-orange);
  font-weight: 600;
  text-decoration: none;
  transition: color 0.3s ease;
}

.article-meta-left .back-to-blog:hover {
  color: var(--brand-deep);
}

/* Right: author and date */
.article-meta-right {
  text-align: right;
  font-size: 0.95rem;
  color: #fcfcfcd9;
  line-height: 1.4;
}

.article-meta-right p {
  color: #fefefe;
}

/* Responsive for mobile */
@media (max-width: 768px) {
  .article-header {
    margin-top: 40px;
    padding: 0 10px 20px;
  }

  .article-header h1 {
    font-size: 1.9rem;
  }

  .article-header .article-subtitle {
    font-size: 1rem;
  }

  .article-header-meta {
    flex-direction: column;
    align-items: flex-start;
    text-align: left;
  }

  .article-meta-right {
    text-align: left;
  }
}



/* =========================================================
   END OF FILE
========================================================= */