:root {
  --blue:#7bb9e5;--blue-light:#eef5fb;--red:#e53935;
  --green:#00c851;--text:#111;--muted:#666;--bg:#fff;
  --pad:16px;--radius:14px;--header-h:60px;
}
*{box-sizing:border-box;}
html,body{height:100%;}
html{scroll-behavior:smooth;}
body{
  margin:0;
  font-family:system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial;
  color:var(--text);background:var(--bg);
  -webkit-font-smoothing:antialiased;overflow-x:hidden;
}

/* --- Header --- */
.site-header{
  position:fixed;top:0;left:0;width:100%;
  height:var(--header-h);
  background:var(--blue);color:#fff;z-index:60;
  display:flex;align-items:center;justify-content:center;
  padding:0 12px;transition:background .4s ease,height .4s ease;
}
.home-link{position:absolute;left:10px;top:50%;transform:translateY(-50%);}
.home-logo{height:28px;width:auto;display:block;}
.header-title-wrap{opacity:0;transform:translateY(6px);transition:opacity .4s,transform .4s;text-align:center;}
.site-header.show-title .header-title-wrap{opacity:1;transform:translateY(0);}
.header-title{margin:0;font-size:19px;font-weight:700;color:#fff;}
.header-subtitle{margin:0;font-size:14px;color:#f0f6fb;}

/* --- Layout --- */
.scroller{scroll-snap-type:y mandatory;overflow-y:auto;height:100svh;scroll-padding-top:var(--header-h);}
.pane{scroll-snap-align:start;min-height:100svh;padding:calc(var(--header-h)+24px) var(--pad) var(--pad);display:grid;place-items:center;}
.inner{width:100%;max-width:720px;margin:0 auto;overflow-x:hidden;}
.title{text-align:center;margin:0 0 8px;font-size:clamp(28px,6vw,36px);font-weight:700;}
.hero{text-align:center;color:var(--muted);max-width:40ch;margin:0 auto;font-size:clamp(16px,3.9vw,18px);}
.label{text-align:center;font-weight:600;margin-bottom:8px;display:block;}
.av-input{width:min(420px,90vw);font-size:18px;padding:14px 16px;border:2px solid var(--blue);border-radius:12px;display:block;margin:0 auto;text-align:center;}
.zillow-note{text-align:center;color:var(--muted);font-size:13px;margin-top:6px;}

/* --- Adjustments from your request --- */
/* Center “Enter your home's assessed value” and Zillow note block */
#s2 .inner {
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
}
#s2 .label {
  margin-bottom: 6px;
}
#s2 .zillow-note {
  margin-top: 6px;
}

/* Center Taxes Paid card */
#s3 .inner {
  display: flex;
  justify-content: center;
  align-items: center;
}

/* --- Animated Dollar --- */
.hero .dollar{
  color:var(--green);
  display:inline-block;
  animation:softShimmer 3s ease-in-out 2;
  cursor:pointer;
}
.hero .dollar:hover{
  animation:softShimmer 2s ease-in-out infinite;
}
@keyframes softShimmer{
  0%,100%{opacity:1;text-shadow:none;}
  25%{opacity:0.8;text-shadow:0 0 4px var(--green);}
  50%{opacity:1;text-shadow:0 0 10px var(--green),0 0 20px var(--green);}
  75%{opacity:0.9;text-shadow:0 0 6px var(--green);}
}

/* --- Cards --- */
.stats-card{border:1px solid #e5e5e5;border-radius:14px;padding:24px 20px;width:100%;max-width:460px;background:#fff;display:flex;flex-direction:column;gap:18px;text-align:center;}
.stats-card hr{border:none;border-top:1px solid #eee;margin:8px 0;}
.kv .k{font-size:16px;color:var(--muted);}
.kv .v{font-size:20px;font-weight:700;color:var(--text);}
.kv.mid .k{font-weight:700;color:var(--text);}
.kv.mid .v{font-size:24px;font-weight:800;color:#000;}
.kv .v.red{color:var(--red);}
.kv .v.blue{color:var(--blue);}

/* --- Underline Animation --- */
.underline{position:relative;display:inline-block;}
.underline::after{
  content:"";position:absolute;bottom:0;left:0;width:0;height:2px;background:currentColor;
  transition:width .5s ease;
}
.underline.red::after{
  background:var(--red);
  animation:underlineGrow .5s ease forwards;
  animation-delay:.5s;
}
.underline.blue::after{
  background:var(--blue);
  animation:underlineGrow .5s ease forwards;
  animation-delay:1.5s;
}
@keyframes underlineGrow{from{width:0;}to{width:100%;}}

/* --- Chart --- */
.chart{width:100%;max-width:680px;height:min(58vh,520px);padding:28px 10px 40px;border:1px solid #eee;border-radius:var(--radius);overflow-x:auto;overflow-y:hidden;white-space:nowrap;position:relative;}
.chart::-webkit-scrollbar{height:6px;}
.chart::-webkit-scrollbar-thumb{background:#ccc;border-radius:3px;}
.chart .bars{display:flex;align-items:flex-end;gap:8px;height:100%;}
.bar{position:relative;min-width:55px;height:0;background:var(--blue);transition:height .8s ease-out;}
.bar.red{background:var(--red);}
.bar .label{position:absolute;left:50%;transform:translate(-50%,0);bottom:calc(100% + 6px);font-size:12px;padding:2px 4px;border-radius:4px;background:rgba(240,240,240,.8);color:inherit;opacity:0;transition:opacity .4s ease-out .8s;}
.bar.show .label{opacity:1;}
.bar.red .label{color:var(--red);}
.bar.blue .label{color:var(--blue);}
.bar .year{position:absolute;bottom:-22px;left:50%;transform:translateX(-50%) rotate(-45deg);font-size:11px;color:var(--muted);}

/* --- Legend --- */
.legend{text-align:center;margin-top:20px;opacity:0;transform:translateY(6px);transition:opacity .3s,transform .3s;}
.legend.show{opacity:1;transform:none;}
.legend-row{display:block;margin:6px 0;}
.swatch{width:14px;height:14px;border-radius:3px;display:inline-block;vertical-align:middle;}
.swatch-red{background:var(--red);}
.swatch-blue{background:var(--blue);}
.legend-text{font-size:14px;color:#333;margin-left:4px;}
.chart-note{text-align:center;color:var(--muted);font-size:12px;margin-top:10px;max-width:420px;margin-inline:auto;line-height:1.3;}

/* --- Share --- */
.section-title{text-align:center;font-size:20px;margin:0 0 14px;}
.share-row{display:flex;align-items:center;justify-content:center;gap:16px;flex-wrap:wrap;}
.share-btn{width:34px;height:34px;display:grid;place-items:center;border-radius:8px;background:#f7f9fc;border:1px solid #eef3f9;}
.share-btn .icon{width:18px;height:18px;fill:var(--blue);}
.cta{background:var(--blue-light);padding:16px;border-radius:12px;margin-top:28px;text-align:center;}
.cta-link{color:var(--blue);font-weight:700;text-decoration:none;font-size:18px;}
.cta-link:hover{text-decoration:underline;}

/* --- Misc --- */
.interactive{opacity:0;transform:translateY(8px);transition:opacity .36s,transform .36s;}
.interactive.is-visible{opacity:1;transform:none;}
.counter{position:fixed;right:10px;bottom:8px;font-size:11px;color:#fff;user-select:none;pointer-events:none;z-index:70;}

/* --- Responsive Chart --- */
@media (min-width:1024px){
  .inner{max-width:1100px;}
  .chart{max-width:1100px;width:min(1100px,96vw);overflow-x:hidden;white-space:normal;}
  .chart .bars{gap:10px;justify-content:center;}
  .bar{min-width:48px;}
}
/* === Nudging Down Arrow === */
.nudge-down {
  position: fixed;
  bottom: 0px;
  left: 0;
  width: 100%;
  display: flex;
  justify-content: center;
  font-size: 38px;               /* larger */
  line-height: 1;
  color: rgba(136,136,136,0.6);  /* softer translucent gray */
  opacity: 0;
  z-index: 90;
  padding: 8px 0;
  background: transparent;
  user-select: none;
  text-align: center;
  transition: opacity 0.35s ease;
  pointer-events: none;          /* prevents blocking scroll */
  touch-action: none;
  -webkit-tap-highlight-color: transparent;
}

.nudge-down.show {
  opacity: 1;
  animation: pulse 1.6s ease-in-out infinite;
}

.nudge-down.show span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 56px;                   /* slightly wider target */
  height: 56px;
  border-radius: 50%;
  background: rgba(255,255,255,0); /* invisible background */
  pointer-events: auto;          /* clickable only on desktop (see JS) */
  cursor: pointer;
  font-weight: 600;
  transform: scaleY(1.2);        /* makes "V" shape look more like arrow */
}

/* Gentle pulsing */
@keyframes pulse{
  0%{ transform:scale(1); opacity:1; }
  50%{ transform:scale(1.08); opacity:0.85; }
  100%{ transform:scale(1); opacity:1; }
}

/* === Mobile fine control: move inner content vertically === */
@media (max-width: 768px) {
  #s1 .inner { transform: translateY(-0px); }  /* move up */
  #s2 .inner { transform: translateY(-40px); }  /* move up more */
  #s3 .inner { transform: translateY(-40px); }
  #s4 .inner { transform: translateY(-40px); }  /* chart + note area higher */
  #s5 .inner { transform: translateY(-30px); }
}

.inner {
  transition: transform 0.4s ease;
}