/* הנחת ארנונה למילואים. The page borrows the shell, strip, tiles, FAQ, closing and footer from alenu.css;
   this file holds only what is particular to it: the hero's stamp, the documents and the checks. */

/* ---------- hero ---------- */
.miluim .hero-copy{flex:0 0 49%;width:49%;padding-inline:clamp(28px,3.4vw,56px) clamp(16px,1.6vw,28px)}
.miluim .hero h1{font-size:clamp(42px,5vw,76px);font-weight:900;line-height:1.1;letter-spacing:-.03em}
.miluim .hero h1 span{display:block;white-space:nowrap}
.miluim .hero h1 em{font-style:normal;color:var(--yellow)}
.miluim .hero-lead{font-size:clamp(20px,1.65vw,24px);line-height:1.4;margin-top:20px}
.m-hero-detail{font-size:18px;line-height:1.6;margin-top:12px}
.m-hero-retro{font-size:17px;line-height:1.6;margin-top:12px;color:var(--yellow)}
.m-who{list-style:none;display:flex;flex-wrap:wrap;gap:8px;padding:0;margin:16px 0 0}
.m-who li{padding:5px 14px;border-radius:999px;background:rgb(255 255 255 / 13%);font-size:16px;font-weight:700;line-height:1.5;white-space:nowrap}
.miluim .hero-price{font-size:22px;margin:22px 0 14px;font-weight:500}
.miluim .hero-price strong{font-size:46px;letter-spacing:-.02em;margin-inline-end:4px}
.miluim .hero-cta{min-height:74px}
.m-note{margin-top:12px;font-size:15.5px;line-height:1.5;color:#e4eeff}

/* The stage: a lighter disc lifts the paper off the shell. */
.m-stage{position:relative;flex:1 1 auto;min-width:0;display:grid;place-items:center;padding:12px clamp(4px,1.2vw,20px) 12px 0;isolation:isolate}
.m-stage::before{content:"";position:absolute;z-index:-1;inset-block-start:50%;inset-inline-start:52%;width:min(92%,640px);aspect-ratio:1;border-radius:50%;background:#1d6ce6;transform:translate(50%,-50%)}
.m-art{--rise:-205%;position:relative;width:100%;max-width:800px;aspect-ratio:1878/1330}
.m-sheet{position:absolute;inset:0;filter:drop-shadow(0 26px 30px rgb(2 28 86 / 34%))}
.m-base{width:100%;height:100%}
.m-ink{position:absolute;left:23.855%;top:53.233%;width:22.311%;height:auto;max-width:none}
.m-stamp{position:absolute;left:21.832%;top:29.248%;width:26.145%;height:auto;max-width:none;opacity:0;transform-origin:50% 92%;pointer-events:none;filter:drop-shadow(0 18px 18px rgb(2 28 86 / 30%));will-change:transform,opacity}
.m-cast{position:absolute;left:21%;top:52%;width:28%;aspect-ratio:1.5;border-radius:50%;background:radial-gradient(closest-side,rgb(4 30 90 / 36%),rgb(4 30 90 / 0));opacity:0;pointer-events:none}
/* The ink waits for the stamp. If the script never runs it appears anyway; reduced motion shows it at once. */
.js .m-ink{opacity:0;animation:m-show 1ms 3s forwards}
.js .m-art.done .m-ink{opacity:1;animation:none}
.js .m-art.armed .m-ink{opacity:0;animation:none}
.js .m-art.armed.play .m-ink{animation:m-ink 1.4s step-end both}
.m-art.play .m-stamp{animation:m-stamp 1.4s both}
.m-art.play .m-cast{animation:m-cast 1.4s both}
.m-art.play .m-sheet{animation:m-thud 1.4s both}
@keyframes m-show{to{opacity:1}}
@keyframes m-stamp{
  0%{opacity:0;transform:translate3d(-4%,var(--rise),0) rotate(-5deg);animation-timing-function:cubic-bezier(.55,0,.95,.5)}
  5%{opacity:1}
  30%{opacity:1;transform:none;animation-timing-function:ease-out}
  34%{opacity:1;transform:scale(1.03,.95)}
  43%{opacity:1;transform:none;animation-timing-function:cubic-bezier(.55,0,.2,1)}
  88%{opacity:1}
  100%{opacity:0;transform:translate3d(5%,var(--rise),0) rotate(5deg)}
}
@keyframes m-ink{0%{opacity:0}31%{opacity:1}100%{opacity:1}}
@keyframes m-cast{
  0%{opacity:0;transform:scale(1.5)}
  30%{opacity:1;transform:none;animation-timing-function:cubic-bezier(.16,1,.3,1)}
  43%{opacity:1;transform:none}
  70%,100%{opacity:0;transform:scale(1.5)}
}
@keyframes m-thud{
  0%,29.9%{transform:none}
  32%{transform:translateY(5px) scale(1.004)}
  46%,100%{transform:none}
}

/* ---------- monthly savings and conditional retro example ---------- */
.m-savings {
  background: var(--soft);
}
.m-savings .lede {
  max-width: 58ch;
}
.m-savings-figures {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 28px;
  margin: 36px 0 30px;
}
.m-savings-figures > div {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 14px 0;
}
.m-savings-figures dt {
  font-size: 18px;
  font-weight: 500;
}
.m-savings-figures dd {
  margin: 0;
  font-size: clamp(44px, 5.5vw, 72px);
  font-weight: 900;
  line-height: 1.2;
  color: var(--blue);
  font-variant-numeric: tabular-nums;
}
.m-savings-figures dd span {
  font-size: .55em;
}
.m-savings-figures .m-savings-retro {
  border-inline-start: 3px solid var(--blue);
  padding-inline-start: 28px;
}
.m-retro-copy h3 {
  font-size: 24px;
  line-height: 1.35;
}
.m-retro-copy p {
  margin-top: 8px;
  max-width: 64ch;
  color: var(--ink-soft);
}
.m-savings-note {
  margin-top: 18px;
  font-size: 14px;
  line-height: 1.65;
  color: var(--muted);
  max-width: 92ch;
}

/* ---------- the two documents ---------- */
.m-docs{background:var(--sun)}
.m-docs .split{grid-template-columns:.74fr 1.26fr;gap:48px}
.m-sometimes{margin-top:34px;font-size:17px;font-weight:700;color:var(--ink-soft)}
.m-extras{list-style:none;display:flex;flex-wrap:wrap;gap:6px 20px;padding:0;margin:8px 0 0}
.m-extras li{display:flex;align-items:center;gap:8px;font-size:16.5px;font-weight:500;color:var(--ink-soft)}
.m-extras img{width:50px;height:50px;margin-inline-start:-4px}
.m-doclist{list-style:none;display:grid;grid-template-columns:1fr 1fr;gap:20px;padding:0;margin:0;text-align:center}
.m-doc{display:grid;place-items:end center;height:270px;margin-block-end:14px}
.m-doc img{width:100%;height:100%;object-fit:contain;object-position:50% 100%}
.m-doclist b{display:block;font-size:22px;font-weight:800;line-height:1.3}
.m-doclist small{display:block;font-size:16px;line-height:1.5;color:var(--ink-soft);margin-top:3px}

/* ---------- what we check ---------- */
.m-check .split{gap:56px}
.m-service-list{list-style:none;padding:0;margin:24px 0 0}
.m-service-list li{padding:16px 0;border-top:1px solid var(--line)}
.m-service-list h3{font-size:22px;line-height:1.35}
.m-service-list p{font-size:17px;line-height:1.65;color:var(--ink-soft);margin-top:6px}
.m-check .art{max-width:560px;margin-inline:auto}

/* ---------- closing ---------- */
.miluim .closing h2 span{color:var(--yellow)}
.miluim .closing-shell{padding-block:28px}
.miluim .closing-art{max-width:440px}
.miluim .closing-art img{filter:none}
.miluim .closing .alt{font-size:16px}
.m-closing-lead{font-size:20px;line-height:1.6;margin:16px 0 24px}

/* ---------- breakpoints ---------- */
@media (max-width:1240px){
  .miluim .hero-cta{font-size:22px}
  .m-who li{font-size:15px;padding-inline:12px}
}
@media (min-width:761px) and (max-width:1100px){
  .miluim .hero-copy{flex:none;width:100%;padding:34px 40px 8px}
  .miluim .hero h1{font-size:clamp(46px,7vw,62px)}
  .miluim .hero-lead{font-size:23px}
  .m-stage{flex:none;width:100%;padding:0 24px 16px}
  .m-art{max-width:640px}
  .m-stage::before{inset-inline-start:50%;width:min(80%,520px)}
}
@media (max-width:1100px){
  .m-docs .split{grid-template-columns:1fr;gap:36px}
  .m-doclist{max-width:640px;margin-inline:auto;width:100%}
}
@media (max-width:900px){
  .m-check .split{grid-template-columns:1fr;gap:28px}
  .m-check .copy{display:contents}
  .m-check h2,.m-check .lede{order:1}
  .m-check .art{order:3;width:100%}
  .m-check .m-service-list{order:2;margin:0;width:100%}
  .m-check .lede{margin-top:-14px}
  .miluim .closing-shell{grid-template-columns:1fr;gap:6px}
  .miluim .closing-art{max-width:320px}
}
@media (max-width:760px){
  .miluim .hero{padding:0 0 4px;background:#fff}
  .miluim .hero-shell{background:#0759d9;border-radius:0 0 23px 23px;overflow:hidden}
  .miluim .hero-copy{flex:none;width:100%;padding:22px 20px 0;text-align:right}
  .miluim .hero-copy::after{content:none}
  .miluim .hero h1{font-size:clamp(33px,10.2vw,44px);line-height:1.1}
  .miluim .hero-lead{font-size:18px;text-align:right;margin-top:12px}
  .m-hero-detail,.m-hero-retro{font-size:16px;line-height:1.5;margin-top:10px}
  .m-savings-figures{grid-template-columns:1fr 1fr;gap:18px;margin-block:24px}
  .m-savings-figures dt{font-size:15px}
  .m-savings-figures .m-savings-retro{grid-column:1 / -1;padding-inline-start:18px}
  .m-retro-copy h3{font-size:21px}
  .m-service-list h3{font-size:20px}
  .m-service-list p{font-size:16px}
  .m-closing-lead{font-size:18px}
  .m-who{margin-top:12px;gap:6px}
  .m-who li{font-size:13.5px;padding:4px 10px}
  .miluim .hero-price{font-size:17px;text-align:right;margin:14px 0 10px}
  .miluim .hero-price strong{font-size:34px;vertical-align:-3px}
  .miluim .hero-cta{min-height:58px;border-radius:13px;font-size:19px;padding-inline:18px}
  .m-note{font-size:14px;margin-top:9px}
  .m-stage{flex:none;width:100%;padding:4px 8px 10px}
  .m-art{--rise:-92%}
  .m-stage::before{inset-inline-start:50%;width:84%}
  .m-sheet{filter:drop-shadow(0 14px 16px rgb(2 28 86 / 32%))}
  .m-doc{height:150px;margin-block-end:8px}
  .m-doclist{gap:10px}
  .m-doclist b{font-size:17.5px}
  .m-doclist small{font-size:14px}
  .m-sometimes{margin-top:20px;font-size:16px}
  .m-extras li{font-size:15.5px}
  .m-extras img{width:42px;height:42px}
  .m-check .lede{margin-top:-10px}
  .miluim .closing h2{font-size:36px}
  .miluim .closing .button{min-width:0;width:100%}
}
@media (max-width:360px){
  .m-who li{font-size:12.5px}
  .m-doc{height:128px}
}
@media (prefers-reduced-motion:reduce){
  .js .m-art .m-ink{opacity:1;animation:none}
  .m-art.play *{animation:none!important}
}