/* =========================================================
   Home page (scoped to .replimap-home)
   ========================================================= */
.replimap-home{
  --hm-teal: var(--replimap-teal, #1d9aaa);
  --hm-teal-dark: var(--replimap-teal-dark, #167f8f);
  --hm-teal-soft: var(--replimap-teal-soft, rgba(29,154,170,.12));
  --hm-accent-fg: var(--hm-teal-dark);
  --hm-line: rgba(0,0,0,.08);
  --hm-card: var(--md-default-bg-color);
  --hm-sunken: var(--md-code-bg-color);
  --hm-muted: var(--md-default-fg-color--light);
  --hm-shadow: 0 10px 28px -18px rgba(0,0,0,.35);
  --hm-shadow-hover: 0 20px 38px -20px rgba(29,154,170,.55);
}
[data-md-color-scheme="slate"] .replimap-home{
  --hm-accent-fg: #7fe0ea;
  --hm-line: rgba(255,255,255,.1);
  --hm-shadow: 0 10px 28px -18px rgba(0,0,0,.8);
  --hm-shadow-hover: 0 20px 38px -20px rgba(29,154,170,.45);
}

/* Landing page reads better a little wider than the article column. */
.md-content:has(.replimap-home) .md-content__inner{ max-width:68rem; margin-left:auto; margin-right:auto; }
.md-content:has(.replimap-home) .md-content__inner > h1:first-child{ display:none; }

.replimap-home svg{ flex:none; }

/* ---------- Hero ---------- */
.replimap-home .hm-hero{
  position:relative; overflow:hidden;
  display:flex; flex-wrap:wrap; align-items:center; gap:2.25rem;
  margin:.5rem 0 1.5rem; padding:2.4rem 2.2rem;
  border-radius:22px;
  background:
    radial-gradient(120% 140% at 0% 0%, rgba(29,154,170,.20), transparent 55%),
    radial-gradient(90% 120% at 100% 100%, rgba(29,154,170,.12), transparent 60%),
    var(--hm-card);
  border:1px solid rgba(29,154,170,.25);
  box-shadow:0 18px 40px -24px rgba(29,154,170,.6);
}
.replimap-home .hm-hero::before{ /* faint road-grid texture */
  content:""; position:absolute; inset:0; pointer-events:none; opacity:.4;
  background-image:
    linear-gradient(rgba(29,154,170,.14) 1px, transparent 1px),
    linear-gradient(90deg, rgba(29,154,170,.14) 1px, transparent 1px);
  background-size:28px 28px;
  -webkit-mask-image:radial-gradient(80% 90% at 85% 50%, #000, transparent 75%);
          mask-image:radial-gradient(80% 90% at 85% 50%, #000, transparent 75%);
}
.replimap-home .hm-hero > *{ position:relative; z-index:1; }
.replimap-home .hm-hero__text{ flex:1 1 340px; min-width:0; }
.replimap-home .hm-hero__shot{ flex:1 1 360px; min-width:0; }
.replimap-home .hm-eyebrow{
  display:inline-flex; align-items:center; gap:.45rem;
  font-size:.68rem; font-weight:700; letter-spacing:.08em; text-transform:uppercase;
  color:var(--hm-accent-fg); background:var(--hm-teal-soft);
  padding:.32rem .75rem; border-radius:999px; margin-bottom:.9rem;
}
.replimap-home .hm-eyebrow__dot{
  width:.45rem; height:.45rem; border-radius:50%; background:var(--hm-teal);
  animation:hm-pulse 2.2s infinite;
}
@keyframes hm-pulse{ 0%{box-shadow:0 0 0 0 rgba(29,154,170,.55);} 70%{box-shadow:0 0 0 .5rem rgba(29,154,170,0);} 100%{box-shadow:0 0 0 0 rgba(29,154,170,0);} }
.replimap-home .hm-hero h1{
  margin:0 0 .8rem !important; padding:0 !important; border:none !important;
  font-size:2.6rem; font-weight:800; line-height:1.05; letter-spacing:-.02em;
  background:linear-gradient(90deg, var(--hm-teal-dark), var(--hm-teal) 55%, #39c3d3);
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.replimap-home .hm-hero h1 .headerlink{ display:none; }
.replimap-home .hm-lead{ margin:0 0 .8rem; font-size:1.02rem; line-height:1.65; color:var(--md-default-fg-color); }
.replimap-home .hm-lead + p{ margin:0; font-size:.86rem; line-height:1.65; color:var(--hm-muted); }
.replimap-home .hm-cta{ display:flex; flex-wrap:wrap; gap:.6rem; margin-top:1.4rem; }
.replimap-home .hm-btn{
  display:inline-flex; align-items:center; gap:.45rem; min-height:2.4rem; box-sizing:border-box;
  font-size:.8rem; font-weight:700; text-decoration:none !important;
  padding:.55rem 1.05rem; border-radius:10px;
  transition:transform .15s ease, box-shadow .15s ease, background .15s ease;
}
.replimap-home .hm-btn svg{ width:1rem; height:1rem; }
.replimap-home .hm-btn--primary{ background:var(--hm-teal); color:#fff !important; box-shadow:0 8px 18px -10px rgba(29,154,170,.9); }
.replimap-home .hm-btn--primary:hover{ background:var(--hm-teal-dark); transform:translateY(-2px); }
.replimap-home .hm-btn--ghost{ background:var(--hm-card); color:var(--hm-accent-fg) !important; border:1px solid rgba(29,154,170,.45); }
.replimap-home .hm-btn--ghost:hover{ background:var(--hm-teal-soft); transform:translateY(-2px); }

/* Screenshot in an app-window frame */
.replimap-home .hm-window{
  border-radius:14px; overflow:hidden; background:var(--hm-card);
  border:1px solid var(--hm-line); box-shadow:0 26px 50px -22px rgba(0,0,0,.45);
  transform:perspective(1200px) rotateY(-6deg) rotateX(2deg);
  transition:transform .5s ease;
}
.replimap-home .hm-window:hover{ transform:perspective(1200px) rotateY(0) rotateX(0); }
.replimap-home .hm-window__bar{
  display:flex; align-items:center; gap:.35rem; padding:.5rem .7rem;
  background:var(--hm-sunken); border-bottom:1px solid var(--hm-line);
}
.replimap-home .hm-window__bar span{ width:.55rem; height:.55rem; border-radius:50%; background:#ff5f57; }
.replimap-home .hm-window__bar span:nth-child(2){ background:#febc2e; }
.replimap-home .hm-window__bar span:nth-child(3){ background:#28c840; }
.replimap-home .hm-window__bar em{ margin-left:auto; font-style:normal; font-size:.62rem; color:var(--hm-muted); letter-spacing:.04em; }
.replimap-home .hm-window .replimap-expandable-media{ position:relative; display:block; width:100%; margin:0; max-width:none !important; }
.replimap-home .hm-window img{ display:block; width:100% !important; max-width:none !important; height:auto; margin:0; cursor:zoom-in; }

/* OpenDRIVE strip */
.replimap-home .hm-format{
  display:flex; align-items:center; gap:1rem;
  margin:0 0 1rem; padding:1rem 1.2rem; border-radius:14px;
  background:var(--hm-sunken); border:1px solid var(--hm-line);
}
.replimap-home .hm-format p{ margin:0; font-size:.84rem; line-height:1.6; }
.replimap-home .hm-format__badge{
  flex:none; display:flex; align-items:center; justify-content:center; flex-direction:column;
  width:4.2rem; height:4.2rem; border-radius:14px;
  background:var(--hm-teal); color:#fff; font-weight:800; font-size:.78rem; letter-spacing:.02em;
  box-shadow:0 10px 20px -12px rgba(29,154,170,.9);
}
.replimap-home .hm-format__badge small{ font-size:.55rem; font-weight:600; opacity:.85; letter-spacing:.06em; }

/* ---------- Section headings ---------- */
.replimap-home .hm-kicker{
  display:block; margin:3rem 0 -.5rem; font-size:.68rem; font-weight:800;
  letter-spacing:.12em; text-transform:uppercase; color:var(--hm-teal);
}
.replimap-home h2{ margin-top:.9rem !important; }
.replimap-home .hm-sub{ margin:-.2rem 0 1.2rem; color:var(--hm-muted); }

/* ---------- Why RepliMap ---------- */
.replimap-home .hm-benefits{ display:grid; grid-template-columns:repeat(4, minmax(0,1fr)); gap:.8rem; margin:1.1rem 0; }
.replimap-home .hm-benefit{
  box-sizing:border-box; padding:1.1rem 1rem; border-radius:16px;
  background:var(--hm-card); border:1px solid var(--hm-line); box-shadow:var(--hm-shadow);
  font-size:.8rem; line-height:1.55;
  transition:transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.replimap-home .hm-benefit:hover{ transform:translateY(-4px); box-shadow:var(--hm-shadow-hover); border-color:rgba(29,154,170,.45); }
.replimap-home .hm-icon{
  display:flex; align-items:center; justify-content:center;
  width:2.4rem; height:2.4rem; margin-bottom:.75rem; border-radius:11px;
  background:var(--hm-teal-soft); color:var(--hm-accent-fg);
}
.replimap-home .hm-icon svg{ width:1.25rem; height:1.25rem; }
.replimap-home .hm-quote{
  position:relative; margin:1rem 0 0; padding:1rem 1.2rem 1rem 3.2rem; border-radius:14px;
  background:linear-gradient(90deg, var(--hm-teal-soft), transparent);
  font-size:.86rem; line-height:1.6;
}
.replimap-home .hm-quote svg{ position:absolute; left:1.05rem; top:1.05rem; width:1.35rem; height:1.35rem; color:var(--hm-teal); }

/* ---------- Documentation sections ---------- */
.replimap-home .hm-filter{
  display:flex; flex-wrap:wrap; align-items:center; gap:.75rem; margin:0 0 1rem;
}
.replimap-home .hm-filter__box{
  position:relative; flex:1 1 260px; max-width:26rem;
}
.replimap-home .hm-filter__box svg{ position:absolute; left:.8rem; top:50%; width:1rem; height:1rem; transform:translateY(-50%); color:var(--hm-muted); pointer-events:none; }
.replimap-home .hm-filter input{
  width:100%; box-sizing:border-box; height:2.6rem; padding:0 .9rem 0 2.4rem;
  border-radius:10px; border:1px solid var(--hm-line); background:var(--hm-card);
  color:var(--md-default-fg-color); font:inherit; font-size:.82rem;
  transition:border-color .15s ease, box-shadow .15s ease;
}
.replimap-home .hm-filter input:focus{ outline:none; border-color:var(--hm-teal); box-shadow:0 0 0 3px var(--hm-teal-soft); }
.replimap-home .hm-filter__count{ font-size:.75rem; color:var(--hm-muted); }
.replimap-home .hm-sections{ display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:.85rem; }
.replimap-home a.hm-section{
  position:relative; display:flex; flex-direction:column; gap:.35rem;
  box-sizing:border-box; padding:1.1rem 1.15rem 1rem; border-radius:16px;
  background:var(--hm-card); border:1px solid var(--hm-line); box-shadow:var(--hm-shadow);
  color:var(--md-default-fg-color) !important; text-decoration:none !important;
  transition:transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.replimap-home a.hm-section:hover,
.replimap-home a.hm-section:focus-visible{ transform:translateY(-4px); box-shadow:var(--hm-shadow-hover); border-color:rgba(29,154,170,.5); outline:none; }
.replimap-home a.hm-section:focus-visible{ box-shadow:0 0 0 3px var(--hm-teal-soft), var(--hm-shadow-hover); }
.replimap-home .hm-section__head{ display:flex; align-items:center; gap:.7rem; }
.replimap-home .hm-section__head .hm-icon{ margin:0; transition:background .2s ease, color .2s ease; }
.replimap-home a.hm-section:hover .hm-icon,
.replimap-home a.hm-section:focus-visible .hm-icon{ background:var(--hm-teal); color:#fff; }
.replimap-home .hm-section strong{ flex:1; font-size:.92rem; }
.replimap-home .hm-section__arrow{ width:1rem; height:1rem; color:var(--hm-teal); opacity:0; transform:translateX(-4px); transition:opacity .2s ease, transform .2s ease; }
.replimap-home a.hm-section:hover .hm-section__arrow,
.replimap-home a.hm-section:focus-visible .hm-section__arrow{ opacity:1; transform:none; }
.replimap-home .hm-section p{ margin:.2rem 0 0; font-size:.78rem; line-height:1.55; color:var(--hm-muted); }
.replimap-home .hm-section ul{ display:flex; flex-wrap:wrap; gap:.35rem; margin:.45rem 0 0 !important; padding:0 !important; list-style:none; }
.replimap-home .hm-section li{
  margin:0 !important; padding:.18rem .55rem; border-radius:999px;
  font-size:.66rem; font-weight:600; background:var(--hm-teal-soft); color:var(--hm-accent-fg);
}
.replimap-home .hm-section li::before{ content:none !important; }
.replimap-home .hm-section[hidden]{ display:none; }
.replimap-home .hm-empty{ margin:1rem 0 0; padding:1rem; border-radius:12px; text-align:center; font-size:.8rem; color:var(--hm-muted); background:var(--hm-sunken); }

/* ---------- Workflow ---------- */
.replimap-home .hm-flow{
  --hm-p:0;
  position:relative; display:grid; grid-template-columns:repeat(5, minmax(0,1fr)); gap:.6rem;
  margin:1.2rem 0 0 !important; padding:0 !important; list-style:none;
}
.replimap-home .hm-flow::before,
.replimap-home .hm-flow::after{ /* rail + progress fill behind the step dots */
  content:""; position:absolute; top:1.3rem; left:10%; height:3px; border-radius:2px;
}
.replimap-home .hm-flow::before{ right:10%; background:var(--hm-line); }
.replimap-home .hm-flow::after{ width:calc(80% * var(--hm-p)); background:var(--hm-teal); transition:width .45s ease; }
.replimap-home .hm-flow li{ margin:0 !important; padding:0 !important; }
.replimap-home .hm-flow li::before{ content:none !important; }
.replimap-home .hm-step{
  position:relative; z-index:1; width:100%; height:100%; box-sizing:border-box;
  display:flex; flex-direction:column; align-items:center; gap:.7rem;
  padding:0 .4rem .9rem; border:0; border-radius:14px; background:transparent;
  color:var(--md-default-fg-color); font:inherit; text-align:center; cursor:pointer;
}
.replimap-home .hm-step__num{
  display:flex; align-items:center; justify-content:center;
  width:2.6rem; height:2.6rem; border-radius:50%;
  background:var(--hm-card); border:2px solid var(--hm-line); color:var(--hm-muted);
  font-weight:800; font-size:.9rem;
  transition:background .3s ease, border-color .3s ease, color .3s ease, transform .3s ease, box-shadow .3s ease;
}
.replimap-home .hm-step__text{ font-size:.78rem; line-height:1.5; color:var(--hm-muted); transition:color .3s ease; }
.replimap-home .hm-step.is-done .hm-step__num{ background:var(--hm-teal-soft); border-color:var(--hm-teal); color:var(--hm-accent-fg); }
.replimap-home .hm-step.is-active .hm-step__num{
  background:var(--hm-teal); border-color:var(--hm-teal); color:#fff; transform:scale(1.12);
  box-shadow:0 0 0 6px var(--hm-teal-soft);
}
.replimap-home .hm-step.is-active .hm-step__text{ color:var(--md-default-fg-color); font-weight:600; }
.replimap-home .hm-step:hover .hm-step__num{ border-color:var(--hm-teal); }
.replimap-home .hm-step:focus-visible{ outline:2px solid var(--hm-teal); outline-offset:2px; }
.replimap-home .hm-flow-note{ margin:.6rem 0 0; font-size:.84rem; color:var(--hm-muted); text-align:center; }

/* ---------- About ---------- */
.replimap-home .hm-about{
  display:flex; flex-wrap:wrap; gap:1.5rem; align-items:center;
  padding:1.4rem 1.5rem; border-radius:18px;
  background:var(--hm-card); border:1px solid var(--hm-line); box-shadow:var(--hm-shadow);
}
.replimap-home .hm-about__text{ flex:1 1 260px; min-width:0; }
.replimap-home .hm-about__text p{ margin:0 0 .6rem; font-size:.84rem; line-height:1.6; }
.replimap-home .hm-about__text p:last-child{ margin:0; color:var(--hm-muted); }
.replimap-home .hm-checks{ flex:1 1 300px; display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:.55rem; margin:0 !important; padding:0 !important; list-style:none; }
.replimap-home .hm-checks li{
  display:flex; align-items:center; gap:.55rem; margin:0 !important;
  padding:.65rem .75rem; border-radius:12px; background:var(--hm-sunken);
  font-size:.78rem; font-weight:600;
}
.replimap-home .hm-checks li::before{ content:none !important; }
.replimap-home .hm-checks svg{ width:1.1rem; height:1.1rem; color:var(--hm-teal); }

/* ---------- Scroll reveal (only when JS + motion are allowed) ---------- */
html.hm-js .replimap-home .hm-reveal{ opacity:0; transform:translateY(14px); transition:opacity .55s ease, transform .55s ease; }
html.hm-js .replimap-home .hm-reveal.hm-in{ opacity:1; transform:none; }

@media (prefers-reduced-motion: reduce){
  .replimap-home *{ animation:none !important; transition:none !important; }
  .replimap-home .hm-window{ transform:none; }
}

/* ---------- Responsive ---------- */
@media screen and (max-width: 76.1875em){
  .replimap-home .hm-sections{ grid-template-columns:repeat(2, minmax(0,1fr)); }
  .replimap-home .hm-benefits{ grid-template-columns:repeat(2, minmax(0,1fr)); }
}
@media screen and (max-width: 44.9375em){
  .replimap-home .hm-hero{ padding:1.6rem 1.2rem; }
  .replimap-home .hm-hero h1{ font-size:2rem; }
  .replimap-home .hm-window{ transform:none; }
  .replimap-home .hm-sections,
  .replimap-home .hm-benefits,
  .replimap-home .hm-checks{ grid-template-columns:1fr; }
  .replimap-home .hm-format{ align-items:flex-start; }
  /* Workflow becomes a vertical timeline */
  .replimap-home .hm-flow{ grid-template-columns:1fr; gap:.3rem; }
  .replimap-home .hm-flow::before,
  .replimap-home .hm-flow::after{ top:1.3rem; left:1.3rem; right:auto; width:3px; height:auto; }
  .replimap-home .hm-flow::before{ bottom:1.3rem; }
  .replimap-home .hm-flow::after{ height:calc((100% - 2.6rem) * var(--hm-p)); width:3px; transition:height .45s ease; }
  .replimap-home .hm-step{ flex-direction:row; text-align:left; padding:.2rem 0; gap:.9rem; }
  .replimap-home .hm-flow-note{ text-align:left; }
}

/* Theme list styles would otherwise override the workflow grid. */
.md-typeset .replimap-home ol.hm-flow{ display:grid !important; }
.md-typeset .replimap-home ul.hm-checks{ display:grid !important; }
.md-typeset .replimap-home .hm-section ul{ display:flex !important; }
@media screen and (max-width: 44.9375em){
  .md-typeset .replimap-home ol.hm-flow{ grid-template-columns:1fr; }
}
.replimap-home .hm-sr{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0;
}