/* PLNEMAIL / PLNWEB maquette — ported from the freelancer's stylesheets.
   ==========================================================================
   The freelancer shipped one markup with two palettes:
     plnweb-premium/styles.css            -> black & gold
     PLNEMAIL/styles.css                  -> same file + a blue & white override
   Both designs live here, scoped to `.mk-site` so the campaign landing page
   and the 404 page keep the platform's own chrome.

   Source of truth: PLNWEB_Maquette_Noir_Or_Freelancer/ and
                    PLNEMAIL_Maquette_Bleu_Blanc_Freelancer/.
   ========================================================================== */

.mk-site{
  /* black & gold — the PLNWEB maquette's own palette */
  --mk-gold:#e7b64d;--mk-pale:#ffdd87;--mk-bg:#080706;--mk-panel:#16120d;--mk-text:#f5f1e8;
  --mk-head:Georgia,"Times New Roman",serif;
  --mk-hero:radial-gradient(ellipse at 50% 40%,#5b3815 0%,#110c06 58%,#050403 100%);
  --mk-h1:#ffdd87;
  --mk-top-bg:#0c0906;--mk-top-line:#5c451e;--mk-nav:#f5f1e8;--mk-foot-line:#7b581e;
  --mk-copy-bg:#080706;
  background:var(--mk-bg);color:var(--mk-text);
  font:15px/1.5 system-ui,-apple-system,"Segoe UI",sans-serif;
}
.mk-site :where(a:not(.cta)){color:inherit;text-decoration:none}
.mk-site :where(a:not(.cta)):hover{filter:brightness(1.12)}

/* ------------------------------------------------------------- header bar */
.mk-site .top{min-height:80px;display:flex;align-items:center;justify-content:space-between;
  gap:20px;padding:12px 3.5%;border-bottom:1px solid var(--mk-top-line);background:var(--mk-top-bg)}
.mk-site .brand{font:900 clamp(24px,3vw,39px) var(--mk-head);color:var(--mk-pale);
  line-height:1;white-space:nowrap}
.mk-site .brand small{display:block;font:9px system-ui;letter-spacing:1.2px;color:#eee;margin-top:8px}
.mk-site .top nav{display:flex;gap:23px;flex-wrap:wrap}
.mk-site .top nav a{font-size:13px;font-weight:650}
.mk-site .account{display:flex;gap:9px}
/* The maquette styled every bare <button>, not a class. Porting it as
   `.mk-site .btn` left the search submit (which carries no class) rendering as
   a raw browser button. Restore the element selector, exactly as shipped. */
.mk-site button,.mk-site .btn{cursor:pointer;border:0;border-radius:9px;
  background:linear-gradient(110deg,var(--mk-gold),var(--mk-pale));color:#120d04;
  font-weight:750;padding:11px 19px;font-family:inherit;font-size:inherit}
.mk-site button:hover,.mk-site .btn:hover{filter:brightness(1.12)}
.mk-site .outline{background:transparent;color:#fff;border:1px solid var(--mk-gold)}

/* -------------------------------------------------------------- hero band */
.mk-site .hero{min-height:335px;position:relative;display:grid;
  grid-template-columns:minmax(0,1.25fr) minmax(220px,.8fr) minmax(210px,.55fr);
  gap:15px;padding:20px 2%;background:var(--mk-hero);overflow:hidden}
.mk-site .hero-copy{position:relative;z-index:2;padding:12px 0 0 2%}
.mk-site .eyebrow{color:var(--mk-gold);letter-spacing:2px;font-size:10px;margin:0}
.mk-site .hero h1{font:700 clamp(36px,4.3vw,72px)/1.02 var(--mk-head);color:var(--mk-h1);margin:9px 0}
.mk-site .hero h1 em{font-style:normal;color:#fff;font-size:.78em}
.mk-site .hero-copy>p:not(.eyebrow){color:#ddd}
.mk-site #searchForm{display:flex;max-width:540px;border:1px solid var(--mk-gold);
  border-radius:35px;overflow:hidden;margin:20px 0}
.mk-site input:not([type=checkbox]):not([type=radio]){min-width:0;background:#161412;color:#fff;
  border:1px solid #584521;padding:13px 15px}
.mk-site #searchForm input{flex:1;border:0;outline:none}
.mk-site #searchForm button{border-radius:0;font-size:24px;padding:4px 19px}
.mk-site .stats{display:flex;gap:22px;flex-wrap:wrap;color:var(--mk-gold);font-size:23px}
/* The maquette stacked icon + number + label and pulled the label under the
   number with `margin-left:-48px` — a trick that only lines up for its own
   wide fake figures. Same composition, laid out so any counted value fits. */
.mk-site .stats span{display:grid;grid-template-columns:auto auto;
  grid-template-rows:auto auto;align-items:center;column-gap:6px}
.mk-site .stats i{grid-row:1/3;font-style:normal;line-height:1}
.mk-site .stats b{grid-column:2;font-size:16px;line-height:1.15}
.mk-site .stats small{grid-column:2;font-size:10px;color:#ccc;line-height:1.2}
.mk-site .hero-photo{background:linear-gradient(90deg,#120c06 0%,transparent 35%),
  url('https://images.unsplash.com/photo-1534528741775-53994a69daeb?auto=format&fit=crop&w=900&q=85') center 32%/cover;
  border-radius:12px;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 22%);
  mask-image:linear-gradient(90deg,transparent,#000 22%)}

/* -------------------------------------------- house-ad fallback boxes */
/* Shown only while the matching advertising zone has no live banner. */
.mk-site .ad{border:1px solid #bd8a26;border-radius:12px;display:flex;flex-direction:column;
  justify-content:end;padding:24px;min-height:210px;background-position:center;
  background-size:cover;box-shadow:inset 0 0 0 1000px #0005}
.mk-site .ad strong{font-size:clamp(20px,2.4vw,34px);line-height:1.1}
.mk-site .ad p{margin:8px 0 20px}
.mk-site .ad a{display:inline-block;align-self:flex-start;
  background:linear-gradient(90deg,var(--mk-gold),var(--mk-pale));color:#000;
  padding:10px 20px;border-radius:9px;font-size:12px;font-weight:800}
.mk-site .hero-ad{background-image:url('https://images.unsplash.com/photo-1613490493576-7fde63acd811?auto=format&fit=crop&w=850&q=80')}
/* The hero's right column. The maquette put the house ad straight into the
   grid cell; wrapping it lets a live console banner stack under it without
   changing the cell's proportions. */
.mk-site .hero-ad-col{display:grid;gap:15px;align-content:start;min-width:0}
.mk-site .hero-ad-col .ad{min-height:335px}
.mk-site .ad-watch{background-image:url('https://images.unsplash.com/photo-1523170335258-f5ed11844a49?auto=format&fit=crop&w=800&q=85');min-height:290px}
.mk-site .ad-villa{background-image:url('https://images.unsplash.com/photo-1600607687920-4e2a09cf159d?auto=format&fit=crop&w=800&q=85');min-height:280px}

/* Platform banners inherit the maquette's card language. */
.mk-site .ad-zone{margin:22px 0}
.mk-site .ad-banner{border-radius:12px;background:#00000026;border-color:#ffffff26}
.mk-site .ad-zone--empty{border-radius:12px}

/* ------------------------------------------------------------- body grid */
.mk-site .layout{display:grid;grid-template-columns:minmax(0,1fr) minmax(250px,23%);
  gap:22px;padding:18px 2%}
.mk-site .content{min-width:0}
.mk-site h2{font:700 28px var(--mk-head);color:var(--mk-pale);margin:12px 0 18px}
.mk-site .categories{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:12px}
.mk-site .category,.mk-site .tile{position:relative;overflow:hidden;border:1px solid #4a3924;
  border-radius:10px;background:#16120e;cursor:pointer}
.mk-site .category img{height:135px;width:100%;object-fit:cover;display:block}
.mk-site .category .label{padding:9px;background:linear-gradient(transparent,var(--mk-copy-bg))}
.mk-site .category b,.mk-site .category small{display:block}
.mk-site .category small{color:#bbb;font-size:11px}
.mk-site .section-head{display:flex;align-items:center;justify-content:space-between;
  gap:12px;flex-wrap:wrap;margin-top:17px}
.mk-site .filters{display:flex;flex-wrap:wrap;gap:4px}
.mk-site .filters button{background:#1c1a17;color:#eee;border:1px solid #333;padding:9px 15px}
.mk-site .filters .active{background:var(--mk-gold);color:#111}
.mk-site .gallery{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:12px}
.mk-site .tile{aspect-ratio:1.52}
.mk-site .tile img{width:100%;height:100%;object-fit:cover;transition:transform .2s}
.mk-site .tile:hover img{transform:scale(1.05)}
.mk-site .tile span{position:absolute;left:8px;bottom:7px;background:#000b;border-radius:6px;padding:2px 7px}
.mk-site .ads{display:grid;gap:16px;align-content:start}
.mk-site .empty{color:inherit;opacity:.7}

/* ----------------------------------------------------------------- footer */
.mk-site footer{border-top:1px solid var(--mk-foot-line);padding:28px 3.5%;display:grid;
  grid-template-columns:1.5fr repeat(3,.75fr) 1.4fr;gap:20px}
.mk-site footer>div{display:flex;flex-direction:column;gap:8px;font-size:12px}
.mk-site footer b{color:var(--mk-pale)}
.mk-site footer form{display:flex}
.mk-site footer form input{width:100%}
.mk-site footer form button{border-radius:0 8px 8px 0;padding:9px}
.mk-site .copyright{border-top:1px solid #3b2c18;padding:15px 3%;font-size:11px;color:#aaa}

/* ------------------------------------------------------------ notice dialog */
.mk-site dialog{background:#19140c;color:#fff;border:1px solid var(--mk-gold);
  border-radius:12px;max-width:420px;padding:26px 26px 22px;position:relative}
.mk-site dialog h3{margin:0 26px 10px 0}
.mk-site dialog::backdrop{background:#0009}
.mk-site dialog .dlg-x{position:absolute;top:10px;right:10px;width:32px;height:32px;
  padding:0;border-radius:50%;font-size:18px;line-height:1;font-weight:700;
  background:transparent;color:inherit;border:1px solid transparent}
.mk-site dialog .dlg-x:hover{background:#ffffff1f;filter:none}
.mk-site dialog input{display:block;width:100%;margin:10px 0}
.mk-site dialog button[type=submit]{width:100%;margin-top:6px}
/* Lean on the platform's theme tokens for the plnemail palette. */
.mk-site.theme-plnemail dialog .dlg-x:hover{background:#00000012}

/* ----------------------------------------------------------------- toast */
.mk-site .toast{position:fixed;left:50%;bottom:28px;transform:translateX(-50%);
  z-index:80;background:var(--mk-gold);color:#120d04;font-weight:700;font-size:14px;
  padding:13px 22px;border-radius:10px;box-shadow:0 12px 34px #0007;
  max-width:min(90vw,420px);text-align:center}
.mk-site.theme-plnemail .toast{background:#0879ed;color:#fff}

/* ------------------------------------------------- plnemail: blue & white */
/* Verbatim from PLNEMAIL/styles.css — the maquette's own override block. */
.mk-site.theme-plnemail{
  --mk-gold:#0879ed;--mk-pale:#0867d1;--mk-bg:#f5faff;--mk-panel:#ffffff;--mk-text:#10243d;
  --mk-head:system-ui,-apple-system,"Segoe UI",sans-serif;
  --mk-hero:linear-gradient(105deg,#eff8ff,#d5edff 57%,#b8dfff);
  --mk-h1:#10243d;
  --mk-top-bg:#fff;--mk-top-line:#dce9f7;--mk-nav:#22364e;--mk-foot-line:#d4e6f7;
  --mk-copy-bg:#eaf4ff;
  background:#f4f9ff;color:#10243d;
}
.mk-site.theme-plnemail .top{background:#fff;border-bottom:1px solid #dce9f7;box-shadow:0 2px 12px #0b4e8910}
.mk-site.theme-plnemail .brand{letter-spacing:-1px;color:#112e50}
.mk-site.theme-plnemail .brand small{color:#42627f}
.mk-site.theme-plnemail .top nav a{color:#22364e}
.mk-site.theme-plnemail button,.mk-site.theme-plnemail .btn{background:linear-gradient(110deg,#0879ed,#32b4ff);color:#fff}
/* Declared after the .btn rule above so the ghost variant keeps its blue ink:
   `.btn` and `.outline` have equal specificity, so source order decides. */
.mk-site.theme-plnemail .outline{background:#fff;color:#096ed6;border-color:#cfe4fa}
.mk-site.theme-plnemail .hero h1{color:#10243d;font-weight:850;letter-spacing:-2px}
.mk-site.theme-plnemail .hero h1 em{color:#0879ed}
.mk-site.theme-plnemail .hero-copy>p:not(.eyebrow){color:#385673}
.mk-site.theme-plnemail .eyebrow{color:#0879ed}
.mk-site.theme-plnemail .hero-photo{background-image:linear-gradient(90deg,#d7efff 0%,transparent 35%),
  url('https://images.unsplash.com/photo-1507525428034-b723cf961d3e?auto=format&fit=crop&w=900&q=85')}
.mk-site.theme-plnemail .stats{color:#0879ed}
.mk-site.theme-plnemail .stats small{color:#46617b}
.mk-site.theme-plnemail input:not([type=checkbox]):not([type=radio]){background:#fff;color:#142c44;border-color:#cee1f2}
.mk-site.theme-plnemail #searchForm{background:#fff;border-color:#d6e9f8;box-shadow:0 7px 20px #155ea51c}
.mk-site.theme-plnemail .ad{border-color:#d4e8fb;box-shadow:inset 0 0 0 1000px #082f5470;color:#fff}
.mk-site.theme-plnemail .ad a{background:linear-gradient(90deg,#0879ed,#29b4ff);color:#fff}
.mk-site.theme-plnemail .ad-banner{background:#ffffffcc;border-color:#cfe3f6}
/* --accent-2 is a light blue meant for dark surfaces; on the white banner
   cards of this theme it dropped to 1.6:1. Use the theme's own heading ink. */
.mk-site.theme-plnemail .ad-zone__label{color:#0d5aa7}
.mk-site.theme-plnemail .ad-zone__body{color:#4a6b8c}
.mk-site.theme-plnemail .ad-zone--empty{color:#4a6b8c}
.mk-site.theme-plnemail h2{color:#142d49}
.mk-site.theme-plnemail .category,.mk-site.theme-plnemail .tile{background:#fff;border-color:#d8e7f5;
  box-shadow:0 3px 12px #1a609015}
.mk-site.theme-plnemail .category .label{background:#fff}
.mk-site.theme-plnemail .category small{color:#66809b}
.mk-site.theme-plnemail .filters button{background:#e9f2fb;color:#304d6b;border-color:#d6e4f1}
.mk-site.theme-plnemail .filters .active{background:#0879ed;color:#fff}
.mk-site.theme-plnemail .ad-watch{background-image:url('https://images.unsplash.com/photo-1486406146926-c627a92ad1ab?auto=format&fit=crop&w=800&q=85')}
.mk-site.theme-plnemail .ad-villa{background-image:url('https://images.unsplash.com/photo-1497366811353-6870744d04b2?auto=format&fit=crop&w=800&q=85')}
.mk-site.theme-plnemail footer{background:#eaf4ff;color:#23405e;border-top:1px solid #d4e6f7}
.mk-site.theme-plnemail .copyright{background:#eaf4ff;color:#56728e}
.mk-site.theme-plnemail dialog{background:#fff;color:#173351;border:1px solid #c7dff4}

/* -------------------------------------------------- maquette responsive */
@media (max-width:1100px){
  .mk-site .top{flex-wrap:wrap}
  .mk-site .hero{grid-template-columns:1.2fr .8fr}
  .mk-site .hero-ad,.mk-site .hero-ad-slot{display:none}
  .mk-site .categories{grid-template-columns:repeat(3,1fr)}
  .mk-site .gallery{grid-template-columns:repeat(3,1fr)}
  .mk-site footer{grid-template-columns:repeat(3,1fr)}
}
@media (max-width:680px){
  .mk-site .top nav{order:3;width:100%;justify-content:center;gap:14px}
  .mk-site .hero{display:block}
  .mk-site .hero-photo{position:absolute;inset:0;opacity:.28;-webkit-mask-image:none;mask-image:none}
  .mk-site .hero-copy{padding:25px 5px}
  .mk-site .layout{display:block}
  .mk-site .categories{grid-template-columns:repeat(2,1fr)}
  .mk-site .gallery{grid-template-columns:repeat(2,1fr)}
  .mk-site .ads{grid-template-columns:1fr 1fr;margin-top:25px}
  .mk-site .ad{padding:14px;min-height:180px}
  .mk-site .ad strong{font-size:19px}
  .mk-site footer{grid-template-columns:repeat(2,1fr)}
  .mk-site .stats{gap:14px}
  .mk-site .top{padding:15px}
  .mk-site .account .btn{padding:8px}
}