/* ============================================
   SPIN TO WIN — campaign landing page
   Prefix: spin-   |  Divided Sky Roofing + Exteriors
   ============================================ */
.spin-label{color:var(--ds-green)!important}

/* ---------- HERO ---------- */
.spin-hero{position:relative;padding:150px 0 90px;overflow:hidden;background:var(--ds-charcoal)}
.spin-hero-bg{position:absolute;inset:0;z-index:0}
.spin-hero-bg img{width:100%;height:100%;object-fit:cover;object-position:center 40%}
.spin-hero-overlay{position:absolute;inset:0;z-index:1;background:linear-gradient(100deg,rgba(20,22,20,.92) 0%,rgba(25,25,25,.82) 45%,rgba(25,25,25,.62) 100%)}
.spin-hero .ds-container{position:relative;z-index:2}
.spin-hero-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:60px;align-items:center}
.spin-hero-copy h1{font-size:clamp(38px,4.6vw,64px);line-height:1.04;color:#fff;font-weight:900;letter-spacing:-1.5px;margin:0 0 22px}
.spin-hero-sub{font-size:19px;line-height:1.6;color:rgba(255,255,255,.85);max-width:560px;margin:0 0 26px}
.spin-hero-list{list-style:none;padding:0;margin:0 0 26px;display:flex;flex-direction:column;gap:12px}
.spin-hero-list li{display:flex;align-items:center;gap:12px;color:#fff;font-size:17px}
.spin-hero-list strong{color:var(--ds-green)}
.spin-check{display:inline-flex;align-items:center;justify-content:center;width:26px;height:26px;flex:0 0 26px;border-radius:50%;background:var(--ds-green);color:#1e2328;font-size:14px;font-weight:900}
.spin-hero-note{font-size:13px;color:rgba(255,255,255,.55);margin:0}

/* ---------- FORM CARD ---------- */
.spin-form-card{background:#fff;border-radius:16px;padding:34px;box-shadow:0 30px 70px rgba(0,0,0,.4);scroll-margin-top:120px}
.spin-form-header h2{font-size:28px;font-weight:800;color:var(--ds-dark);margin:0 0 8px;letter-spacing:-.5px}
.spin-form-header p{font-size:15px;color:#666;margin:0 0 22px;line-height:1.5}
.spin-row{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.spin-field{margin-bottom:12px}
.spin-field-zip{max-width:100%}
.spin-form input[type=text],.spin-form input[type=email],.spin-form input[type=tel]{width:100%;padding:14px 16px;font-size:16px;font-family:inherit;color:var(--ds-dark);background:#f6f7f6;border:2px solid #e6e8e6;border-radius:9px;transition:border-color .18s,background .18s}
.spin-form input:focus{outline:none;border-color:var(--ds-green);background:#fff}
.spin-form input.spin-error{border-color:#e02b2b;background:#fff5f5}
.spin-hp{position:absolute;left:-9999px;opacity:0;height:0;overflow:hidden}
.spin-submit{width:100%;margin-top:6px;padding:17px 22px;font-size:17px;font-weight:800;font-family:inherit;color:#1e2328;background:var(--ds-green);border:none;border-radius:9px;cursor:pointer;transition:background .18s,transform .18s}
.spin-submit:hover{background:var(--ds-green-dark);transform:translateY(-2px)}
.spin-submit:disabled{opacity:.7;cursor:default;transform:none}
.spin-form-note{font-size:12.5px;color:#8a8f8a;text-align:center;margin:14px 0 0;line-height:1.5}
.spin-thanks{text-align:center;padding:14px 0}
.spin-thanks-icon{font-size:52px;line-height:1;margin-bottom:10px}
.spin-thanks h3{font-size:26px;font-weight:800;color:var(--ds-dark);margin:0 0 10px}
.spin-thanks p{font-size:16px;color:#666;line-height:1.6;margin:0 0 20px}

/* ---------- SHARED HEADS ---------- */
.spin-head{text-align:center;max-width:760px;margin:0 auto 50px}
.spin-head h2{font-size:clamp(30px,3.4vw,44px);font-weight:900;letter-spacing:-1px;margin:8px 0 14px}
.spin-head-sub{font-size:17px;line-height:1.6;opacity:.8;margin:0}

/* ---------- PRIZES (light) ---------- */
.spin-prizes{background:#f8f8f8;color:var(--ds-dark);padding:90px 0}
.spin-prize-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.spin-prize-card{background:#fff;border:1px solid #eaeaea;border-radius:14px;padding:34px 28px;box-shadow:0 4px 18px rgba(0,0,0,.05);transition:transform .2s,box-shadow .2s}
.spin-prize-card:hover{transform:translateY(-4px);box-shadow:0 14px 34px rgba(0,0,0,.09)}
.spin-prize-hero{border:2px solid var(--ds-green)}
.spin-prize-amount{font-size:42px;font-weight:900;color:var(--ds-dark);letter-spacing:-1.5px;line-height:1;margin-bottom:14px}
.spin-prize-amount span{font-size:20px;font-weight:800;color:var(--ds-green);letter-spacing:0;margin-left:4px}
.spin-prize-alt{font-size:34px;color:var(--ds-green)}
.spin-prize-card h3{font-size:20px;font-weight:800;margin:0 0 10px}
.spin-prize-card p{font-size:15.5px;line-height:1.6;color:#5f645f;margin:0}

/* ---------- HOW (dark) ---------- */
.spin-how{background:var(--ds-charcoal);color:#fff;padding:90px 0}
.spin-how .spin-head h2{color:#fff}
.spin-steps{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.spin-step{background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.08);border-radius:14px;padding:34px 28px;text-align:center;transition:transform .2s,background .2s}
.spin-step:hover{transform:translateY(-4px);background:rgba(255,255,255,.07)}
.spin-step-num{width:52px;height:52px;margin:0 auto 16px;border-radius:50%;background:var(--ds-green);color:#1e2328;font-size:24px;font-weight:900;display:flex;align-items:center;justify-content:center}
.spin-step h3{font-size:21px;font-weight:800;margin:0 0 10px;color:#fff}
.spin-step p{font-size:15.5px;line-height:1.6;color:rgba(255,255,255,.72);margin:0}
.spin-how-cta{text-align:center;margin-top:44px}

/* ---------- SERVICES (light) ---------- */
.spin-services{background:#fff;color:var(--ds-dark);padding:90px 0}
.spin-svc-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:18px}
.spin-svc{display:block;text-decoration:none;color:inherit;background:#f8f8f8;border:1px solid #ececec;border-radius:14px;padding:28px 22px;transition:transform .2s,box-shadow .2s,border-color .2s}
.spin-svc:hover{transform:translateY(-4px);border-color:var(--ds-green);box-shadow:0 12px 28px rgba(0,0,0,.08)}
.spin-svc h3{font-size:18px;font-weight:800;margin:0 0 8px}
.spin-svc p{font-size:14.5px;line-height:1.55;color:#5f645f;margin:0 0 14px}
.spin-svc span{font-size:14px;font-weight:700;color:var(--ds-green-dark)}

/* ---------- FINAL CTA (green) ---------- */
.spin-cta{background:var(--ds-green);color:#1e2328;padding:80px 0;text-align:center}
.spin-cta h2{font-size:clamp(30px,3.6vw,46px);font-weight:900;letter-spacing:-1px;margin:0 0 16px}
.spin-cta p{font-size:18px;line-height:1.6;max-width:640px;margin:0 auto 30px;color:rgba(30,35,40,.82)}
.spin-cta-buttons{display:flex;gap:14px;justify-content:center;flex-wrap:wrap}
.ds-btn-dark{background:#1e2328;color:#fff;border:2px solid #1e2328}
.ds-btn-dark:hover{background:#000;border-color:#000;color:#fff}
.ds-btn-outline-dark{background:transparent;color:#1e2328;border:2px solid #1e2328}
.ds-btn-outline-dark:hover{background:#1e2328;color:#fff}

/* ---------- RULES ---------- */
.spin-rules{background:#f8f8f8;padding:44px 0}
.spin-rules h3{font-size:14px;text-transform:uppercase;letter-spacing:1.2px;color:#8a8f8a;margin:0 0 10px;font-weight:800}
.spin-rules p{font-size:13.5px;line-height:1.7;color:#7a7f7a;margin:0;max-width:960px}

/* ---------- RESPONSIVE ---------- */
@media (max-width:1024px){
  .spin-hero-grid{grid-template-columns:1fr;gap:40px}
  .spin-svc-grid{grid-template-columns:repeat(3,1fr)}
  .spin-prize-grid,.spin-steps{grid-template-columns:1fr 1fr}
  .spin-prize-hero{grid-column:1/-1}
}
@media (max-width:680px){
  .spin-hero{padding:120px 0 60px}
  .spin-form-card{padding:26px 22px}
  .spin-prize-grid,.spin-steps,.spin-svc-grid{grid-template-columns:1fr}
  .spin-prize-hero{grid-column:auto}
  .spin-row{grid-template-columns:1fr}
}

/* ---------- FONT GUARD (Zephyr falls back to serif) ---------- */
body.ds-spin-to-win,
body.ds-spin-to-win h1, body.ds-spin-to-win h2, body.ds-spin-to-win h3,
body.ds-spin-to-win p, body.ds-spin-to-win a, body.ds-spin-to-win li,
body.ds-spin-to-win input, body.ds-spin-to-win button, body.ds-spin-to-win span{
  font-family:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Helvetica,Arial,sans-serif;
}
.spin-hero-list li{align-items:flex-start}
.spin-hero-list li>span:last-child{line-height:1.45}
.spin-check{margin-top:1px}

/* consent checkbox */
.spin-consent{display:flex;gap:9px;align-items:flex-start;margin:2px 0 14px;font-size:12.5px;line-height:1.45;color:#5c625c;cursor:pointer}
.spin-consent input{margin-top:2px;width:16px;height:16px;flex:none;accent-color:#77E806}

/* ---------- MOBILE FIXES [2026-08-18] ---------- */
/* Zephyr renders checkboxes with appearance:none + a Material Icons "check" glyph,
   which overlapped the consent text. Restore the native box. */
body.ds-spin-to-win .spin-consent input[type=checkbox]{
  -webkit-appearance:checkbox;appearance:checkbox;
  width:17px;height:17px;min-width:17px;flex:0 0 17px;
  margin:1px 0 0;padding:0;border:0;background:none;box-shadow:none;accent-color:#77E806}
body.ds-spin-to-win .spin-consent input[type=checkbox]::before,
body.ds-spin-to-win .spin-consent input[type=checkbox]::after{content:none!important;display:none!important}
.spin-hp{position:absolute!important}

@media (max-width:680px){
  .spin-hero{padding:104px 0 54px}
  .spin-hero-grid{gap:32px}
  .spin-hero-copy h1{font-size:clamp(30px,8.2vw,40px);letter-spacing:-1px;margin:0 0 16px}
  .spin-hero-sub{font-size:16.5px;margin-bottom:20px}
  .spin-hero-list{gap:10px;margin-bottom:20px}
  .spin-hero-list li{font-size:15.5px;gap:10px}
  .spin-check{width:22px;height:22px;flex:0 0 22px;font-size:12px}
  .spin-form-card{padding:24px 20px;border-radius:14px}
  .spin-form-header h2{font-size:24px}
  .spin-form-header p{font-size:14.5px;margin-bottom:18px}
  .spin-row{gap:10px}
  .spin-prizes,.spin-how,.spin-services,.spin-cta{padding:58px 0}
  .spin-head{margin-bottom:32px}
  .spin-head h2{font-size:29px;letter-spacing:-.6px}
  .spin-head-sub{font-size:15.5px}
  .spin-prize-card,.spin-step,.spin-svc{padding:24px 20px}
  .spin-prize-amount{font-size:36px}
  .spin-how-cta{margin-top:30px}
  .spin-cta h2{font-size:30px}
  .spin-cta p{font-size:16.5px;margin-bottom:24px}
  .spin-cta-buttons{flex-direction:column;align-items:stretch;gap:12px}
  .spin-cta-buttons .ds-btn{width:100%;justify-content:center}
  .spin-rules{padding:34px 0}
}
@media (max-width:400px){
  .spin-hero-copy h1{font-size:29px}
  .spin-form-card{padding:22px 16px}
}