:root{
    --sand: #EDE6D5;
    --sand-light: #F8F3E7;
    --card: #FFFEFA;
    --ink: #17303A;
    --ink-soft: #3E5560;
    --teal: #0E6E68;
    --teal-deep: #0A4F4B;
    --gold: #C6952F;
    --coral: #BE4F30;
    --line: rgba(23,48,58,0.12);
    --radius: 14px;
    --shadow: 0 10px 30px -12px rgba(23,48,58,0.18);
  }
  *{box-sizing:border-box;}
  html{scroll-behavior:smooth;}
  body{
    margin:0;
    background:var(--sand);
    color:var(--ink);
    font-family:'Work Sans', sans-serif;
    -webkit-font-smoothing:antialiased;
  }
  h1,h2,h3,.display{
    font-family:'Fraunces', serif;
    font-weight:600;
    letter-spacing:-0.01em;
    margin:0;
  }
  .eyebrow{
    font-family:'IBM Plex Mono', monospace;
    font-size:0.72rem;
    letter-spacing:0.14em;
    text-transform:uppercase;
    color:var(--teal-deep);
    display:flex;
    align-items:center;
    gap:10px;
  }
  .eyebrow::before{
    content:"";
    width:22px;height:1px;background:var(--gold);
  }
  a{color:inherit;}
  .wrap{max-width:1120px;margin:0 auto;padding:0 28px;}

  /* NAV */
  nav{
    position:sticky; top:0; z-index:50;
    background:rgba(237,230,213,0.88);
    backdrop-filter:blur(10px);
    border-bottom:1px solid var(--line);
  }
  .navbar{
    display:flex; align-items:center; justify-content:space-between;
    padding:16px 28px; max-width:1120px; margin:0 auto;
  }
  .brand{
    display:flex; align-items:center; gap:10px;
    font-family:'Fraunces', serif; font-weight:600; font-size:1.05rem;
  }
  .brand svg{width:26px;height:26px;flex-shrink:0;}
  .navlinks{display:flex; gap:26px; font-size:0.88rem; font-weight:500;}
  .navlinks a{text-decoration:none; color:var(--ink-soft); position:relative; padding-bottom:2px;}
  .navlinks a:hover{color:var(--teal-deep);}
  .nav-cta{
    background:var(--teal-deep); color:var(--sand-light);
    padding:9px 18px; border-radius:100px; font-size:0.84rem; font-weight:600;
    text-decoration:none; white-space:nowrap;
  }
  .navlinks-mobile-toggle{display:none;}
  @media(max-width:860px){
    .navlinks{display:none;}
  }

  /* HERO */
  .hero{
    position:relative; overflow:hidden;
    padding:86px 0 40px;
  }
  .hero-grid{
    display:grid; grid-template-columns: 1.1fr 0.9fr; gap:60px; align-items:center;
  }
  @media(max-width:900px){ .hero-grid{grid-template-columns:1fr;} }
  .hero h1{
    font-size:clamp(2.4rem, 5vw, 3.6rem);
    line-height:1.05;
    margin:18px 0 22px;
  }
  .hero h1 em{
    font-style:italic; color:var(--teal-deep);
  }
  .hero p.lead{
    font-size:1.08rem; color:var(--ink-soft); max-width:46ch; line-height:1.6;
  }
  .hero-actions{display:flex; gap:14px; margin-top:30px; flex-wrap:wrap;}
  .btn-primary{
    background:var(--coral); color:#FFF8EE;
    padding:14px 26px; border-radius:100px; font-weight:600; font-size:0.94rem;
    text-decoration:none; box-shadow:var(--shadow);
    border:none; cursor:pointer;
  }
  .btn-ghost{
    padding:14px 22px; border-radius:100px; font-weight:600; font-size:0.94rem;
    text-decoration:none; border:1px solid var(--line); color:var(--ink);
  }
  .hero-stats{
    display:flex; gap:32px; margin-top:44px; flex-wrap:wrap;
  }
  .stat-num{font-family:'Fraunces',serif; font-size:1.7rem; font-weight:600; color:var(--teal-deep);}
  .stat-label{font-size:0.78rem; color:var(--ink-soft); text-transform:uppercase; letter-spacing:0.06em;}

  /* Skyline / horizon signature */
  .horizon-frame{
    position:relative; border-radius:20px; overflow:hidden;
    background:linear-gradient(180deg, #F3E9CE 0%, #EAD9AE 55%, #DDC488 100%);
    aspect-ratio: 4/5; box-shadow:var(--shadow);
  }
  .horizon-frame svg{position:absolute; inset:0; width:100%; height:100%;}
  .sun{
    animation: rise 3.2s ease-out forwards;
    transform-origin:center;
  }
  @keyframes rise{
    from{ transform:translateY(60px); opacity:0; }
    to{ transform:translateY(0); opacity:1; }
  }
  .dune-path{
    stroke-dasharray:900;
    stroke-dashoffset:900;
    animation: draw 2.4s ease forwards 0.3s;
  }
  @keyframes draw{ to{ stroke-dashoffset:0; } }

  /* Section divider — the "route" motif */
  .route-divider{
    display:flex; align-items:center; gap:16px; margin:8px 0 0;
    color:var(--gold); opacity:0.9;
  }
  .route-divider svg{flex-shrink:0;}
  .route-divider .rline{flex:1; height:1px; background:linear-gradient(90deg, var(--gold), transparent);}

  section{padding:78px 0;}
  section.alt{background:var(--sand-light); border-top:1px solid var(--line); border-bottom:1px solid var(--line);}
  .section-head{max-width:640px; margin-bottom:48px;}
  .section-head h2{font-size:clamp(1.7rem,3vw,2.3rem); margin-top:14px;}
  .section-head p{color:var(--ink-soft); margin-top:12px; line-height:1.6;}

  /* Guide steps — numbered journey */
  .journey{
    display:flex; gap:8px; overflow-x:auto; padding-bottom:14px; margin-bottom:10px;
    scrollbar-width:thin;
  }
  .journey-item{
    flex:0 0 auto; padding:8px 16px; border-radius:100px; font-size:0.82rem; font-weight:600;
    background:var(--card); border:1px solid var(--line); cursor:pointer; white-space:nowrap;
    text-decoration:none; color:var(--ink-soft); transition:all .2s ease;
  }
  .journey-item:hover, .journey-item.active{
    background:var(--teal-deep); color:#fff; border-color:var(--teal-deep);
  }

  .guide-grid{
    display:grid; grid-template-columns:repeat(auto-fill, minmax(300px,1fr)); gap:20px; margin-top:20px;
  }
  .guide-card{
    background:var(--card); border-radius:var(--radius); padding:28px;
    border:1px solid var(--line); position:relative;
  }
  .guide-card .num{
    font-family:'IBM Plex Mono',monospace; font-size:0.72rem; color:var(--gold); font-weight:500;
  }
  .guide-card h3{font-size:1.18rem; margin:10px 0 12px;}
  .guide-card ul{margin:0; padding-left:18px; color:var(--ink-soft); font-size:0.92rem; line-height:1.65;}
  .guide-card ul li{margin-bottom:4px;}
  .guide-card .tag{
    position:absolute; top:24px; right:24px;
    width:34px; height:34px; border-radius:10px;
    background:var(--sand); display:flex; align-items:center; justify-content:center;
  }
  .guide-card .tag svg{width:18px; height:18px; stroke:var(--teal-deep);}

  /* Directory */
  .filter-row{display:flex; gap:10px; flex-wrap:wrap; margin-bottom:36px;}
  .filter-chip{
    padding:8px 16px; border-radius:100px; font-size:0.82rem; font-weight:500;
    border:1px solid var(--line); background:var(--card); cursor:pointer; color:var(--ink-soft);
  }
  .filter-chip.active{background:var(--teal-deep); color:#fff; border-color:var(--teal-deep);}
  .dir-grid{
    display:grid; grid-template-columns:repeat(auto-fill, minmax(260px,1fr)); gap:18px;
  }
  .dir-card{
    background:var(--card); border:1px solid var(--line); border-radius:var(--radius);
    padding:22px; display:flex; flex-direction:column; gap:10px;
    transition:transform .18s ease, box-shadow .18s ease;
  }
  .dir-card:hover{transform:translateY(-3px); box-shadow:var(--shadow);}
  .dir-card .cat{font-family:'IBM Plex Mono',monospace; font-size:0.68rem; text-transform:uppercase; color:var(--teal-deep); letter-spacing:0.08em;}
  .dir-card h4{font-family:'Fraunces',serif; font-size:1.05rem; font-weight:600; margin:0;}
  .dir-card p{font-size:0.86rem; color:var(--ink-soft); margin:0; line-height:1.5;}
  .badge{
    align-self:flex-start; font-size:0.68rem; font-weight:700; text-transform:uppercase;
    letter-spacing:0.06em; padding:4px 10px; border-radius:100px;
  }
  .badge.featured{background:#FBEBD8; color:var(--coral);}
  .badge.open{background:#E4EFE9; color:var(--teal-deep);}

  /* Monetization / listing CTA */
  .cta-band{
    background:var(--teal-deep); color:var(--sand-light); border-radius:24px;
    padding:56px; display:grid; grid-template-columns:1.3fr 1fr; gap:40px; align-items:center;
  }
  @media(max-width:800px){ .cta-band{grid-template-columns:1fr; padding:36px;} }
  .cta-band h2{color:#fff; font-size:clamp(1.6rem,3vw,2.1rem);}
  .cta-band p{color:#CFE3DE; margin-top:14px; line-height:1.6;}
  .pricing-mini{
    background:rgba(255,255,255,0.06); border:1px solid rgba(255,255,255,0.14);
    border-radius:16px; padding:22px;
  }
  .pricing-mini .row{display:flex; justify-content:space-between; padding:10px 0; border-bottom:1px solid rgba(255,255,255,0.1); font-size:0.9rem;}
  .pricing-mini .row:last-child{border-bottom:none;}
  .pricing-mini .row b{color:#fff;}

  footer{padding:50px 0 40px; border-top:1px solid var(--line);}
  .foot-row{display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:16px;}
  .foot-links{display:flex; gap:22px; font-size:0.85rem; color:var(--ink-soft);}
  .foot-links a{text-decoration:none;}
  .foot-note{font-size:0.8rem; color:var(--ink-soft); margin-top:24px;}

  ::selection{background:var(--gold); color:#fff;}

/* ---------- Article / guide page styles ---------- */
.breadcrumb{
  font-size:0.82rem; color:var(--ink-soft); margin-bottom:18px;
}
.breadcrumb a{color:var(--teal-deep); text-decoration:none; font-weight:600;}
.article-hero{padding:70px 0 30px;}
.article-hero .eyebrow{margin-bottom:14px;}
.article-hero h1{font-size:clamp(2rem,4.4vw,3rem); line-height:1.1; margin-bottom:16px;}
.article-hero .dek{font-size:1.05rem; color:var(--ink-soft); max-width:62ch; line-height:1.6;}
.article-meta{display:flex; gap:18px; margin-top:22px; font-size:0.82rem; color:var(--ink-soft); flex-wrap:wrap;}
.article-meta span{display:flex; align-items:center; gap:6px;}

.article-body{max-width:760px; margin:0 auto; padding:10px 0 60px;}
.article-body h2{
  font-size:1.5rem; margin-top:46px; margin-bottom:16px; scroll-margin-top:90px;
}
.article-body h2 .num{color:var(--gold); font-family:'IBM Plex Mono',monospace; font-size:0.9rem; margin-right:10px;}
.article-body h3{font-size:1.12rem; margin-top:28px; margin-bottom:10px; font-family:'Work Sans',sans-serif; font-weight:700;}
.article-body p{line-height:1.75; color:var(--ink-soft); margin:0 0 16px; font-size:1rem;}
.article-body ul, .article-body ol{line-height:1.75; color:var(--ink-soft); margin:0 0 18px; padding-left:22px;}
.article-body li{margin-bottom:8px;}
.article-body strong{color:var(--ink);}
.toc{
  background:var(--card); border:1px solid var(--line); border-radius:var(--radius);
  padding:22px 26px; margin:34px 0; max-width:760px; margin-left:auto; margin-right:auto;
}
.toc .eyebrow{margin-bottom:12px;}
.toc ol{margin:0; padding-left:20px; columns:2; gap:24px;}
.toc li{margin-bottom:8px; font-size:0.9rem;}
.toc a{text-decoration:none; color:var(--ink-soft); font-weight:500;}
.toc a:hover{color:var(--teal-deep);}
@media(max-width:640px){ .toc ol{columns:1;} }

.callout{
  background:var(--sand-light); border-left:3px solid var(--gold);
  border-radius:0 12px 12px 0; padding:18px 22px; margin:24px 0; font-size:0.94rem; color:var(--ink-soft);
}
.callout strong{color:var(--ink);}

.pull-directory{
  max-width:760px; margin:44px auto 0; background:var(--teal-deep); border-radius:18px;
  padding:30px 32px; display:flex; justify-content:space-between; align-items:center; gap:20px; flex-wrap:wrap;
}
.pull-directory p{color:#CFE3DE; margin:0; max-width:38ch;}
.pull-directory a{
  background:var(--gold); color:#1B2E1F; padding:12px 22px; border-radius:100px;
  font-weight:700; font-size:0.88rem; text-decoration:none; white-space:nowrap;
}

.article-nav{
  max-width:760px; margin:50px auto 0; display:flex; justify-content:space-between;
  gap:16px; border-top:1px solid var(--line); padding-top:26px;
}
.article-nav a{
  text-decoration:none; color:var(--ink-soft); font-size:0.86rem; font-weight:600;
  display:flex; flex-direction:column; gap:4px; max-width:45%;
}
.article-nav a span.dir{font-size:0.7rem; text-transform:uppercase; letter-spacing:0.06em; color:var(--gold);}
.article-nav .next{text-align:right; margin-left:auto;}

/* ---------- Topic banner ---------- */
.topic-banner{
  max-width:760px; margin:0 auto 8px; border-radius:18px; overflow:hidden;
  box-shadow:0 16px 40px -16px rgba(10,79,75,0.35);
  transition:transform .25s ease;
}
.topic-banner svg{display:block; width:100%; height:auto;}

/* ---------- FAQ ---------- */
.faq-list{display:flex; flex-direction:column; gap:14px; margin-bottom:10px;}
.faq-item{
  background:var(--card); border:1px solid var(--line); border-radius:14px; padding:20px 24px;
  transition:box-shadow .2s ease, transform .2s ease;
}
.faq-item:hover{ box-shadow:var(--shadow); transform:translateY(-2px); }
.faq-item h3{
  font-family:'Work Sans',sans-serif; font-size:1rem; font-weight:700; margin:0 0 8px; color:var(--ink);
  display:flex; align-items:baseline; gap:8px;
}
.faq-item h3::before{
  content:"Q"; font-family:'IBM Plex Mono',monospace; font-size:0.78rem; color:var(--gold);
  background:var(--sand); border-radius:6px; padding:2px 7px; flex-shrink:0;
}
.faq-item p{margin:0 0 0 30px; color:var(--ink-soft); font-size:0.94rem; line-height:1.6;}

/* ---------- Community banner (clean photo, parallax, no overlay) ---------- */
.community-banner{ padding:6px 0 0; }
.community-banner-frame{
  position:relative; max-width:1120px; margin:0 auto; border-radius:20px;
  overflow:hidden; box-shadow:0 20px 50px -20px rgba(23,48,58,0.35);
  height:460px; background:var(--sand-light);
}
.community-banner-frame img{
  position:absolute; top:50%; left:0; width:100%; height:130%;
  object-fit:cover; object-position:center 30%;
  transform:translateY(-50%);
  will-change:transform;
}
.community-text{ padding:56px 0 20px; }
@media(max-width:720px){
  .community-banner-frame{ height:320px; }
}

/* ---------- Hero search ---------- */
.hero-search{
  position:relative; max-width:480px; margin:26px 0 6px;
}
.hero-search svg{
  position:absolute; left:16px; top:50%; transform:translateY(-50%);
  width:18px; height:18px; color:var(--ink-soft); pointer-events:none;
}
.hero-search input{
  width:100%; padding:14px 16px 14px 46px; border-radius:100px;
  border:1px solid var(--line); background:var(--card); font-family:'Work Sans',sans-serif;
  font-size:0.94rem; color:var(--ink); box-shadow:0 6px 20px -10px rgba(23,48,58,0.15);
  outline:none; transition:border-color .15s ease, box-shadow .15s ease;
}
.hero-search input:focus{ border-color:var(--teal-deep); box-shadow:0 0 0 3px rgba(14,110,104,0.15); }
.search-results{
  position:absolute; top:calc(100% + 8px); left:0; right:0; background:var(--card);
  border:1px solid var(--line); border-radius:16px; box-shadow:var(--shadow);
  max-height:360px; overflow-y:auto; z-index:40; display:none;
}
.search-results.active{ display:block; }
.search-result-item{
  display:block; padding:12px 18px; text-decoration:none; border-bottom:1px solid var(--line);
}
.search-result-item:last-child{ border-bottom:none; }
.search-result-item:hover{ background:var(--sand-light); }
.search-result-item .sr-title{ font-weight:700; font-size:0.9rem; color:var(--ink); }
.search-result-item .sr-context{ font-size:0.78rem; color:var(--teal-deep); font-family:'IBM Plex Mono',monospace; margin-top:2px; }
.search-empty{ padding:16px 18px; font-size:0.86rem; color:var(--ink-soft); }

/* ---------- Inline mid-article illustration ---------- */
.inline-illustration{
  max-width:760px; margin:36px auto; border-radius:18px; overflow:hidden;
  box-shadow:0 10px 26px -14px rgba(23,48,58,0.25);
}
.inline-illustration svg{ display:block; width:100%; height:auto; }

/* ---------- Sticky WhatsApp CTA ---------- */
.sticky-cta{
  position:fixed; bottom:22px; right:22px; z-index:60;
  display:flex; align-items:center; gap:10px;
  background:var(--teal-deep); color:#fff; padding:14px 20px 14px 16px;
  border-radius:100px; text-decoration:none; box-shadow:0 12px 30px -8px rgba(10,79,75,0.5);
  font-weight:700; font-size:0.9rem; opacity:0; transform:translateY(16px);
  pointer-events:none; transition:opacity .25s ease, transform .25s ease;
}
.sticky-cta.visible{ opacity:1; transform:translateY(0); pointer-events:auto; }
.sticky-cta svg{ width:20px; height:20px; flex-shrink:0; }
.sticky-cta:hover{ background:#0C5852; }
@media(max-width:600px){
  .sticky-cta{ bottom:16px; right:16px; padding:12px 16px 12px 13px; font-size:0.84rem; }
}

/* ---------- Official government sources box ---------- */
.gov-links{
  max-width:760px; margin:34px auto; background:var(--sand-light);
  border:1px solid var(--line); border-radius:14px; padding:20px 24px;
}
.gov-links ul{ list-style:none; margin:10px 0 0; padding:0; }
.gov-links li{ margin-bottom:8px; font-size:0.9rem; }
.gov-links a{ color:var(--teal-deep); font-weight:600; text-decoration:none; }
.gov-links a:hover{ text-decoration:underline; }