:root{
  --cp-bg:        var(--mp-bg, #0e0f12);
  --cp-surface:   var(--mp-bg-1, #171a1f);
  --cp-surface-2: var(--mp-bg-2, #20242b);
  --cp-line:      var(--mp-bg-3, #333a44);
  --cp-ink:       var(--mp-ink, #f2f3f5);
  --cp-ink-2:     var(--mp-ink-2, #b7bdc6);
  --cp-brand:     var(--mp-brand, #ffcc33);
  --cp-brand-ink: var(--mp-brand-ink, #140f00);
  --cp-accent:    var(--mp-brand-light, #ffe08a);
  --cp-radius:    16px;
  --cp-notch:     22px;                 
  --cp-font-display: var(--mp-font-display, 'Manrope', system-ui, sans-serif);
  --cp-font-mono:    var(--mp-font-mono, ui-monospace, monospace);
}

.mp-cp-wrap{ width:min(100% - 32px, 1120px); margin-inline:auto; }
.mp-cp-narrow{ width:min(100% - 32px, 820px); margin-inline:auto; }


.mp-cp-btn{ display:inline-flex; align-items:center; justify-content:center; gap:.45em;
  min-height:46px; padding:11px 22px; border:0; border-radius:999px; cursor:pointer;
  font:700 .9rem/1.1 var(--cp-font-display); letter-spacing:.02em; text-decoration:none;
  transition:background-color .15s, color .15s, border-color .15s; }
.mp-cp-btn--brand{ background:var(--cp-brand); color:var(--cp-brand-ink); }
.mp-cp-btn--brand:hover{ background:color-mix(in srgb, var(--cp-brand) 85%, #fff); }
.mp-cp-btn--line{ background:transparent; color:var(--cp-ink); border:1.5px solid var(--cp-line); }
.mp-cp-btn--line:hover{ border-color:var(--cp-brand); color:var(--cp-accent); }
.mp-cp-btn--wide{ width:100%; }
a:focus-visible, button:focus-visible, .mp-cp-voucher:focus-visible{ outline:3px solid var(--cp-brand); outline-offset:2px; }


.mp-cp-top{ position:sticky; top:0; z-index:20; background:color-mix(in srgb, var(--cp-bg) 88%, transparent);
  backdrop-filter:blur(8px); border-bottom:1px solid var(--cp-line); }
.mp-cp-top-in{ display:flex; align-items:center; gap:16px; min-height:62px; }
.mp-cp-brand{ font:800 1.12rem/1 var(--cp-font-display); color:var(--cp-ink); text-decoration:none; letter-spacing:.01em; }
.mp-cp-nav{ display:flex; gap:18px; margin-left:auto; }
.mp-cp-nav a{ color:var(--cp-ink-2); text-decoration:none; font-weight:600; font-size:.92rem; }
.mp-cp-nav a:hover{ color:var(--cp-accent); }
.mp-cp-actions{ display:flex; gap:8px; margin-left:16px; }
@media(max-width:820px){ .mp-cp-nav{ display:none; } .mp-cp-actions{ margin-left:auto; } }


.mp-cp-coupon{ position:relative; background:var(--cp-surface); border:1px dashed var(--cp-line);
  border-radius:var(--cp-radius); overflow:hidden; }
.mp-cp-coupon::before, .mp-cp-coupon::after{ content:""; position:absolute; width:var(--cp-notch); height:var(--cp-notch);
  background:var(--cp-bg); border-radius:50%; top:50%; transform:translateY(-50%); z-index:2; }
.mp-cp-coupon::before{ left:calc(var(--cp-notch) / -2); }
.mp-cp-coupon::after{ right:calc(var(--cp-notch) / -2); }


.mp-cp-hero{ padding:34px 0 10px; }
.mp-cp-tag{ display:inline-flex; align-items:center; gap:.4em; font:700 .72rem/1 var(--cp-font-mono);
  letter-spacing:.14em; text-transform:uppercase; color:var(--cp-brand-ink); background:var(--cp-brand);
  padding:6px 12px; border-radius:999px; }
.mp-cp-hero-grid{ display:grid; grid-template-columns:1.6fr 1fr; align-items:stretch; }
.mp-cp-hero-main{ padding:28px 30px; }
.mp-cp-hero-main h1{ font:800 clamp(1.8rem,3.4vw + .5rem,2.7rem)/1.1 var(--cp-font-display);
  color:var(--cp-ink); margin:14px 0 10px; text-wrap:balance; }
.mp-cp-hero-main p{ color:var(--cp-ink-2); margin:0 0 18px; max-width:52ch; }
.mp-cp-hero-ctas{ display:flex; flex-wrap:wrap; gap:10px; }

.mp-cp-stub{ position:relative; padding:28px 26px; display:flex; flex-direction:column; justify-content:center; gap:10px;
  border-left:2px dashed var(--cp-line); background:
   linear-gradient(0deg, color-mix(in srgb,var(--cp-brand) 7%, transparent), color-mix(in srgb,var(--cp-brand) 7%, transparent)), var(--cp-surface-2); }
.mp-cp-stub-h{ font:700 .72rem/1 var(--cp-font-mono); letter-spacing:.14em; text-transform:uppercase; color:var(--cp-ink-2); margin:0 0 4px; }
.mp-cp-stub dl{ margin:0; display:grid; gap:9px; }
.mp-cp-stub dl>div{ display:flex; justify-content:space-between; gap:12px; align-items:baseline; border-bottom:1px dotted var(--cp-line); padding-bottom:7px; }
.mp-cp-stub dt{ color:var(--cp-ink-2); font-size:.86rem; }
.mp-cp-stub dd{ margin:0; color:var(--cp-ink); font-weight:700; font-family:var(--cp-font-display); }
@media(max-width:760px){ .mp-cp-hero-grid{ grid-template-columns:1fr; } .mp-cp-stub{ border-left:0; border-top:2px dashed var(--cp-line); } }


.mp-cp-sect{ padding:30px 0; }
.mp-cp-head{ display:flex; align-items:center; justify-content:space-between; gap:16px; margin:0 0 16px; }
.mp-cp-head h2{ font:800 clamp(1.4rem,2vw + .5rem,1.85rem)/1.15 var(--cp-font-display); color:var(--cp-ink); margin:0; }
.mp-cp-head p{ color:var(--cp-ink-2); margin:0; }


.mp-cp-offers{ list-style:none; margin:0; padding:0; display:grid; gap:16px; grid-template-columns:repeat(auto-fill,minmax(230px,1fr)); }
.mp-cp-voucher{ display:flex; flex-direction:column; background:var(--cp-surface); border:1px dashed var(--cp-line);
  border-radius:14px; overflow:hidden; text-decoration:none; color:inherit; transition:border-color .15s, transform .15s; }
.mp-cp-voucher:hover{ border-color:var(--cp-brand); transform:translateY(-2px); }
.mp-cp-voucher-thumb{ position:relative; aspect-ratio:16/10; background-size:cover; background-position:center; }
.mp-cp-voucher-badge{ position:absolute; top:10px; left:10px; background:var(--cp-brand); color:var(--cp-brand-ink);
  font:700 .68rem/1 var(--cp-font-mono); letter-spacing:.1em; text-transform:uppercase; padding:5px 9px; border-radius:6px; }
.mp-cp-voucher-body{ padding:14px 16px 16px; border-top:2px dashed var(--cp-line); }
.mp-cp-voucher-name{ display:block; font:700 1rem/1.2 var(--cp-font-display); color:var(--cp-ink); }
.mp-cp-voucher-meta{ display:block; color:var(--cp-ink-2); font-size:.84rem; margin-top:3px; }
.mp-cp-code{ display:inline-block; margin-top:10px; font:700 .8rem/1 var(--cp-font-mono); letter-spacing:.12em;
  color:var(--cp-accent); background:color-mix(in srgb,var(--cp-brand) 10%, transparent);
  border:1px dashed var(--cp-brand); border-radius:6px; padding:6px 10px; }


.mp-cp-specs{ list-style:none; margin:0; padding:0; display:grid; gap:14px; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); }
.mp-cp-spec{ background:var(--cp-surface); border:1px solid var(--cp-line); border-radius:14px; padding:18px 20px; }
.mp-cp-spec h3{ font:700 1.05rem/1.2 var(--cp-font-display); color:var(--cp-ink); margin:0 0 10px; }
.mp-cp-spec dl{ margin:0; display:grid; gap:7px; }
.mp-cp-spec dt{ color:var(--cp-ink-2); font-size:.82rem; }
.mp-cp-spec dd{ margin:0 0 4px; color:var(--cp-ink); font-weight:700; }


.mp-cp-prose h2{ font-family:var(--cp-font-display); color:var(--cp-ink); margin:26px 0 10px; line-height:1.2; }
.mp-cp-prose h3{ font-family:var(--cp-font-display); color:var(--cp-ink); margin:18px 0 8px; }
.mp-cp-prose p{ color:var(--cp-ink-2); margin:0 0 14px; }
.mp-cp-prose a{ color:var(--cp-accent); }


.mp-cp-faq details{ border:1px dashed var(--cp-line); border-radius:12px; padding:12px 16px; margin:0 0 10px; background:var(--cp-surface); }
.mp-cp-faq summary{ cursor:pointer; font-weight:700; color:var(--cp-ink); font-family:var(--cp-font-display); }
.mp-cp-faq details[open]{ border-color:var(--cp-brand); }
.mp-cp-faq details>div{ margin-top:8px; }
.mp-cp-faq p{ color:var(--cp-ink-2); margin:0; }


.mp-cp-author{ display:flex; gap:14px; align-items:center; background:var(--cp-surface); border:1px dashed var(--cp-line);
  border-radius:16px; padding:16px 18px; margin:16px 0; }
.mp-cp-author .mp-cp-ava{ width:52px; height:52px; border-radius:50%; flex:0 0 auto;
  background:radial-gradient(circle at 40% 35%, var(--cp-accent), color-mix(in srgb,var(--cp-brand) 50%, #000)); }
.mp-cp-author h3{ font-family:var(--cp-font-display); color:var(--cp-ink); margin:0; font-size:1.05rem; }
.mp-cp-author p{ margin:2px 0 0; color:var(--cp-ink-2); font-size:.86rem; }
.mp-cp-author .role{ color:var(--cp-accent); font-weight:600; }


.mp-cp-foot{ border-top:1px dashed var(--cp-line); margin-top:30px; padding:26px 0; }
.mp-cp-foot-grid{ display:grid; gap:22px; grid-template-columns:repeat(auto-fit,minmax(180px,1fr)); }
.mp-cp-foot-h{ font:700 .76rem/1 var(--cp-font-mono); letter-spacing:.12em; text-transform:uppercase; color:var(--cp-ink); margin:0 0 10px; }
.mp-cp-foot ul{ list-style:none; margin:0; padding:0; display:grid; gap:7px; }
.mp-cp-foot a{ color:var(--cp-ink-2); text-decoration:none; font-size:.9rem; }
.mp-cp-foot a:hover{ color:var(--cp-accent); }
.mp-cp-foot p{ color:var(--cp-ink-2); font-size:.9rem; margin:0; }
.mp-cp-foot-bottom{ display:flex; flex-wrap:wrap; gap:10px; justify-content:space-between;
  margin-top:20px; padding-top:16px; border-top:1px dotted var(--cp-line); color:var(--cp-ink-2); font-size:.82rem; }

.mp-skip{ position:absolute; left:-999px; top:8px; }
.mp-skip:focus{ left:8px; z-index:99; background:#fff; color:#000; padding:8px; }

@media (prefers-reduced-motion:reduce){ .mp-cp-voucher{ transition:none; } }