:root{
  color-scheme: dark;
  direction: rtl;

  --asphalt:#08090B;
  --panel:#0F1114;
  --panel-2:#15181C;
  --panel-3:#1C2026;
  --line:#272C34;
  --line-soft:#1A1E24;
  --text:#F0EDE7;
  --muted:#A8AFB8;
  --muted-2:#8A939E;
  --gold:#D4A85C;
  --gold-soft:#F2CA77;
  --electric:#0867FF;
  --electric-soft:#4D93FF;
  --wa:#1A9E4F;
  --wa-ink:#FFFFFF;
  --shift-a:#F7D89A;
  --shift-b:#D4A85C;
  --shift-c:#0867FF;
  --shift:linear-gradient(118deg,var(--shift-a) 0%,var(--shift-b) 30%,#4D93FF 72%,#7FB6FF 100%);

  --f-display:"Frank Ruhl Libre","Times New Roman",serif;
  --f-ui:"Heebo","Segoe UI",system-ui,sans-serif;

  --maxw:1220px;
  --gut:20px;
  --hdr:64px;

  --r-sm:10px; --r-md:16px; --r-lg:22px;
  --t-fast:.18s cubic-bezier(.4,0,.2,1);
  --t-med:.32s cubic-bezier(.4,0,.2,1);
}

*{box-sizing:border-box}
body{
  margin:0; color:var(--text);
  background:
    radial-gradient(135% 85% at 50% 26%, rgba(8,9,11,0) 26%, rgba(4,5,7,.55) 100%),
    url("/assets/bg-tile.webp?v=1d0e6039") center / 680px repeat fixed,
    var(--asphalt);
  font-family:var(--f-ui); font-size:17px; line-height:1.7; font-weight:400;
  -webkit-font-smoothing:antialiased;
}
body::before{
  content:""; position:fixed; inset:0; z-index:0; pointer-events:none; opacity:.03;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");
}
h1,h2,h3,h4{font-family:var(--f-display); font-weight:700; line-height:1.14; text-wrap:balance; margin:0}
p{margin:0}
a{color:inherit}
img,svg{max-width:100%}
button,input,select,textarea{font:inherit; color:inherit}
:focus-visible{outline:2px solid var(--gold); outline-offset:3px; border-radius:6px}
::selection{background:var(--gold); color:#0A0B0D}

.wrap{max-width:var(--maxw); margin-inline:auto; padding-inline:var(--gut); position:relative; z-index:2}
section{padding-block:clamp(60px,8.5vw,112px); scroll-margin-top:calc(var(--hdr) + 12px + env(safe-area-inset-top,0px)); position:relative}
.rule{border-top:1px solid var(--line-soft)}

.skip{position:absolute; inset-inline-start:-9999px; top:0; z-index:200; background:var(--gold); color:#0A0B0D; padding:12px 20px; border-radius:0 0 var(--r-sm) 0; font-weight:700}
.skip:focus{inset-inline-start:0}

.eyebrow{
  font-family:var(--f-ui); font-size:12px; font-weight:500; letter-spacing:.2em;
  color:var(--gold); display:inline-flex; align-items:center; gap:12px; text-transform:uppercase;
}
.eyebrow::before{content:""; width:30px; height:1px; background:var(--shift)}
.sec-head{max-width:64ch}
.sec-head h2{font-size:clamp(30px,5vw,50px); font-weight:900; margin-top:18px; letter-spacing:-.02em}
.sec-head .lede{margin-top:18px; color:var(--muted); font-size:clamp(16.5px,2vw,19px)}

/* ---------- buttons ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  padding:14px 26px; border-radius:100px; text-decoration:none; position:relative;
  font-family:var(--f-ui); font-weight:500; font-size:16px; border:1px solid transparent;
  cursor:pointer; white-space:nowrap; overflow:hidden;
  transition:transform var(--t-fast), box-shadow var(--t-med), background var(--t-med), border-color var(--t-med), color var(--t-med);
}
.btn svg{width:18px; height:18px; flex:none}
.btn:active{transform:translateY(1px) scale(.99)}
.btn-wa{background:var(--wa); color:var(--wa-ink); font-weight:700; box-shadow:0 10px 30px -8px rgba(26,158,79,.6)}
.btn-wa:hover{background:#17AE55; box-shadow:0 16px 40px -10px rgba(26,158,79,.75); transform:translateY(-2px)}
.btn-gold{background:var(--gold); color:#100C05; font-weight:700; box-shadow:0 10px 30px -10px rgba(201,162,90,.65)}
.btn-gold:hover{background:var(--gold-soft); transform:translateY(-2px)}
.btn-ghost{border-color:var(--line); background:rgba(255,255,255,.02); color:var(--text)}
.btn-ghost:hover{border-color:var(--gold); color:var(--gold-soft); transform:translateY(-2px)}
.btn-sm{padding:10px 18px; font-size:15px}
.btn[disabled]{opacity:.5; pointer-events:none}

/* ---------- header ---------- */
.hdr{
  position:sticky; top:env(safe-area-inset-top,0px); z-index:90;
  background:rgba(8,9,11,.86); backdrop-filter:blur(12px);
  border-bottom:1px solid var(--line-soft);
}
.hdr-in{display:flex; align-items:center; gap:16px; height:var(--hdr)}
.brand{display:flex; align-items:center; gap:12px; text-decoration:none; margin-inline-end:auto; flex:none}
.brand-mark{
  width:42px; height:42px; flex:none; display:block;
  filter:drop-shadow(0 4px 16px rgba(8,103,255,.38));
}
.brand-mark img{width:100%; height:100%; display:block}
.brand-name{font-family:var(--f-display); font-weight:900; font-size:21px; line-height:1}
.brand-sub{font-family:var(--f-ui); font-size:10.5px; font-weight:500; letter-spacing:.24em; color:var(--muted-2); line-height:1; margin-top:5px}
.nav{display:flex; gap:2px; flex:none}
.nav a{
  text-decoration:none; font-size:15px; color:var(--muted); padding:8px 11px; border-radius:100px; white-space:nowrap;
  transition:color var(--t-fast), background var(--t-fast);
}
.nav a:hover,.nav a.on{color:var(--text); background:rgba(255,255,255,.05)}
.status{display:inline-flex; align-items:center; gap:7px; font-size:13.5px; color:var(--muted); flex:none}
.dot{width:7px; height:7px; border-radius:50%; background:var(--muted-2); flex:none}
.dot.open{background:#2ED573; box-shadow:0 0 0 4px rgba(46,213,115,.18)}
.burger{
  display:none; width:42px; height:42px; border-radius:11px; border:1px solid var(--line);
  background:var(--panel-2); cursor:pointer; place-items:center; flex:none;
}
.burger svg{width:20px; height:20px}

/* drawer */
.drawer{position:fixed; inset:0; z-index:120; display:none}
.drawer.on{display:block}
.drawer-bg{position:absolute; inset:0; background:rgba(4,5,7,.72); backdrop-filter:blur(4px)}
.drawer-panel{
  position:absolute; inset-block:0; inset-inline-end:0; width:min(86vw,360px);
  background:var(--panel); border-inline-start:1px solid var(--line);
  padding:calc(18px + env(safe-area-inset-top,0px)) 22px calc(22px + env(safe-area-inset-bottom,0px));
  display:flex; flex-direction:column; gap:6px; overflow-y:auto;
  animation:slideIn .28s cubic-bezier(.4,0,.2,1);
}
@keyframes slideIn{from{transform:translateX(-100%)}to{transform:none}}
.drawer-top{display:flex; align-items:center; justify-content:space-between; margin-bottom:14px}
.drawer-close{width:40px; height:40px; border-radius:11px; border:1px solid var(--line); background:var(--panel-2); cursor:pointer; display:grid; place-items:center}
.drawer-close svg{width:18px; height:18px}
.drawer-panel a.dl{
  text-decoration:none; padding:14px 14px; border-radius:var(--r-sm); font-size:17px;
  border:1px solid transparent; transition:background var(--t-fast), border-color var(--t-fast);
}
.drawer-panel a.dl:hover{background:var(--panel-2); border-color:var(--line-soft)}
.drawer-cta{margin-top:auto; display:grid; gap:10px; padding-top:18px}

/* ---------- hero ---------- */
.hero{position:relative; overflow:hidden}
.hero::before{
  content:""; position:absolute; inset:-25% -15% auto -15%; height:130%; pointer-events:none;
  background:
    radial-gradient(52% 46% at 74% 20%, rgba(8,103,255,.20), transparent 70%),
    radial-gradient(48% 42% at 20% 8%, rgba(77,147,255,.13), transparent 72%),
    radial-gradient(64% 52% at 50% 92%, rgba(201,162,90,.14), transparent 70%);
}
.hero-in{position:relative; padding-block:clamp(44px,6vw,76px) clamp(36px,5vw,60px)}
.hero h1{font-size:clamp(40px,7.6vw,82px); font-weight:900; letter-spacing:-.025em; margin-top:22px; max-width:15ch}
.shine{
  background:var(--shift); -webkit-background-clip:text; background-clip:text; color:transparent;
  background-size:220% 100%; animation:flow 11s ease-in-out infinite;
}
@keyframes flow{0%,100%{background-position:0% 50%}50%{background-position:100% 50%}}
.hero-lead{margin-top:20px; max-width:50ch; color:var(--muted); font-size:clamp(17px,2.1vw,19.5px)}
.hero-cta{display:flex; flex-wrap:wrap; gap:12px; margin-top:30px}
.hero-micro{margin-top:16px; font-size:14.5px; color:var(--muted); display:flex; flex-wrap:wrap; gap:6px 18px}
.hero-micro span{display:inline-flex; align-items:center; gap:7px}
.hero-micro svg{width:15px; height:15px; color:var(--gold); flex:none}

/* ---------- finish swatches (used by the try-on) ---------- */
.swatches{
  display:flex; gap:10px; overflow-x:auto; padding:16px clamp(14px,3vw,26px) 18px;
  border-top:1px solid var(--line-soft); scrollbar-width:thin;
}
.sw{
  flex:none; width:74px; cursor:pointer; background:none; border:0; padding:0; text-align:center;
}
.sw-name{min-height:30px}
.sw-chip{
  /* a <span> is display:inline, where width and height are ignored.
     Without this line the colour chip collapses to a hairline and the
     whole colour picker shows no colour at all. */
  display:block;
  width:74px; height:52px; border-radius:11px; border:1px solid var(--line);
  position:relative; overflow:hidden; transition:transform var(--t-fast), border-color var(--t-fast), box-shadow var(--t-med);
}
.sw-chip::after{content:""; position:absolute; inset:0;
  background:linear-gradient(200deg,rgba(255,255,255,.34),transparent 42%,rgba(0,0,0,.30))}
/* the sheen tells the customer gloss from satin from matte at a glance */
.sw-chip.is-satin::after{background:linear-gradient(200deg,rgba(255,255,255,.14),transparent 48%,rgba(0,0,0,.22))}
.sw-chip.is-matte::after{background:linear-gradient(200deg,rgba(255,255,255,.05),transparent 55%,rgba(0,0,0,.16))}
.sw:hover .sw-chip{transform:translateY(-3px); border-color:var(--muted-2)}
.sw[aria-pressed="true"] .sw-chip{border-color:var(--gold); box-shadow:0 0 0 2px rgba(201,162,90,.3), 0 10px 24px -10px rgba(201,162,90,.5)}
.sw-name{display:block; font-size:12px; color:var(--muted); margin-top:8px; line-height:1.3}
.sw[aria-pressed="true"] .sw-name{color:var(--gold-soft)}

/* ---------- trust strip ---------- */
.trust{display:grid; grid-template-columns:repeat(4,1fr); gap:1px; background:var(--line-soft); border-block:1px solid var(--line-soft)}
.trust-i{background:var(--asphalt); padding:22px 18px; text-align:center}
.trust-i b{display:block; font-family:var(--f-display); font-size:clamp(23px,3.2vw,32px); font-weight:900; color:var(--gold-soft); font-variant-numeric:tabular-nums; line-height:1.2}
.trust-i span{font-size:13.5px; color:var(--muted); display:block; margin-top:4px}

/* ---------- services ---------- */
.svc{display:grid; gap:16px; margin-top:clamp(34px,4.5vw,54px)}
.svc-row{
  display:grid; grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr); gap:clamp(20px,3.5vw,48px);
  background:var(--panel); border:1px solid var(--line-soft); border-radius:var(--r-lg);
  padding:clamp(22px,3.2vw,36px); position:relative; overflow:hidden;
  transition:border-color var(--t-med), transform var(--t-med);
}
.svc-row::before{content:""; position:absolute; inset-inline-start:0; top:22px; bottom:22px; width:2px; background:var(--shift); opacity:0; transition:opacity var(--t-med)}
.svc-row:hover{border-color:var(--line); transform:translateY(-3px)}
.svc-row:hover::before{opacity:1}
.svc-en{font-size:12px; letter-spacing:.16em; color:var(--gold); font-weight:500; margin-bottom:8px}
.svc-row h3{font-size:clamp(23px,3vw,30px); font-weight:900}
.svc-row .body{margin-top:14px; color:var(--muted); font-size:16.5px}
.tags{display:flex; flex-wrap:wrap; gap:8px; margin-top:20px}
.tag{font-size:13px; color:var(--muted); border:1px solid var(--line); border-radius:100px; padding:5px 13px; background:rgba(255,255,255,.015)}
.facts{display:grid; gap:1px; background:var(--line-soft); border:1px solid var(--line-soft); border-radius:var(--r-md); overflow:hidden; align-self:start}
.fact{background:var(--panel-2); display:flex; justify-content:space-between; gap:14px; padding:14px 17px; font-size:14.5px}
.fact span{color:var(--muted-2)}
.fact b{font-weight:500; font-variant-numeric:tabular-nums}
.fact em{font-style:normal; color:var(--gold); font-size:12px}

/* ---------- estimator ---------- */
.est{border:1px solid var(--line); border-radius:var(--r-lg); background:var(--panel); overflow:hidden; margin-top:clamp(32px,4.5vw,48px)}
.est-bar{display:flex; gap:2px; background:var(--line-soft); padding:1px}
.est-step{
  flex:1; background:var(--panel-2); padding:13px 8px; text-align:center; font-size:12.5px;
  color:var(--muted-2); font-weight:500; transition:color var(--t-med), background var(--t-med);
  display:flex; align-items:center; justify-content:center; gap:7px; min-width:0;
}
.est-step i{
  font-style:normal; width:21px; height:21px; border-radius:50%; border:1px solid currentColor;
  display:grid; place-items:center; font-size:11px; flex:none;
}
.est-step.done{color:var(--gold)}
.est-step.done i{background:var(--gold); color:#100C05; border-color:var(--gold)}
.est-step.now{color:var(--text); background:var(--panel-3)}
.est-step span{overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.est-body{padding:clamp(22px,3.2vw,36px)}
.est-q{font-family:var(--f-display); font-size:clamp(21px,2.8vw,27px); font-weight:700}
.est-hint{color:var(--muted); font-size:15px; margin-top:8px}
.opts{display:grid; grid-template-columns:repeat(auto-fit,minmax(180px,1fr)); gap:11px; margin-top:22px}
.opt{
  text-align:start; background:var(--panel-2); border:1px solid var(--line); border-radius:var(--r-md);
  padding:16px 17px; cursor:pointer; transition:border-color var(--t-fast), transform var(--t-fast), background var(--t-fast);
}
.opt:hover{border-color:var(--muted-2); transform:translateY(-2px)}
.opt[aria-pressed="true"]{border-color:var(--gold); background:rgba(201,162,90,.08)}
.opt b{display:block; font-size:16.5px; font-weight:500}
.opt span{display:block; font-size:13.5px; color:var(--muted-2); margin-top:4px}
.est-nav{display:flex; gap:10px; margin-top:24px; flex-wrap:wrap; align-items:center}
.est-back{background:none; border:0; color:var(--muted); cursor:pointer; font-size:15px; padding:10px 4px; text-decoration:underline; text-underline-offset:4px}
.est-back:hover{color:var(--text)}

.result{text-align:center; padding-block:6px}
.result .tagline{font-size:14px; letter-spacing:.16em; color:var(--gold); font-weight:500}
.price{
  font-family:var(--f-display); font-weight:900; font-variant-numeric:tabular-nums;
  font-size:clamp(34px,7vw,60px); margin-top:12px; letter-spacing:-.02em; line-height:1.1;
  background:var(--shift); -webkit-background-clip:text; background-clip:text; color:transparent;
}
.price-note{color:var(--muted); font-size:15px; margin-top:12px; max-width:52ch; margin-inline:auto}
.recap{
  display:flex; flex-wrap:wrap; gap:8px; justify-content:center; margin-top:20px;
}
.recap .tag{background:var(--panel-2)}

/* form inside estimator */
.fields{display:grid; gap:14px; margin-top:22px; text-align:start}
.row2{display:grid; grid-template-columns:1fr 1fr; gap:14px}
.field label{display:block; font-size:13.5px; color:var(--muted); margin-bottom:7px; font-weight:500}
.field input,.field textarea{
  width:100%; background:var(--panel-2); border:1px solid var(--line); border-radius:12px;
  padding:13px 15px; font-size:16px; transition:border-color var(--t-fast), background var(--t-fast);
}
.field textarea{min-height:92px; resize:vertical}
.field input:focus,.field textarea:focus{border-color:var(--gold); background:var(--panel-3); outline:none}
.field input[aria-invalid="true"]{border-color:#E5484D}
.err{display:block; font-size:13px; color:#FF8A8E; margin-top:6px; min-height:0}
.consent{display:flex; gap:11px; align-items:flex-start; font-size:14px; color:var(--muted); cursor:pointer}
.consent input{width:19px; height:19px; margin-top:3px; accent-color:var(--gold); flex:none}

.drop{
  border:1px dashed var(--line); border-radius:var(--r-md); padding:18px; text-align:center;
  cursor:pointer; transition:border-color var(--t-fast), background var(--t-fast); background:var(--panel-2);
}
.drop:hover{border-color:var(--gold); background:var(--panel-3)}
.drop svg{width:26px; height:26px; color:var(--gold); margin-bottom:8px}
.drop b{display:block; font-size:15.5px; font-weight:500}
.drop span{font-size:13.5px; color:var(--muted-2)}
.thumbs{display:flex; flex-wrap:wrap; gap:9px; margin-top:12px}
.thumb{position:relative; width:64px; height:64px; border-radius:10px; overflow:hidden; border:1px solid var(--line)}
.thumb img{width:100%; height:100%; object-fit:cover; display:block}
.thumb button{
  position:absolute; top:3px; inset-inline-end:3px; width:20px; height:20px; border-radius:50%;
  background:rgba(0,0,0,.72); border:0; color:#fff; cursor:pointer; font-size:12px; line-height:1;
  display:grid; place-items:center;
}
.note-box{
  border-inline-start:2px solid var(--gold); background:rgba(201,162,90,.07);
  border-radius:0 10px 10px 0; padding:13px 16px; font-size:14.5px; color:var(--muted); margin-top:18px; text-align:start;
}
.spinner{width:17px; height:17px; border:2px solid rgba(255,255,255,.35); border-top-color:#fff; border-radius:50%; animation:spin .7s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.sent{
  display:grid; gap:14px; justify-items:center; text-align:center; padding-block:10px;
}
.sent-ic{width:60px; height:60px; border-radius:50%; background:rgba(26,158,79,.14); border:1px solid rgba(26,158,79,.4); display:grid; place-items:center}
.sent-ic svg{width:28px; height:28px; color:#2ED573}

/* ---------- before/after ---------- */
.ba{border:1px solid var(--line-soft); border-radius:var(--r-lg); overflow:hidden; background:var(--panel); margin-top:clamp(30px,4vw,46px)}

.t-b{inset-inline-start:14px; color:var(--muted)}
.t-a{inset-inline-end:14px; color:var(--gold-soft)}

/* ---------- gallery ---------- */
.gal{display:grid; grid-template-columns:repeat(auto-fit,minmax(250px,1fr)); gap:14px; margin-top:clamp(30px,4vw,46px)}
.shot{
  position:relative; border:1px solid var(--line-soft); border-radius:var(--r-md); overflow:hidden;
  aspect-ratio:4/3; display:grid; place-items:center; cursor:pointer; padding:0; text-align:start;
  transition:transform var(--t-med), border-color var(--t-med); background:var(--panel);
}
.shot:hover{transform:translateY(-4px); border-color:var(--line)}
.shot .ph{position:absolute; inset:0}
.shot svg.car-mini{width:74%; position:relative; z-index:2; opacity:.85}
.shot::after{content:""; position:absolute; inset:0; z-index:3; background:linear-gradient(to top,rgba(5,6,8,.9),transparent 56%)}
.shot-meta{position:absolute; inset-inline:16px; bottom:14px; z-index:4}
.shot-meta b{display:block; font-size:16px; font-weight:500}
.shot-meta span{font-size:13px; color:var(--muted)}
.shot-zoom{
  position:absolute; top:12px; inset-inline-end:12px; z-index:4; width:32px; height:32px; border-radius:50%;
  background:rgba(0,0,0,.55); border:1px solid rgba(255,255,255,.16); display:grid; place-items:center;
  opacity:0; transition:opacity var(--t-fast);
}
.shot:hover .shot-zoom,.shot:focus-visible .shot-zoom{opacity:1}
.shot-zoom svg{width:15px; height:15px}

.lightbox{position:fixed; inset:0; z-index:140; display:none; place-items:center; padding:24px}
.lightbox.on{display:grid}
.lightbox-bg{position:absolute; inset:0; background:rgba(4,5,7,.9); backdrop-filter:blur(6px)}
.lb-card{position:relative; width:min(100%,900px); background:var(--panel); border:1px solid var(--line); border-radius:var(--r-lg); overflow:hidden}
.lb-vis{aspect-ratio:16/10; display:grid; place-items:center; position:relative}
.lb-vis svg{width:76%; position:relative; z-index:2}
.lb-info{padding:18px 22px; border-top:1px solid var(--line-soft)}
.lb-info b{font-size:18px; font-family:var(--f-display); font-weight:700}
.lb-info p{color:var(--muted); font-size:14.5px; margin-top:5px}
.lb-close{position:absolute; top:12px; inset-inline-end:12px; z-index:5; width:38px; height:38px; border-radius:50%; background:rgba(0,0,0,.6); border:1px solid rgba(255,255,255,.18); cursor:pointer; display:grid; place-items:center}
.lb-close svg{width:17px; height:17px}
.lb-nav{position:absolute; top:50%; transform:translateY(-50%); z-index:5; width:42px; height:42px; border-radius:50%; background:rgba(0,0,0,.55); border:1px solid rgba(255,255,255,.16); cursor:pointer; display:grid; place-items:center}
.lb-prev{inset-inline-end:12px} .lb-next{inset-inline-start:12px}
.lb-nav svg{width:18px; height:18px}

/* ---------- process ---------- */
.steps{display:grid; grid-template-columns:repeat(auto-fit,minmax(215px,1fr)); gap:1px; background:var(--line-soft); border:1px solid var(--line-soft); border-radius:var(--r-md); overflow:hidden; margin-top:clamp(30px,4vw,48px)}
.step{background:var(--panel); padding:26px 22px 28px}
.step-n{font-size:12px; letter-spacing:.2em; color:var(--gold); font-weight:500; display:block; margin-bottom:12px}
.step h4{font-size:19px; font-weight:700}
.step p{margin-top:9px; font-size:14.5px; color:var(--muted)}

/* ---------- compare table ---------- */
.cmp-scroll{overflow-x:auto; margin-top:clamp(30px,4vw,46px); border:1px solid var(--line-soft); border-radius:var(--r-md)}
table.cmp{border-collapse:collapse; width:100%; min-width:560px; background:var(--panel)}
table.cmp th,table.cmp td{padding:15px 18px; border-bottom:1px solid var(--line-soft); text-align:start; font-size:15.5px}
table.cmp thead th{background:var(--panel-2); font-size:13px; letter-spacing:.1em; color:var(--muted-2); font-weight:500}
table.cmp thead th:last-child{color:var(--gold)}
table.cmp td:first-child{color:var(--muted); font-size:14.5px}
table.cmp tr:last-child td{border-bottom:0}
table.cmp td.no{color:var(--muted-2)}
table.cmp td.yes{color:var(--text)}
table.cmp td.yes::before{content:""; display:inline-block; width:15px; height:15px; margin-inline-end:9px; vertical-align:-2px;
  background:var(--gold); border-radius:50%;
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M9 16.2 4.8 12l-1.4 1.4L9 19 21 7l-1.4-1.4z'/%3E%3C/svg%3E") center/contain no-repeat;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M9 16.2 4.8 12l-1.4 1.4L9 19 21 7l-1.4-1.4z'/%3E%3C/svg%3E") center/contain no-repeat;}

/* ---------- reviews ---------- */
.reviews{display:grid; grid-template-columns:repeat(auto-fit,minmax(272px,1fr)); gap:14px; margin-top:clamp(30px,4vw,46px)}
.rv{background:var(--panel); border:1px dashed var(--line); border-radius:var(--r-md); padding:24px 22px; display:flex; flex-direction:column; gap:14px}
.rv .stars{color:var(--line); font-size:15px; letter-spacing:.2em}
.rv .ph-line{height:9px; border-radius:100px; background:var(--panel-3)}
.rv .ph-line.s{width:62%}
.rv footer{display:flex; align-items:center; gap:11px; margin-top:auto}
.rv .av{width:36px; height:36px; border-radius:50%; background:var(--panel-3); flex:none}
.rv .av-lines{flex:1; display:grid; gap:6px}
.rv-badge{
  display:inline-flex; align-items:center; gap:8px; font-size:12.5px; color:var(--gold);
  border:1px solid var(--line); border-radius:100px; padding:5px 13px; background:rgba(201,162,90,.06);
}

/* ---------- faq ---------- */
.faq{margin-top:clamp(30px,4vw,46px); border-top:1px solid var(--line-soft)}
.qa{border-bottom:1px solid var(--line-soft)}
.qa summary{cursor:pointer; list-style:none; padding:22px 0; display:flex; gap:16px; align-items:center; font-size:18px; font-weight:500; transition:color var(--t-fast)}
.qa summary::-webkit-details-marker{display:none}
.qa summary:hover{color:var(--gold-soft)}
.qa summary::after{content:""; margin-inline-start:auto; width:16px; height:16px; flex:none; background:var(--gold); transition:transform var(--t-med);
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M11 5h2v14h-2z'/%3E%3Cpath d='M5 11h14v2H5z'/%3E%3C/svg%3E") center/contain no-repeat;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M11 5h2v14h-2z'/%3E%3Cpath d='M5 11h14v2H5z'/%3E%3C/svg%3E") center/contain no-repeat;}
.qa[open] summary::after{transform:rotate(135deg)}
.qa .ans{padding-bottom:24px; color:var(--muted); max-width:72ch}

/* ---------- contact ---------- */
.contact{background:rgba(14,16,19,.80); border-top:1px solid var(--line-soft)}
.c-grid{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:clamp(28px,5vw,64px); align-items:start}
.lines{display:grid; gap:1px; background:var(--line-soft); border:1px solid var(--line-soft); border-radius:var(--r-md); overflow:hidden; margin-top:26px}
.cl{background:var(--panel-2); padding:17px 19px; display:flex; align-items:center; gap:15px; text-decoration:none; transition:background var(--t-fast)}
a.cl:hover{background:var(--panel-3)}
.cl-ic{width:38px; height:38px; border-radius:11px; border:1px solid var(--line); display:grid; place-items:center; flex:none; color:var(--gold)}
.cl-ic svg{width:18px; height:18px}
.cl b{display:block; font-size:16px; font-weight:500; line-height:1.35}
.cl span{font-size:13.5px; color:var(--muted)}
.map{
  margin-top:16px; border:1px solid var(--line-soft); border-radius:var(--r-md); overflow:hidden;
  aspect-ratio:16/9; position:relative; display:grid; place-items:center; background:var(--panel-2);
}
.map::before{
  content:""; position:absolute; inset:0; opacity:.5;
  background:
    linear-gradient(90deg,transparent 49.6%,var(--line) 49.6%,var(--line) 50.4%,transparent 50.4%),
    linear-gradient(0deg,transparent 49.6%,var(--line) 49.6%,var(--line) 50.4%,transparent 50.4%),
    repeating-linear-gradient(38deg,transparent 0 46px,var(--line-soft) 46px 48px),
    repeating-linear-gradient(-52deg,transparent 0 62px,var(--line-soft) 62px 64px);
}
.map-pin{position:relative; z-index:2; text-align:center}
.map-pin svg{width:30px; height:30px; color:var(--gold)}
.map-pin b{display:block; font-size:15px; margin-top:6px}
.map-pin span{font-size:13px; color:var(--muted)}
.hours-tbl{margin-top:22px; font-size:14.5px}
.hours-tbl div{display:flex; justify-content:space-between; gap:16px; padding:7px 0; border-bottom:1px solid var(--line-soft)}
.hours-tbl div:last-child{border-bottom:0}
.hours-tbl span{color:var(--muted)}
.hours-tbl b{font-weight:500; font-variant-numeric:tabular-nums}
.hours-tbl div.today b{color:var(--gold-soft)}

/* ---------- footer ---------- */
.ftr{border-top:1px solid var(--line-soft); padding-block:38px calc(96px + env(safe-area-inset-bottom,0px))}
.ftr-grid{display:grid; grid-template-columns:1.4fr 1fr 1fr; gap:32px}
.ftr h5{font-size:13px; letter-spacing:.14em; color:var(--muted-2); font-weight:500; font-family:var(--f-ui); margin:0 0 14px}
.ftr ul{list-style:none; margin:0; padding:0; display:grid; gap:9px}
.ftr a{text-decoration:none; color:var(--muted); font-size:15px; transition:color var(--t-fast)}
.ftr a:hover{color:var(--gold-soft)}
.ftr-legal{margin-top:34px; padding-top:22px; border-top:1px solid var(--line-soft); display:flex; flex-wrap:wrap; gap:10px 26px; font-size:13px; color:var(--muted-2)}

/* ---------- try-on (real photo recolor) ---------- */
.tryon{border:1px solid var(--line); border-radius:var(--r-lg); background:var(--panel); overflow:hidden; margin-top:clamp(30px,4vw,46px)}
.tz{
  padding:clamp(34px,6vw,64px) 24px; text-align:center; cursor:pointer; position:relative;
  border:1px dashed var(--line); margin:clamp(14px,2.5vw,22px); border-radius:var(--r-md);
  background:var(--panel-2); transition:border-color var(--t-fast), background var(--t-fast);
}
.tz:hover,.tz.drag{border-color:var(--gold); background:var(--panel-3)}
.tz-ic{width:58px; height:58px; margin:0 auto 14px; border-radius:16px; background:var(--shift); display:grid; place-items:center}
.tz-ic svg{width:27px; height:27px; color:#08090B}
.tz b{display:block; font-family:var(--f-display); font-size:clamp(19px,2.6vw,24px); font-weight:700}
.tz p{margin-top:8px; color:var(--muted); font-size:15.5px; max-width:44ch; margin-inline:auto}
.tz .hint{margin-top:16px; font-size:13.5px; color:var(--muted-2)}

.tw{display:none}
.tw.on{display:block}
.canvas-wrap{
  position:relative; background:#07080A; display:grid; place-items:center;
  min-height:200px; overflow:hidden; touch-action:none;
}
.canvas-wrap canvas{display:block; max-width:100%; height:auto; cursor:crosshair}
.canvas-wrap.pan canvas{cursor:grab}
.cv-badge{
  position:absolute; top:12px; inset-inline-start:12px; z-index:3; font-size:11.5px; letter-spacing:.14em;
  padding:6px 12px; border-radius:100px; background:rgba(0,0,0,.6); border:1px solid rgba(255,255,255,.14); color:var(--gold-soft);
}
.cv-busy{
  position:absolute; inset:0; z-index:4; display:none; align-items:center; justify-content:center;
  background:rgba(7,8,10,.78); gap:11px; flex-direction:row;
}
.cv-busy.on{display:flex}
.cv-busy span{color:var(--muted); font-size:14.5px}

.tools{
  display:flex; flex-wrap:wrap; gap:10px; align-items:center;
  padding:14px clamp(14px,3vw,22px); border-top:1px solid var(--line-soft); border-bottom:1px solid var(--line-soft);
}
.tool{
  display:inline-flex; align-items:center; gap:8px; padding:9px 14px; border-radius:100px; cursor:pointer;
  border:1px solid var(--line); background:var(--panel-2); font-size:14.5px; color:var(--muted);
  transition:border-color var(--t-fast), color var(--t-fast), background var(--t-fast);
}
.tool svg{width:16px; height:16px}
.tool:hover{color:var(--text); border-color:var(--muted-2)}
.tool[aria-pressed="true"]{border-color:var(--gold); color:var(--gold-soft); background:rgba(201,162,90,.1)}
.slider-box{display:flex; align-items:center; gap:10px; font-size:13.5px; color:var(--muted-2); flex:1 1 180px; min-width:150px}
.slider-box input[type=range]{flex:1; accent-color:var(--gold); min-width:80px}
.slider-box b{font-variant-numeric:tabular-nums; color:var(--muted); min-width:30px; text-align:start}
.tool-sep{width:1px; align-self:stretch; background:var(--line-soft)}

.tryon .swatches{border-top:0}
.tryon-foot{display:flex; flex-wrap:wrap; gap:12px; align-items:center; padding:0 clamp(14px,3vw,22px) 20px; font-size:14.5px; color:var(--muted)}
.tryon-foot .btn{margin-inline-start:auto}
.privacy{
  display:flex; gap:10px; align-items:flex-start; padding:0 clamp(14px,3vw,22px) 18px;
  font-size:13.5px; color:var(--muted-2);
}
.privacy svg{width:15px; height:15px; color:#2ED573; flex:none; margin-top:3px}

@media (max-width:560px){
  .tools{gap:8px; padding:12px 14px}
  .tool{padding:8px 12px; font-size:13.5px}
  .tryon-foot .btn{margin-inline-start:0; width:100%}
}

/* ---------- mobile action bar ---------- */
.mbar{
  position:fixed; inset-inline:0; bottom:0; z-index:100; display:none; gap:10px;
  padding:10px 14px calc(10px + env(safe-area-inset-bottom,0px));
  background:rgba(8,9,11,.94); backdrop-filter:blur(12px); border-top:1px solid var(--line);
}
.mbar .btn{flex:1; padding:14px 10px}

/* ---------- responsive ---------- */
@media (max-width:1000px){
  .nav{display:none}
  .burger{display:grid}
  .svc-row{grid-template-columns:1fr}
  .c-grid{grid-template-columns:1fr}
  .ftr-grid{grid-template-columns:1fr 1fr}
}
@media (max-width:760px){
  .status{display:none}
  .trust{grid-template-columns:1fr 1fr}
  .mbar{display:flex}
  .hdr .btn-wa{display:none}
}
@media (max-width:460px){
  body{font-size:16px}
  .row2{grid-template-columns:1fr}
  .hero-cta .btn{flex:1 1 100%}
  .ftr-grid{grid-template-columns:1fr}
  .est-step span{display:none}
  .est-step{padding:13px 4px}
  
}
@media (prefers-reduced-motion:reduce){*{animation:none!important; transition:none!important}}
@media print{
  body{background:#fff; color:#000}
  .hdr,.mbar,.ba,.est,.lightbox,.drawer{display:none!important}
}

/* try-on footer buttons wrap nicely on phones */
.tryon-foot #tzSave, .tryon-foot #tzSend{ margin-inline-start:0 }
.tryon-foot #tzSave{ margin-inline-start:auto }
@media (max-width:560px){ .tryon-foot #tzSave, .tryon-foot #tzSend{ width:100%; margin-inline-start:0 } }

/* ---------- hero brand badge ---------- */
.hero-badge{
  display:flex; align-items:center; gap:18px; margin-bottom:26px; flex-wrap:wrap;
}
.hero-badge img{
  width:clamp(84px,13vw,116px); height:auto; display:block;
  filter:drop-shadow(0 10px 34px rgba(8,103,255,.35));
}
.hero-badge .wordmark{display:flex; flex-direction:column; gap:5px; line-height:1}
.hero-badge .wm-1{
  font-family:var(--f-display); font-weight:900; letter-spacing:.04em;
  font-size:clamp(26px,4.4vw,40px);
  background:var(--shift); -webkit-background-clip:text; background-clip:text; color:transparent;
}
.hero-badge .wm-2{
  font-size:clamp(12px,1.8vw,15px); font-weight:500; letter-spacing:.34em; color:var(--muted);
}
@media (max-width:460px){ .hero-badge{gap:14px} .hero-badge .wm-2{letter-spacing:.22em} }

/* sections that let the brand atmosphere through */
.tinted{background:rgba(14,16,19,.80)}
.hdr{background:rgba(8,9,11,.88)}
.ftr{background:rgba(6,7,9,.78)}

/* ---------- the roll: work photos unspooling like hydro film ---------- */
.roll{
  position:relative; margin-top:clamp(30px,4vw,46px);
  overflow:hidden; padding-block:4px;
  -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 7%,#000 93%,transparent 100%);
          mask-image:linear-gradient(90deg,transparent 0,#000 7%,#000 93%,transparent 100%);
}
.roll::before,.roll::after{
  content:""; position:absolute; inset-block:0; width:2px; z-index:3; pointer-events:none;
  background:linear-gradient(180deg,transparent,var(--gold),transparent); opacity:.22;
}
.roll::before{inset-inline-start:7%} .roll::after{inset-inline-end:7%}

.roll-track{
  display:flex; gap:14px; width:max-content; direction:ltr;
  animation:roll var(--roll-dur,64s) linear infinite;
  will-change:transform;
}
@keyframes roll{ from{transform:translate3d(0,0,0)} to{transform:translate3d(-50%,0,0)} }
.roll:hover .roll-track,
.roll:focus-within .roll-track{animation-play-state:paused}

.roll-card{
  flex:none; width:clamp(232px,30vw,318px); aspect-ratio:4/3; position:relative;
  border:1px solid var(--line-soft); border-radius:var(--r-md); overflow:hidden;
  background:var(--panel); cursor:pointer; padding:0; display:grid; place-items:center;
  transition:border-color var(--t-med), transform var(--t-med);
}
.roll-card:hover{border-color:var(--gold); transform:translateY(-4px)}
.roll-card .ph{position:absolute; inset:0}
.roll-card img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; display:block}
.roll-card svg.car-mini{width:74%; position:relative; z-index:2; opacity:.85}
.roll-card::after{content:""; position:absolute; inset:0; z-index:3;
  background:linear-gradient(to top,rgba(5,6,8,.92),transparent 58%)}
.roll-meta{position:absolute; inset-inline:15px; bottom:13px; z-index:4; text-align:start; direction:rtl}
.roll-meta b{display:block; font-size:15.5px; font-weight:500; line-height:1.3}
.roll-meta span{font-size:12.5px; color:var(--muted)}

.roll-hint{
  margin-top:16px; font-size:13.5px; color:var(--muted-2); display:flex; gap:9px; align-items:center;
}
.roll-hint svg{width:15px; height:15px; color:var(--gold); flex:none}

@media (prefers-reduced-motion:reduce){
  .roll{overflow-x:auto; -webkit-mask-image:none; mask-image:none}
  .roll-track{animation:none}
  .roll::before,.roll::after{display:none}
}

/* תג מותג קטן מתחת לשם הגימור */
.sw-brand{
  display:block; font-style:normal; font-size:10px; letter-spacing:1.1px;
  color:var(--muted-2); margin-top:3px; text-transform:uppercase;
}
.sw[aria-pressed="true"] .sw-brand{color:var(--gold)}

/* ההסתייגות על דיוק הצבע — לא קישוט, חלק מההבטחה ללקוח */
.sw-note{
  margin-top:14px; font-size:13px; line-height:1.6; color:var(--muted-2);
  display:flex; gap:9px; align-items:flex-start;
}
.sw-note svg{width:16px; height:16px; flex:none; margin-top:2px; fill:none;
  stroke:var(--gold); stroke-width:1.7}

/* ---------- family filter above the swatches ---------- */
.families{
  display:flex; gap:8px; overflow-x:auto; scrollbar-width:thin;
  padding:14px clamp(14px,3vw,26px) 0;
}
.famchip{
  flex:none; display:inline-flex; align-items:center; gap:7px;
  font-size:13.5px; padding:7px 14px; border-radius:100px;
  border:1px solid var(--line); background:var(--panel-2); color:var(--muted);
  cursor:pointer; white-space:nowrap;
  transition:border-color var(--t-fast), color var(--t-fast), background var(--t-fast);
}
.famchip span{
  font-size:11px; font-variant-numeric:tabular-nums; color:var(--muted-2);
  background:var(--panel-3); border-radius:100px; padding:1px 7px;
}
.famchip:hover{border-color:var(--muted-2); color:var(--text)}
.famchip[aria-pressed="true"]{
  border-color:var(--gold); color:var(--gold-soft); background:rgba(201,162,90,.1);
}
.famchip[aria-pressed="true"] span{color:var(--gold); background:rgba(201,162,90,.16)}
.families + .swatches{border-top:0; padding-top:12px}

/* ============================================================
   דפי חוק — מדיניות פרטיות, תנאי שימוש, הצהרת נגישות
   עמודים טקסטואליים; רוחב קריאה מוגבל בכוונה.
   ============================================================ */
.legal{padding-block:clamp(44px,7vw,84px)}
.legal-head{max-width:62ch; border-bottom:1px solid var(--line-soft); padding-bottom:28px}
.legal-head h1{font-size:clamp(30px,5.2vw,48px); font-weight:900; margin-top:16px; letter-spacing:-.02em}
.legal-head .lede{margin-top:16px; color:var(--muted); font-size:clamp(16px,2vw,18.5px)}
.legal-meta{
  margin-top:20px; display:flex; flex-wrap:wrap; gap:8px 22px;
  font-size:13.5px; color:var(--muted-2);
}
.legal-body{max-width:72ch; margin-top:40px}
.legal-body h2{
  font-size:clamp(21px,2.8vw,27px); margin-top:50px; scroll-margin-top:calc(var(--hdr) + 20px);
}
.legal-body h2:first-child{margin-top:0}
.legal-body h3{font-size:18.5px; margin-top:30px; color:var(--gold-soft)}
.legal-body p{margin-top:14px; color:var(--muted); font-size:16.5px}
.legal-body strong{color:var(--text); font-weight:500}
.legal-body a{color:var(--gold); text-underline-offset:3px}
.legal-body ul,.legal-body ol{margin:14px 0 0; padding-inline-start:22px; color:var(--muted); font-size:16.5px}
.legal-body li{margin-top:9px}
.legal-body li::marker{color:var(--gold)}
.legal-table{
  width:100%; margin-top:18px; border-collapse:collapse; font-size:15.5px;
  border:1px solid var(--line); border-radius:var(--r-sm); overflow:hidden;
}
.legal-table th,.legal-table td{
  text-align:start; padding:11px 14px; border-bottom:1px solid var(--line-soft); vertical-align:top;
}
.legal-table th{background:var(--panel-2); color:var(--text); font-weight:500; font-size:14.5px}
.legal-table td{color:var(--muted)}
.legal-table tr:last-child td{border-bottom:0}
.legal-toc{
  margin-top:34px; padding:18px 20px; border:1px solid var(--line);
  border-radius:var(--r-md); background:var(--panel);
}
.legal-toc h4{font-family:var(--f-ui); font-size:12px; letter-spacing:.18em; color:var(--gold); text-transform:uppercase}
/* הכותרות כבר ממוספרות בעצמן ("1.", "2."), אז הרשימה לא מוסיפה
   מספור משלה — אחרת מופיע "1. 1." */
.legal-toc ol{margin-top:10px; padding-inline-start:0; list-style:none; font-size:15.5px}
.legal-toc li{margin-top:5px}
.legal-toc a{color:var(--muted); text-decoration:none}
.legal-toc a:hover{color:var(--gold-soft)}
.legal-back{
  display:inline-flex; align-items:center; gap:8px; margin-top:52px;
  font-size:15px; color:var(--gold); text-decoration:none;
}
.legal-back:hover{color:var(--gold-soft)}
.ftr-legal a{color:var(--muted-2); text-decoration:none}
.ftr-legal a:hover{color:var(--gold-soft)}

/* פסקה שחייבת להתמלא לפני מסירה ללקוח. ready.py מחפש את הסימון
   הזה ולא נותן למסור את האתר כל עוד נשאר אחד כזה. */
.legal-todo{
  margin-top:16px; padding:14px 16px; border-radius:var(--r-sm);
  border:1px solid rgba(229,72,77,.45); background:rgba(229,72,77,.07);
}
.legal-todo p{margin-top:0; color:var(--text); font-size:15.5px}
.legal-todo p + p{margin-top:10px}

/* ---------- הוכחה חברתית אמיתית ----------
   החליף שלושה כרטיסי שלד אפורים ו"כאן ייכנס ווידג׳ט". מספר אמיתי
   אחד עם קישור למקור שווה יותר משלוש המלצות מדומות. */
.proof{display:grid; grid-template-columns:repeat(2,1fr); gap:14px; margin-top:34px}
.proof-i{
  display:block; text-align:center; text-decoration:none;
  padding:26px 20px; border:1px solid var(--line); border-radius:var(--r-md);
  background:var(--panel); transition:border-color var(--t-fast), transform var(--t-fast);
}
.proof-i:hover{border-color:var(--gold); transform:translateY(-2px)}
.proof-i .stars{display:block; color:var(--gold); font-size:15px; letter-spacing:3px}
.proof-i b{
  display:block; font-family:var(--f-display); font-weight:900;
  font-size:clamp(34px,5.5vw,48px); color:var(--gold-soft);
  font-variant-numeric:tabular-nums; line-height:1.15; margin-top:4px;
}
.proof-i span{display:block; color:var(--muted); font-size:14.5px; margin-top:6px}
.proof-i em{display:block; color:var(--muted-2); font-size:13.5px; font-style:normal; margin-top:2px}
@media (max-width:560px){ .proof{grid-template-columns:1fr} }

/* רצועת האמון מתפרסת לפי כמה נתונים באמת מולאו */
.trust[data-shown="1"]{grid-template-columns:1fr}
.trust[data-shown="2"]{grid-template-columns:repeat(2,1fr)}
.trust[data-shown="3"]{grid-template-columns:repeat(3,1fr)}
.trust[data-shown="4"]{grid-template-columns:repeat(4,1fr)}
@media (max-width:700px){
  .trust[data-shown="3"],.trust[data-shown="4"]{grid-template-columns:repeat(2,1fr)}
}

/* מספר בתוך משפט נשאר בשורה. בלי זה "מתוך 8 ביקורות" נשבר לשלוש
   שורות, כי .trust-i span ו-.proof-i span מוגדרים כבלוק. */
.trust-i span span, .proof-i span span{display:inline}

/* טקסט לטיני בתוך עברית: בלי בידוד, ה-@ של שם משתמש והנקודה של
   כתובת מייל קופצים לצד הלא נכון. */
[data-cfg="instagramHandle"], [data-cfg="email"], .proof-i em{
  direction:ltr; unicode-bidi:isolate;
}

/* כפתור עם טקסט ארוך בעברית: .btn הוא nowrap, ובמסך צר הוא דוחף
   את העמוד וגורם לגלילה אופקית. זה מאפשר לו לרדת שורה. */
.btn-soft{white-space:normal; text-align:center; max-width:100%}

/* כלי הסדנה: מופיעים רק עם ?pro=1 ולכן מסומנים בבירור, כדי שאי
   אפשר יהיה להתבלבל ולחשוב שזה מה שהלקוח רואה. */
.tools-pro{
  border:1px dashed var(--line); border-radius:var(--r-sm);
  margin-top:10px; padding:10px 12px; background:rgba(255,255,255,.015);
}
.pro-tag{
  font-size:11px; letter-spacing:.14em; color:var(--muted-2);
  text-transform:uppercase; align-self:center; padding-inline-end:4px;
}

/* ---------- באג שהיה חי באתר ----------
   .tools ו-.sw-note מגדירים display:flex, ולמחלקה יש אותה סגוליות
   כמו ל-[hidden] של הדפדפן. התוצאה: כל אלמנט עם hidden בתוכם פשוט
   לא הוסתר. ככה "גודל מברשת" הופיע תמיד, וגם הכיתוב שמסביר שההדמיה
   נוצרה ב-AI הוצג עוד לפני שרונדרה הדמיה כזאת — כלומר האתר הצהיר
   הצהרה לא נכונה. hidden הוא hidden. */
[hidden]{display:none !important}