/* ============================================================================
   GetWheelSpinner — Today's Challenge module (v7.1.0)
   Homepage only. Deliberately lighter than the Multi Wheel flagship block that
   follows it, and much lighter than the wheel itself, so the page keeps a clear
   order: the wheel is the product, these are prompts.

   Contrast measured, never white-on-amber:
     light  #7C2D12 on #FEF1DD =  8.42:1     eyebrow #92400E on #FFFFFF = 7.5:1+
     dark   #FCD34D on #2D1F0D = 11.07:1     eyebrow #F59E0B on #07070D = 9.35:1
   Every html[data-theme="light"] override is declared after the rule it
   overrides and restates each property it needs.
   ============================================================================ */

.dc-module{
  display:flex;align-items:center;justify-content:space-between;gap:18px;
  flex-wrap:wrap;
  background:var(--card);
  border:1px solid rgba(245,158,11,.26);
  border-radius:var(--radius);
  padding:20px 24px;margin:26px 0;
}
.dc-copy{min-width:0;flex:1 1 320px}

.dc-eyebrow{
  margin:0 0 7px;
  font-size:11.5px;font-weight:700;letter-spacing:.13em;text-transform:uppercase;
  color:var(--amber);
}
.dc-text{
  margin:0;font-size:17px;line-height:1.5;font-weight:600;color:var(--text);
  overflow-wrap:anywhere;min-width:0;
}
.dc-foot{
  margin:8px 0 0;font-size:12.5px;color:var(--muted);
}

.dc-cta{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  min-height:48px;padding:13px 22px;flex:0 0 auto;
  background:rgba(245,158,11,.16);
  border:2px solid rgba(245,158,11,.55);
  border-radius:999px;
  font-size:15px;font-weight:700;color:#FCD34D;
  text-decoration:none;white-space:nowrap;
  transition:all .16s;
}
.dc-cta:hover{
  background:rgba(245,158,11,.26);border-color:rgba(245,158,11,.85);
  color:#FDE68A;transform:translateY(-1px);
}
.dc-cta:focus-visible{outline:3px solid var(--amber);outline-offset:3px}

html[data-theme="light"] .dc-module{border-color:rgba(180,83,9,.26)}
html[data-theme="light"] .dc-eyebrow{color:#92400E}
html[data-theme="light"] .dc-text{color:#0F172A}
html[data-theme="light"] .dc-foot{color:#475569}
html[data-theme="light"] .dc-cta{
  background:rgba(245,158,11,.14);border-color:#B45309;color:#7C2D12;
}
html[data-theme="light"] .dc-cta:hover{
  background:rgba(245,158,11,.24);border-color:#9A3412;color:#7C2D12;
}
html[data-theme="light"] .dc-cta:focus-visible{outline:3px solid #B45309}

@media(max-width:600px){
  .dc-module{flex-direction:column;align-items:stretch;text-align:center;padding:18px}
  .dc-cta{width:100%}
  .dc-text{font-size:16px}
}

@media(prefers-reduced-motion:reduce){
  .dc-cta{transition:none}
  .dc-cta:hover{transform:none}
}