.marketing-grade-teaser {
  --collector-ink: #f8fbff;
  --collector-muted: #b9c9dc;
  --collector-blue: #55a0ff;
  --collector-mint: #6ce5b1;
  --collector-violet: #8d7cff;
  --collector-warm: #ffcf78;
  --collector-line: rgba(255,255,255,.14);
  --collector-panel: rgba(11,25,44,.88);
  position:relative;
  z-index:2;
  width:min(1220px,calc(100% - 32px));
  margin:0 auto;
  padding:12px;
  overflow:hidden;
  border:1px solid rgba(255,255,255,.16);
  border-radius:36px;
  background:
    radial-gradient(circle at 88% 12%, rgba(85,160,255,.35), transparent 34%),
    radial-gradient(circle at 9% 88%, rgba(108,229,177,.2), transparent 31%),
    radial-gradient(circle at 48% 0, rgba(141,124,255,.19), transparent 25%),
    linear-gradient(145deg,#0c2649 0%,#07101d 65%,#091827 100%);
  color: #fff;
  box-shadow:0 34px 90px rgba(3,9,18,.28), inset 0 1px rgba(255,255,255,.11);
  scroll-margin-top:86px;
}
.marketing-grade-teaser::before { content:""; position:absolute; inset:-35% auto auto 47%; width:420px; aspect-ratio:1; border:1px solid rgba(255,255,255,.09); border-radius:50%; box-shadow:0 0 0 60px rgba(255,255,255,.025),0 0 0 120px rgba(255,255,255,.015); pointer-events:none; }
.collector-stage { isolation:isolate; }
.collector-surface { border:1px solid var(--collector-line); background:linear-gradient(155deg,rgba(255,255,255,.13),rgba(255,255,255,.055)); box-shadow:0 22px 65px rgba(0,0,0,.29),inset 0 1px rgba(255,255,255,.12); backdrop-filter:blur(16px); }
.collector-badge { display:inline-flex; min-height:32px; align-items:center; justify-content:center; padding:0 12px; border:1px solid rgba(255,207,120,.55); border-radius:9px; color:#251801; background:linear-gradient(135deg,#ffe6a7,#ffbd50); box-shadow:0 8px 24px rgba(255,189,80,.22),inset 0 1px rgba(255,255,255,.7); font-size:12px; font-weight:950; letter-spacing:.12em; text-transform:uppercase; transform:rotate(-1.5deg); }
.collector-badge-soft { border-color:rgba(131,200,255,.36); color:#dcedff; background:rgba(85,160,255,.13); box-shadow:none; transform:none; }
.collector-card-frame { display:block; overflow:hidden; padding:5px; border:1px solid rgba(255,255,255,.26); border-radius:13px; background:linear-gradient(145deg,#fff,#dce9f8); box-shadow:0 20px 42px rgba(1,7,17,.4),0 3px 8px rgba(1,7,17,.25); }
.collector-card-frame img { width:100%; height:100%; border-radius:9px; object-fit:contain; background:#fff; }
.marketing-grade-shell { position:relative; z-index:1; width:100%; display:grid; grid-template-columns:.84fr 1.16fr; gap:48px; align-items:start; padding:46px; border:1px solid rgba(255,255,255,.09); border-radius:28px; background:linear-gradient(135deg,rgba(15,29,48,.72),rgba(7,16,29,.48)); }
.marketing-grade-badges { display:flex; flex-wrap:wrap; align-items:center; gap:9px; margin-bottom:21px; }
.marketing-grade-copy .eyebrow { color:#6ce5b1; }
.marketing-grade-copy h2 { max-width:520px; margin:15px 0 17px; color:#fff; text-wrap:balance; }
.marketing-grade-copy .lead { max-width:540px; color:#d1ddec; font-size:18px; }
.marketing-grade-card-stack { position:relative; height:176px; margin:24px 0 18px; }
.marketing-grade-card { position:absolute; top:0; width:116px; aspect-ratio:.72; }
.marketing-grade-card-one { left:22%; z-index:1; transform:rotate(-8deg) translateY(8px); }
.marketing-grade-card-two { left:calc(22% + 82px); z-index:2; transform:rotate(7deg); }
.marketing-grade-spark { position:absolute; left:calc(22% + 196px); top:20px; color:var(--collector-warm); text-shadow:0 0 18px rgba(255,207,120,.75); font-size:30px; }
.marketing-grade-steps { display:grid; gap:8px; margin:18px 0 17px; padding:0; list-style:none; }
.marketing-grade-steps li { display:grid; grid-template-columns:34px 1fr; gap:11px; align-items:center; padding:10px 12px; border:1px solid rgba(255,255,255,.09); border-radius:13px; background:rgba(255,255,255,.045); }
.marketing-grade-steps b { display:grid; width:30px; height:30px; place-items:center; border-radius:9px; color:#061426; background:linear-gradient(135deg,var(--collector-mint),#9effdc); font-size:12px; }
.marketing-grade-steps span,.marketing-grade-steps strong,.marketing-grade-steps small { display:block; }
.marketing-grade-steps strong { color:#f8fbff; font-size:14px; }
.marketing-grade-steps small { color:#9fb2c9; font-size:11px; }
.marketing-grade-more { margin-top:13px; }
.marketing-grade-more > summary { width:max-content; max-width:100%; min-height:44px; display:flex; align-items:center; color:#cfe2fa; font-size:13px; }
.marketing-grade-more[open] > summary { margin-bottom:12px; }
.marketing-grade-points { display:grid; grid-template-columns:1fr 1fr; gap:8px; margin:12px 0; }
.marketing-grade-points span { min-height:45px; display:flex; align-items:center; padding:10px 12px; border:1px solid rgba(255,255,255,.1); border-radius:12px; color:#d8e4f2; background:rgba(255,255,255,.045); font-size:12px; font-weight:720; }
.marketing-grade-barrier { display:grid; gap:4px; padding:16px 17px; border-left:3px solid #6ce5b1; border-radius:0 13px 13px 0; background:rgba(108,229,177,.08); }
.marketing-grade-barrier strong { color:#a8f4d1; }
.marketing-grade-barrier span, .marketing-grade-legal { color:#aebed2; font-size:13px; }
.marketing-grade-legal { margin:19px 0 0; }
.marketing-grade-studio { position:relative; padding:20px; border-radius:25px; }
.marketing-grade-studio::after { content:""; position:absolute; z-index:-1; right:-18px; bottom:-18px; width:120px; height:120px; border-radius:32px; background:linear-gradient(135deg,rgba(108,229,177,.42),rgba(85,160,255,.28)); filter:blur(25px); }
.marketing-grade-studio-head { display:grid; gap:3px; margin:0 2px 16px; }
.marketing-grade-studio-head span { color:var(--collector-mint); font-size:11px; font-weight:900; letter-spacing:.12em; text-transform:uppercase; }
.marketing-grade-studio-head strong { color:#fff; font-size:22px; letter-spacing:-.025em; }
.marketing-grade-studio-head p { margin:0; color:#b9c9dc; font-size:13px; }
.marketing-grade-uploads { display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.marketing-grade-upload { position:relative; min-height:248px; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:8px; padding:18px; overflow:hidden; border:1px dashed rgba(139,182,255,.43); border-radius:18px; background:linear-gradient(155deg,rgba(9,28,53,.82),rgba(7,16,29,.64)); box-shadow:inset 0 1px rgba(255,255,255,.055); text-align:center; transition:border-color .2s,transform .2s,background .2s; }
.marketing-grade-upload:hover { border-color:#75a8ff; }
.marketing-grade-upload:focus-within { outline:3px solid rgba(117,168,255,.62); outline-offset:3px; border-color:#75a8ff; }
.marketing-grade-upload input { position:absolute; width:1px; height:1px; opacity:0; }
.marketing-grade-upload img { position:absolute; inset:0; z-index:1; width:100%; height:100%; object-fit:contain; padding:10px; background:#0b1626; }
.marketing-grade-upload img[hidden] { display:none; }
.marketing-grade-upload > :not(img):not(input) { position:relative; z-index:2; }
.marketing-grade-upload img:not([hidden]) ~ b { align-self:flex-end; padding:7px 10px; border-radius:999px; color:#fff; background:rgba(7,16,29,.86); }
.marketing-grade-upload strong { font-size:22px; }
.marketing-grade-upload > span:not(.marketing-grade-index) { color:#aebed2; font-size:12px; }
.marketing-grade-upload b { margin-top:15px; color:#8bb6ff; font-size:12px; text-transform:uppercase; letter-spacing:.07em; }
.marketing-grade-pickers { display:flex; flex-wrap:wrap; justify-content:center; gap:8px; margin-top:8px; }
.marketing-grade-picker { min-height:44px; padding:0 13px; border:1px solid rgba(139,182,255,.48); border-radius:11px; color:#fff; background:linear-gradient(145deg,rgba(23,109,255,.34),rgba(83,70,222,.22)); box-shadow:inset 0 1px rgba(255,255,255,.1); font:inherit; font-size:12px; font-weight:820; cursor:pointer; }
.marketing-grade-picker:hover { border-color:#8bb6ff; background:rgba(23,109,255,.32); }
.marketing-grade-picker:focus-visible { outline:3px solid rgba(117,168,255,.68); outline-offset:2px; }
.marketing-grade-index { position:absolute!important; top:14px; left:15px; color:#6ce5b1; font-size:11px; font-weight:900; letter-spacing:.14em; }
.marketing-grade-holder { margin:10px 0; color:#aebed2; font-size:12px; }
.marketing-grade-holder summary { width:max-content; max-width:100%; min-height:44px; display:flex; align-items:center; cursor:pointer; font-weight:720; }
.marketing-grade-holder label { display:grid; grid-template-columns:1fr auto; align-items:center; gap:16px; margin-top:8px; color:#c9d7e8; font-size:13px; font-weight:720; }
.marketing-grade-holder select { max-width:245px; min-height:42px; padding:0 35px 0 12px; border:1px solid rgba(255,255,255,.16); border-radius:11px; color:#fff; background:#13243b; }
.marketing-grade-holder small { color:#8fa3ba; font-weight:600; }
.marketing-grade-consent { min-height:44px; display:grid; grid-template-columns:auto 1fr; gap:10px; align-items:start; margin:12px 0 17px; padding:5px 0; color:#b7c7da; font-size:12px; }
.marketing-grade-consent { cursor:pointer; }
.marketing-grade-consent input { margin-top:1px; accent-color:#176dff; width:22px; height:22px; min-width:22px; cursor:pointer; }
.marketing-grade-studio .btn { border:0; cursor:pointer; }
.marketing-grade-studio .btn-grade-free { width:100%; min-height:54px; }
.marketing-grade-studio .btn:disabled { opacity:.55; cursor:not-allowed; transform:none; }
.marketing-grade-free-note { margin:11px 0 0; color:#d2e0f0; text-align:center; font-size:11px; font-weight:750; }
.marketing-grade-status { min-height:20px; margin:7px 2px 0; color:#9eb1c7; text-align:center; font-size:12px; }
.marketing-grade-status[data-state="error"] { color:#ffb4ae; }
.marketing-grade-status[data-state="success"] { color:#8eebc0; }
.marketing-grade-result { margin-top:15px; padding:20px; border:1px solid rgba(108,229,177,.25); border-radius:18px; background:rgba(108,229,177,.08); }
.marketing-grade-result h3 { margin:9px 0 14px; color:#fff; }
.marketing-grade-result ul { margin:0 0 16px; padding-left:20px; color:#d8e4f2; font-size:13px; }
.marketing-grade-result-kicker { color:#6ce5b1; font-size:11px; font-weight:900; letter-spacing:.13em; text-transform:uppercase; }
.marketing-grade-result-kicker.retake { color:#ffbd7a; }
.marketing-grade-evidence { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:9px; margin:0 0 15px; }
.marketing-grade-evidence article { display:grid; gap:3px; padding:12px; border:1px solid rgba(255,255,255,.1); border-radius:12px; background:rgba(7,16,29,.3); }
.marketing-grade-evidence strong { color:#fff; font-size:13px; }
.marketing-grade-evidence span { color:#b8c8da; font-size:11px; }
.marketing-grade-lock { display:grid; gap:4px; padding:14px; border:1px solid rgba(255,255,255,.1); border-radius:13px; background:rgba(7,16,29,.38); }
.marketing-grade-lock span { color:#aebed2; font-size:12px; }
.marketing-grade-actions { display:flex; flex-wrap:wrap; gap:9px; margin:15px 0 10px; }
.marketing-grade-actions .btn-primary { flex:1 1 100%; }
.marketing-grade-actions .btn-ghost, .marketing-grade-result .btn-ghost { color:#fff; border-color:rgba(255,255,255,.2); background:rgba(255,255,255,.06); }
.marketing-grade-result small { color:#9eb1c7; }
@media (max-width: 900px) {
  .marketing-grade-shell { grid-template-columns:1fr; padding:34px; }
}
@media (max-width: 620px) {
  .marketing-grade-teaser { width:calc(100% - 16px); padding:7px; border-radius:27px; }
  .marketing-grade-shell { gap:28px; padding:17px 11px 23px; border-radius:20px; }
  .marketing-grade-studio { order:1; }
  .marketing-grade-copy { order:2; }
  .marketing-grade-studio { padding:14px; border-radius:20px; }
  .marketing-grade-studio-head strong { font-size:20px; }
  .marketing-grade-points, .marketing-grade-uploads { grid-template-columns:1fr; }
  .marketing-grade-upload { min-height:190px; }
  .marketing-grade-copy h2 { font-size:34px; }
  .marketing-grade-card-stack { height:154px; margin-top:20px; }
  .marketing-grade-card { width:100px; }
  .marketing-grade-card-one { left:18%; }
  .marketing-grade-card-two { left:calc(18% + 72px); }
  .marketing-grade-spark { left:calc(18% + 170px); }
  .marketing-grade-holder label { grid-template-columns:1fr; }
  .marketing-grade-holder select { max-width:none; width:100%; }
  .marketing-grade-actions .btn { width:100%; }
  .marketing-grade-evidence { grid-template-columns:1fr; }
}
@media (prefers-reduced-motion: reduce) {
  .collector-badge,.marketing-grade-card { transform:none; }
  .marketing-grade-upload,.marketing-grade-picker { transition:none; }
}