@import url('https://fonts.googleapis.com/css2?family=Lora:ital,wght@0,400;0,600;0,700;1,400&family=DM+Sans:wght@300;400;500;600&display=swap');

:root {
--green-deep: #1a3a2a;
--green-mid: #2d6a4f;
--green-light: #52b788;
--green-pale: #d8f3dc;
--green-mist: #f0faf3;
--gold: #c9a84c;
--text-dark: #1c2b22;
--text-body: #3a4a40;
--text-muted: #6b7c72;
--white: #ffffff;
--border: #d4e8da;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

/* ==========================================================================
   1. DESKTOP STYLES (Default)
   ========================================================================== */
body {
  font-family: 'DM Sans', Georgia, serif;
  background: #ffffff;
  color: var(--text-body);
  line-height: 1.75;
  font-size: 16.5px;
}

.hero {
  background-color: #1a3a2a;
  background-image:
    radial-gradient(ellipse at 30% 50%, rgba(82,183,136,0.22) 0%, transparent 60%),
    radial-gradient(ellipse at 80% 20%, rgba(201,168,76,0.15) 0%, transparent 50%);
  padding: 22px 24px 60px;
  text-align: center;
}

.hero h1 {
  font-family: 'Lora', Georgia, serif;
  font-size: 50px;
  font-weight: 700;
  color: #ffffff;
  max-width: 760px;
  margin: 0 auto 20px;
  line-height: 1.25;
}

.hero-sub {
  color: rgba(255,255,255,0.6);
  font-size: 24px;
  max-width: 500px;
  line-height: 1.25;
  margin: 0 auto 36px;
}

.section {
  padding: 64px 24px;
  border-bottom: 1px solid #d4e8da;
}

h2 {
  font-family: 'Lora', Georgia, serif;
  font-size: 32px;
  font-weight: 700;
  color: #1a3a2a;
  margin-bottom: 18px;
  line-height: 1.3;
}

/* ==========================================================================
   2. TABLET STYLES (max-width: 1024px)
   ========================================================================== */
@media (max-width: 1024px) {
  .hero h1 { font-size: 42px; }
  .hero-sub { font-size: 20px; }
  .section { padding: 56px 24px; }
}

/* ==========================================================================
   3. MOBILE STYLES (max-width: 580px)
   ========================================================================== */
@media (max-width: 580px) {
  body { font-size: 15px; }
  .hero { padding: 48px 20px 40px; }
  .hero h1 { font-size: 28px; }
  .hero-sub { font-size: 18px; margin-bottom: 24px; }
  .hero-answer-box { padding: 22px 18px; }
  .hero-answer-box p { font-size: 15px; }
  .section { padding: 40px 20px; }
  h2 { font-size: 24px; }
  .data-table { font-size: 13px; }
  .data-table th, .data-table td { padding: 10px 12px; }
  .stats-inner { gap: 8px; }
  .stat-pill { font-size: 13px; padding: 7px 14px; }
  .expert-card { flex-direction: column; text-align: center; }
}

/* ── SHARED COMPONENTS ── */

.hero-tag {
  display: inline-block;
  background: rgba(82,183,136,0.2);
  color: #52b788;
  border: 1px solid rgba(82,183,136,0.4);
  font-size: 16px;
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
  padding: 6px 18px;
  border-radius: 100px;
  margin-bottom: 24px;
}

.hero h1 em {
  color: #52b788;
  font-style: normal;
}

.hero-answer-box {
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(82,183,136,0.35);
  border-radius: 16px;
  max-width: 620px;
  margin: 0 auto;
  padding: 28px 32px;
  text-align: left;
}

.answer-label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 2.5px;
  text-transform: uppercase;
  color: #52b788;
  margin-bottom: 12px;
}

.hero-answer-box p {
  color: rgba(255,255,255,0.88);
  font-size: 17px;
  line-height: 1.7;
  font-family: 'Lora', Georgia, serif;
  font-style: italic;
}

.hero-answer-box strong {
  color: #ffffff;
  font-style: normal;
}

.stats-bar {
  background: #d8f3dc;
  border-bottom: 1px solid #b7dfc0;
  padding: 22px 24px;
}

.stats-inner {
  max-width: 760px;
  margin: 0 auto;
  display: flex;
  gap: 10px;
  justify-content: center;
  flex-wrap: wrap;
}

.stat-pill {
  background: #ffffff;
  border: 1px solid #b7dfc0;
  border-radius: 100px;
  padding: 8px 20px;
  font-size: 14px;
  font-weight: 500;
  color: #2d6a4f;
  display: flex;
  align-items: center;
  gap: 6px;
}

.stat-pill .num {
  font-weight: 700;
  color: #1a3a2a;
  font-size: 15px;
}

.container {
  max-width: 760px;
  margin: 0 auto;
  padding: 0 24px;
}

.section-alt {
  background: #f0faf3;
}

.section-label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 2.5px;
  text-transform: uppercase;
  color: #52b788;
  margin-bottom: 10px;
}

h3 {
font-family: 'Lora', Georgia, serif;
font-size: 20px;
font-weight: 600;
color: #1a3a2a;
margin: 32px 0 12px;
}

p {
margin-bottom: 16px;
font-size: 16.5px;
color: #3a4a40;
}

p:last-child { margin-bottom: 0; }

/* ── HIGHLIGHT BOX ── */
.highlight-box {
background: #d8f3dc;
border-left: 4px solid #52b788;
border-radius: 0 12px 12px 0;
padding: 20px 24px;
margin: 28px 0;
font-size: 16px;
color: #1a3a2a;
}

/* ── TABLE ── */
.data-table {
width: 100%;
border-collapse: collapse;
margin: 28px 0;
font-size: 15px;
border-radius: 12px;
overflow: hidden;
box-shadow: 0 2px 8px rgba(0,0,0,0.08);
}

.data-table thead {
background: #1a3a2a;
color: #ffffff;
}

.data-table th {
padding: 14px 18px;
text-align: left;
font-weight: 600;
font-size: 13px;
letter-spacing: 0.5px;
}

.data-table tbody tr:nth-child(even) { background: #f0faf3; }
.data-table tbody tr:nth-child(odd) { background: #ffffff; }

.data-table td {
padding: 13px 18px;
border-bottom: 1px solid #d4e8da;
color: #3a4a40;
vertical-align: top;
}

.data-table td:first-child {
font-weight: 600;
color: #1a3a2a;
}

/* ── STEPS ── */
.steps-list { list-style: none; margin: 24px 0; }

.steps-list li {
display: flex;
gap: 18px;
align-items: flex-start;
margin-bottom: 20px;
padding-bottom: 20px;
border-bottom: 1px solid #d4e8da;
}

.steps-list li:last-child {
border-bottom: none;
margin-bottom: 0;
padding-bottom: 0;
}

.step-num {
min-width: 38px;
height: 38px;
background: #2d6a4f;
color: #ffffff;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-weight: 700;
font-size: 16px;
flex-shrink: 0;
margin-top: 2px;
}

.step-content strong {
display: block;
font-size: 16px;
color: #1a3a2a;
margin-bottom: 5px;
font-weight: 600;
}

.step-content span {
font-size: 15px;
color: #3a4a40;
line-height: 1.65;
}

/* ── MISTAKES ── */
.mistake-card {
background: #fff8f0;
border: 1px solid #f5d9b8;
border-radius: 12px;
padding: 18px 22px;
margin-bottom: 14px;
display: flex;
gap: 14px;
align-items: flex-start;
}

.mistake-icon {
font-size: 22px;
flex-shrink: 0;
margin-top: 1px;
}

.mistake-card strong {
display: block;
font-size: 15px;
color: #7a3b10;
margin-bottom: 5px;
font-weight: 600;
}

.mistake-card p {
font-size: 14.5px;
color: #6b4020;
margin: 0;
}

/* ── RELATED HACKS ── */
.hack-row {
display: flex;
gap: 14px;
align-items: flex-start;
padding: 16px 0;
border-bottom: 1px solid #d4e8da;
}

.hack-row:last-child { border-bottom: none; }

.hack-num {
min-width: 34px;
height: 34px;
background: #d8f3dc;
border: 1px solid #b7dfc0;
color: #2d6a4f;
border-radius: 8px;
display: flex;
align-items: center;
justify-content: center;
font-weight: 700;
font-size: 14px;
flex-shrink: 0;
}

.hack-name {
font-weight: 600;
color: #1a3a2a;
font-size: 15px;
margin-bottom: 3px;
}

.hack-tip {
font-size: 14px;
color: #6b7c72;
line-height: 1.55;
}

/* ── FAQ ── */
.faq-item {
border: 1px solid #d4e8da;
border-radius: 12px;
margin-bottom: 12px;
overflow: hidden;
}

.faq-q {
background: #ffffff;
padding: 18px 22px;
font-weight: 600;
font-size: 15.5px;
color: #1a3a2a;
cursor: pointer;
display: flex;
justify-content: space-between;
align-items: center;
user-select: none;
gap: 12px;
}

.faq-q:hover { background: #f0faf3; }

.faq-icon {
min-width: 26px;
height: 26px;
background: #d8f3dc;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-size: 18px;
color: #2d6a4f;
font-weight: 400;
transition: transform 0.25s ease;
flex-shrink: 0;
}

.faq-item.open .faq-icon {
transform: rotate(45deg);
background: #52b788;
color: #ffffff;
}

.faq-a {
display: none;
padding: 16px 22px 20px;
font-size: 15px;
color: #3a4a40;
border-top: 1px solid #d4e8da;
background: #f0faf3;
line-height: 1.7;
}

.faq-item.open .faq-a { display: block; }

/* ── CTA FOOTER ── */
.cta-section {
background-color: #1a3a2a;
background-image: radial-gradient(ellipse at 70% 80%, rgba(82,183,136,0.2) 0%, transparent 60%);
padding: 64px 24px;
text-align: center;
}

.cta-section h2 {
color: #ffffff;
margin-bottom: 14px;
}

.cta-section p {
color: rgba(255,255,255,0.6);
max-width: 440px;
margin: 0 auto 30px;
font-size: 16px;
}

.cta-btn {
display: inline-block;
background: #52b788;
color: #ffffff;
font-weight: 700;
font-size: 20px; /* Larger font size */
padding: 20px 45px; /* Larger padding */
border-radius: 100px;
text-decoration: none;
transition: background 0.2s, transform 0.15s;
box-shadow: 0 10px 25px rgba(82,183,136,0.3);
}

.cta-btn:hover {
background: #3da070;
transform: translateY(-2px);
}

/* ── EXPERT SECTION ── */
.expert-section {
  background: #f9f9f9;
  border-top: 1px solid #eee;
  padding: 40px 24px;
}

.expert-card {
  display: flex;
  gap: 20px;
  align-items: center;
  max-width: 600px;
  margin: 0 auto;
  background: #fff;
  padding: 24px;
  border-radius: 16px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.05);
}

.expert-avatar {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: #eee;
  flex-shrink: 0;
  overflow: hidden;
}

.expert-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.expert-info strong {
  display: block;
  font-size: 16px;
  color: #1a3a2a;
  margin-bottom: 4px;
}

.expert-info p {
  font-size: 14px;
  color: #666;
  margin-bottom: 12px;
  line-height: 1.5;
}

.expert-meta {
  font-size: 12px;
  color: #999;
  display: flex;
  gap: 8px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

/* ── SHORTCUT BOX (The Bridge) ── */
.shortcut-box {
  background: #f0faf3;
  border: 2px dashed var(--green-light);
  border-radius: 16px;
  padding: 24px;
  margin: 32px 0;
  position: relative;
}
.shortcut-label {
  position: absolute;
  top: -12px;
  left: 20px;
  background: var(--green-light);
  color: white;
  padding: 2px 12px;
  border-radius: 100px;
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1px;
}
.shortcut-box p {
  margin-bottom: 12px;
  font-size: 15px;
  color: var(--green-deep);
}
.shortcut-link {
  color: var(--green-mid);
  font-weight: 700;
  text-decoration: underline;
  font-size: 15px;
}

/* ── RESPONSIVE ── */
@media (max-width: 580px) {
.hero { padding: 48px 20px 40px; }
.hero-answer-box { padding: 22px 18px; }
.section { padding: 40px 20px; }
.data-table { font-size: 13px; }
.data-table th, .data-table td { padding: 10px 12px; }
.stats-inner { gap: 8px; }
.stat-pill { font-size: 13px; padding: 7px 14px; }
}

.gif-wrap{
  display:block;
  width:500px;              /* fixed desktop width */
  height:131px;             /* fixed desktop height */
  margin:10px auto 0 auto;            /* center */
  border:2px solid #52b788; /* dark green frame */
  border-radius:8px;
  overflow:hidden;
}

.gif-wrap img{
  width:100%;
  height:100%;
  display:block;
  object-fit:cover;
  border:0;
}

/* mobile */
@media (max-width:600px){
  .gif-wrap{
    width:90%;
    max-width:500px;
    height:auto;
    aspect-ratio: 500 / 131;
  }

  .gif-wrap img{
    width:100%;
    height:auto;
    object-fit:fill;
  }
}